Cirrus

#Cards

A card can be thought of a more specialized and elegant version of a frame with different configurations and a hover effect.

#Structure

The structure for the card contains quite a number of classes, so below is a breakdown of what is supported.

Title

Subtitle

Text and other content belong here, inside a content div.

This is additional footer text in card__footer.
Structure
  • card
    • card__header (alternate title)
    • card__container
      • card__image
      • card__title-container
        • title
        • subtitle
    • content
    • card__action-bar
    • card__footer
<div class="card" style="max-width: 350px;">
    <div class="card__container">
        <div class="card__image"></div>
        <div class="card__title-container">
            <p class="title">Title</p><span class="subtitle">Subtitle</span></div>
    </div>
    <div class="content">
        <p>Text and other content belong here, inside a <code>content</code> div.</p>
    </div>
    <div class="card__action-bar u-center">
        <button class="btn-link outline">Buttons</button>
        <button class="btn-link outline">Go here</button>
    </div>
    <div class="card__footer">
        <div class="u-text-center"><span>This is additional footer text in <code>card__footer</code>.</span></div>
    </div>
</div>

#Basic

Below is just a simple example of a card that contains a centered image and some text components.

Fast. Very fast.

Blazing fast speed you can depend on.

<div class="card" style="max-width: 250px;">
    <div class="content u-text-center pt-3">
        <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="bolt" class="svg-inline--fa fa-bolt fa-w-10 fa-wrapper text-blue-600 bg-blue-100 p-3" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" style="border-radius: 100%; height: 4.75rem; width: 4.75rem;">
            <path fill="currentColor" d="M296 160H180.6l42.6-129.8C227.2 15 215.7 0 200 0H56C44 0 33.8 8.9 32.2 20.8l-32 240C-1.7 275.2 9.5 288 24 288h118.7L96.6 482.5c-3.6 15.2 8 29.5 23.3 29.5 8.4 0 16.4-4.4 20.8-12l176-304c9.3-15.9-2.2-36-20.7-36z"></path>
        </svg>
        <p id="projectname" class="title mt-2 mb-0">Fast. Very fast.</p>
        <p>Blazing fast speed you can rely on.</p>
    </div>
</div>

#Animated

The animated variant of a card comes with a title container the slides up to reveal more information on hover.

Compared to a typical card, there are a couple of key differences to note regardingthe code.

  • An animated card must have the card--slide-up class along with the card class.
  • To display an image, it is recommended to create a card__image div nested inside a card__container div.
  • Unlike the standard card above, the title and subtitle are placed in the card__mobile-title div below the card__container.
  • The content or text of the card is then placed inside a standard content div now with the card__body class.

Following the steps above should yield a card similar to the one below.

Kangaroo Valley Safari

By John Doe

Located two hours south of Sydney in the Southern Highland of New South Wales...

2 min. read 22 comments
<div class="card card--slide-up">
    <div class="card__container">
        <div class="card__image" style="background-image: url(&quot;https://unsplash.it/640/480?random&amp;blur&quot;);"></div>
    </div>
    <div class="card__mobile-title">
        <div class="content">
            <div class="tile">
                <div class="tile__container">
                    <p class="tile__title">Kangaroo Valley Safari</p>
                    <p class="tile__subtitle">By John Doe</p>
                </div>
            </div>
        </div>
    </div>
    <div class="card__body content">
        <p>Located two hours south of Sydney in the Southern Highland of New South Wales...</p>
    </div>
    <div class="card__footer content">2 min. read 22 comments</div>
</div>

#Grouping

Cards can be grouped using Cirrus's flexbox grid system.

Kangaroo Valley Safari

By John Doe

Located two hours south of Sydney in the Southern Highland of New South Wales...

Kangaroo Valley Safari

By John Doe

Located two hours south of Sydney in the Southern Highland of New South Wales...

Kangaroo Valley Safari

By John Doe

Located two hours south of Sydney in the Southern Highland of New South Wales...

Grouping with animated cards.

Kangaroo Valley Safari

By John Doe

Located two hours south of Sydney in the Southern Highland of New South Wales...

2 min. read 22 comments
Person

Kangaroo Valley Safari

By John Doe

Located two hours south of Sydney in the Southern Highland of New South Wales...

2 min. read 22 comments

Kangaroo Valley Safari

By John Doe

Located two hours south of Sydney in the Southern Highland of New South Wales...

03:45 - 1 Jan 2017

#Equal Heights

You may have noticed that the heights of the cards are not the same if the length of the content is different. To fix this, you can add the h-100 u-flex u-flex-column classes to card.

Note that this does not work with the card with the animated card above.

Before

Title

Subtitle

Text and other content is embedded in the content div here. Embed the card__image in the card__container above.

This is additional footer text in card__footer.

Title

Subtitle

Text and other content is embedded in the content div here. Embed the card__image in the card__container above.

Title

Subtitle
After

Title

Subtitle

Text and other content is embedded in the content div here. Embed the card__image in the card__container above.

This is additional footer text in card__footer.

Title

Subtitle

Text and other content is embedded in the content div here. Embed the card__image in the card__container above.

Title

Subtitle

#Examples

Here are a couple of examples to help you get started with designing using cards.

Twitter Card
Person

Joanne Doe

@jdoe

Testing my new DSLR. Wow check out that deer! #nature

6:32 PM - 3 Jul 18
<div class="card">
    <div class="card__container">
        <div class="card__image" style="background-image: url(https://images.unsplash.com/photo-1467952497026-86722ef1916f?dpr=1.25&amp;auto=compress,format&amp;fit=crop&amp;w=1199&amp;h=799&amp;q=80&amp;cs=tinysrgb&amp;crop=)"></div>
    </div>
    <div class="content">
        <div class="space"></div>
        <div class="tile tile--center">
            <div class="tile__icon">
                <figure class="avatar">
                    <img src="https://organicthemes.com/demo/profile/files/2018/05/profile-pic-132x132.jpg" alt="Person">
                </figure>
            </div>

            <div class="tile__container">
                <p class="tile__title">Joanne Doe</p>
                <p class="tile__subtitle"><a>@jdoe</a></p>
            </div>
        </div>
        <p>Testing my new DSLR. Wow check out that deer! <a href="!#">#nature</a></p>
    </div>
    <div class="card__footer level content">
        6:32 PM - 3 Jul 18
        <div class="u-pull-right">
            <div class="level-right">
                <a class="level-item">
                    <span class="icon"><i class="fa fa-wrapper small fa-reply" aria-hidden="true"></i></span>
                </a>
                <a class="level-item">
                    <span class="icon"><i class="fa fa-wrapper small fa-retweet" aria-hidden="true"></i></span>
                </a>
                <a class="level-item">
                    <span class="icon"><i class="fa fa-wrapper small fa-heart" aria-hidden="true"></i></span>
                </a>
            </div>
        </div>
    </div>
</div>
Simple Tweet Card

This is the title

This is some sample text spam spam spam spam spam spam spam. #place#holder@Cirrus

6:32 PM - 3 Jul 18
<div class="card">
    <div class="card__header">
        <p class="font-bold px-3">This is the title</p>
    </div>
    <div class="content">
        <p>This is some sample text spam spam spam spam spam spam spam. <a href="!#">#place</a><a href="!#">#holder</a><a href="!#">@Cirrus</a></p>
    </div>
    <div class="card__footer level content">6:32 PM - 3 Jul 18</div>
    <div class="card__action-bar u-center">
        <button class="btn-transparent outline">Cancel</button>
        <button class="btn-transparent outline">Save</button>
        <button class="btn-transparent outline">Post</button>
    </div>
</div>