Lexicon: Recreating the Demo - FP RokSprocket Tabs - ContentTop

FP RokSprocket Tabs - ContentTop

We used a RokSprocket module with the Tabs layout to make up this area of the front page. You will find the settings used in our demo below.

We utilized the Simple Content Provider type in order to create custom articles for the front page. Most of the magic involving the look and feel of these items happen in the Tab Label and Description fields for the individual line items.

Details

Filtered Article List

Below, you will find an example of the settings used for one of the items present in the demo.

Item 1

Description

<div class="gantry-row">
    <div class="gantry-width-25">
        <div class="gantry-width-spacer"><img alt="image" src=
        "images/rocketlauncher/home/fp-roksprocket-tabs-content-top/img-01.jpg"></div>
    </div>
    <div class="gantry-width-50">
        <div class="gantry-width-spacer">
            <h4>Tabbed Content Display</h4>
            <p>A layout to display tabbed content, with configurable tab
            positions <span class="hidden-tablet">to the top, bottom, left or
            right</span>.<br>
            <span class="rt-green-text"><strong>Available</strong></span></p>
        </div>
    </div>
    <div class="gantry-width-25">
        <div class="gantry-width-spacer gantry-right gantry-text-right">
            <h4 class="nomarginbottom">Tabs Layout</h4>
            <p class="rt-text-small"><em>RokSprocket</em></p>
            <p><a class="readon" href="#"><span class=
            "hidden-tablet">Learn</span> More</a></p>
        </div>
    </div>
</div>
<div class="clear"></div>
<hr>
<div class="gantry-row">
    <div class="gantry-width-25">
        <div class="gantry-width-spacer"><img alt="image" src=
        "images/rocketlauncher/home/fp-roksprocket-tabs-content-top/img-02.jpg"></div>
    </div>
    <div class="gantry-width-50">
        <div class="gantry-width-spacer">
            <h4>Ticker Styled Content</h4>
            <p>The Headlines layout displays content in a news ticket type
            format<span class="hidden-tablet">, rotating through content
            snippets</span>.<br>
            <span class="rt-green-text"><strong>Available</strong></span></p>
        </div>
    </div>
    <div class="gantry-width-25">
        <div class="gantry-width-spacer gantry-right gantry-text-right">
            <h4 class="nomarginbottom">Headlines</h4>
            <p class="rt-text-small"><em>RokSprocket</em></p>
            <p><a class="readon" href="#"><span class=
            "hidden-tablet">Learn</span> More</a></p>
        </div>
    </div>
</div>
<div class="clear"></div>

Layout Options

Advanced