siimple 3.2.0 siimple.xyz
Components
Reusable advanced elements, including alerts, lists and more!
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
<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
<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.