Card | siimple css

Card

A minimal and flexible container component

Added in v3.1.0

A card is a flexible container component. Usually a card has three parts:

siimple-card-header: the card header.
siimple-card-body: the card body, generally where you can place your content.
siimple-card-footer: the card footer.

Card header

Card content

Card footer

<div class="siimple-card" style="max-width:300px">
    <div class="siimple-card-header">
        Card header
    </div>
    <div class="siimple-card-body">
        Card content
    </div>
    <div class="siimple-card-footer">
        Card footer
    </div>
</div>

You can place more than one card body elements:

Card header

Card body 1

Card body 2

Card body 3

Card footer

<div class="siimple-card" style="max-width:300px">
    <div class="siimple-card-header">
        Card header
    </div>
    <div class="siimple-card-body">
        Card body 1
    </div>
    <div class="siimple-card-body">
        Card body 2
    </div>
    <div class="siimple-card-body">
        Card body 3
    </div>
    <div class="siimple-card-footer">
        Card footer
    </div>
</div>

Title and subtitle

Card body can contain a title with the class siimple-card-title and a subtitle with the class siimple-card-subtitle.

Special card title

Special card subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<div class="siimple-card" style="max-width:300px;">
    <div class="siimple-card-body">
        <div class="siimple-card-title">Special card title</div>
        <div class="siimple-card-subtitle">Special card subtitle</div>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
    </div>
</div>

Found a mistake or want to help improve this documentation? Suggest changes.