Simplelist

A very simple list for repeating data.

Any sort of content

Really simple list

More content, possible some pricing information

HTML

<div class="t-content">
    <div class="c-simplelist">
        <div class="c-simplelist-item c-button u-flex">
            <div class="u-flexItemGrow u-flexItemMiddle">
                <div>
                    Any sort of content
                </div>
                <div>
                    Really simple list
                </div>
            </div>
        </div>
        <div class="c-simplelist-item is-last-item c-button u-flex">
            <div class="u-flexItemGrow u-flexItemMiddle">
                <div>
                    More content, possible some pricing information
                </div>
            </div>
        </div>
    </div>
</div>

Pricing Plan Simplelist

Display pricing plans & associated discounts for a Product using Simplelist

$12.99 $0.00 Free for 1 month

$15.00 $7.50 for 3 months

$15.00 $7.50 for 4 months

$15.00 $7.50 for 5 months

HTML

<div class="t-content">
    <div class="c-simplelist">
        <div class="c-simplelist-item c-button u-flex">
            <div class="u-flexItemGrow u-flexItemMiddle">
                <div>
                    <span class="is-discounted">$12.99</span> $0.00 Free for 1 month
                </div>
                <div>
                    <span class="is-discounted">$15.00</span> $7.50 for 3 months
                </div>
            </div>
        </div>
        <div class="c-simplelist-item is-last-item c-button u-flex">
            <div class="u-flexItemGrow c-simplelist-itemTitle">
                <div>
                    <span class="is-discounted">$15.00</span> $7.50 for 4 months
                </div>
            </div>
        </div>
        <div class="c-simplelist-item is-last-item c-button u-flex">
            <label>
                <div class="u-flexItemGrow c-simplelist-itemTitle">
                    <div>
                        <span class="is-discounted">$15.00</span> $7.50 for 5 months
                    </div>
                </div>
            </label>
        </div>
    </div>
</div>

Simplelist with delimited subtitle

Display a title and delimited list of attributes

Title of Item 1

attribute A

attribute B

attribute C

Title of Item 2

attribute A

attribute B

attribute C

attribute D

HTML

<div class="t-content">
    <div class="c-simplelist">
        <div class="c-simplelist-item c-simplelist-item--separated u-flex u-mb+">
            <div class="u-flexItemGrow u-flexItemMiddle">
                <div class="c-simplelist-itemTitle">
                    Title of Item 1
                </div>
                <div class="c-simplelist-itemMetaContainer">
                    <div class="c-simplelist-itemMetaItem">
                        attribute A
                    </div>
                    <div class="c-simplelist-itemMetaItem">
                        attribute B
                    </div>
                    <div class="c-simplelist-itemMetaItem">
                        attribute C
                    </div>
                </div>
            </div>
        </div>
        <div class="c-simplelist-item c-simplelist-item--separated u-flex">
            <div class="u-flexItemGrow u-flexItemMiddle">
                <div class="c-simplelist-itemTitle">
                    Title of Item 2
                </div>
                <div class="c-simplelist-itemMetaContainer">
                    <div class="c-simplelist-itemMetaItem">
                        attribute A
                    </div>
                    <div class="c-simplelist-itemMetaItem">
                        attribute B
                    </div>
                    <div class="c-simplelist-itemMetaItem">
                        attribute C
                    </div>
                    <div class="c-simplelist-itemMetaItem">
                        attribute D
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>