Cards

Simple rectangular container.

Card header

Card title

Card content ...

Basic

A basic card containing a title, content and an extra corner content.

<div class="SnCard">
    <div class="SnCard-header">Card header</div>
    <div class="SnCard-body">
        <h2 class="SnCard-title">Card title</h2>
        <p class="SnCard-description">Card content ...</p>
    </div>
</div>

Card header

Card title

Card content ...

Hoverable

hover

<div class="SnCard hoverable">
    <div class="SnCard-header">Card header</div>
    <div class="SnCard-body">
        <h2 class="SnCard-title">Card title</h2>
        <p class="SnCard-description">Card content ...</p>
    </div>
</div>

API

Property	Class
Card	`.SnCard.hoverable`
Header	`.SnCard-header`
Body	`.SnCard-body`
Title	`.SnCard-title`
Description	`.SnCard-description`