#Cards

Cards in Cirrus are designed to provide an easy and flexible way for developers to present data in an elegant fashion.

Deer

By Teddy Kelley

This is where the caption text will go. This text is contained in a content div and written in paragraphs with the same styling.

<div class="card">
    <div class="card-container">
        <div class="card-image" style="background-image: url(https://images.url.com)"></div>

        <div class="title-container">
            <p class="title">Deer</p><span class="subtitle">By Teddy Kelley</span>
        </div>
    </div>
    <div class="content">
        <p>This is where the caption text will go. This text is contained in a content div and written in paragraphs with the same styling.</p>
    </div>
    <div class="action-bar center">
        <button class="btn">SHARE</button>
        <button class="btn">LEARN MORE</button>
    </div>
</div>
Card Outline

Below is a simple breakdown of how a standard card is structured. The card-image is wrapped inside the card-container with the title and subtitle nested inside the title-container.

Title

Subtitle

Text and other content is embedded in the content div here. Embed the card-image in the card-container above.

<div class="card">
        <div class="card-container">
            <div class="card-image"></div>
            <div class="title-container">
                <p class="title">Title</p>
                <span class="subtitle">Subtitle</span>
            </div>
        </div>
        <div class="content">
            <!-- Text and other components -->
        </div>
        <div class="action-bar center">
            <!-- Action buttons -->
        </div>
        <div class="card-footer content-fluid">
            <!-- Footer text -->
        </div>
    </div>
</div>

# Basic Design

Sometimes the best way to get information across is a minimallistic approach. Cards in Cirrus are adaptable to what you want to show.

<div class="card">
    <div class="content">
        <div class="row">
            <img src="https://maxcdn.icons8.com/Share/icon/Logos//chrome1600.png" class="level" id="projectlogo" />
            <p id="projectname" class="title level">Google Chrome</p>
            <p>Hello here is some text for this card wrapped inside a link.</p>
        </div>
    </div>
</div>

#Animated Card

Cirrus also comes with different components that can interact differently such as this card design with a hover animation. Compared to the card above, the display for the avatar, title text, and buttons are all handled by the card-tile.

Kangaroo Valley Safari

By Mattia Astorino

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

<div class="card slide-up">
    <div class="card-container">
        <div class="card-image" style="background-image: url(imageurl)"></div>
    </div>
    <div class="mobile-title">
        <div class="content">
            <p class="title">Kangaroo Valley Safari</p>
            <p class="subtitle">By Mattia Astorino</p>
        </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

Need to display multiple cards at once? Worried about having to resize each card? With Cirrus's grid system, you can specify how many cards will be used in each row and your cards will automatically adjust and fill each cell.

Kangaroo Valley Safari

By Mattia Astorino

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

Kangaroo Valley Safari

By Mattia Astorino

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

Kangaroo Valley Safari

By Mattia Astorino

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

Another card design with the same CSS, different structure.

Kangaroo Valley Safari

By Mattia Astorino

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

Person

Kangaroo Valley Safari

By Mattia Astorino

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

Kangaroo Valley Safari

By Mattia Astorino

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

Find out more about the Cirrus's grid system and how it works with other elements here!

# Did somebody say Twitter?

Below is an example that shows how you can use cards to create any design you want, include tweet cards from Twitter.

Person

John Doe

@JohnDoe

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

<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&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop=)"></div>
    </div>
    <div class="content">
        <div class="card-tile tile-center">
            <div class="tile-icon">
                <figure class="avatar">
                    <img src="https://organicthemes.com/demo/profile/files/2012/12/profile_img.png" alt="Person">
                </figure>
            </div>
            
            <div class="tile-container">
                <p class="tile-title">John Doe</p>
                <p class="tile-subtitle"><a>@JohnDoe</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="pull-right">
            <div class="level-left ignore-screen">
                <a class="level-item">
                    <span class="icon"><i class="fa small fa-reply" aria-hidden="true"></i></span>
                </a>
                <a class="level-item">
                    <span class="icon"><i class="fa small fa-retweet" aria-hidden="true"></i></span>
                </a>
                <a class="level-item">
                    <span class="icon"><i class="fa small fa-heart" aria-hidden="true"></i></span>
                </a>
            </div>
        </div>
    </div>
</div>

#Card Headers

This is the title

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

<div class="card">
    <div class="card-head">
        <p class="card-head-title">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="action-bar center">
        <button class="btn">Cancel</button>
        <button class="btn">Save</button>
        <button class="btn">Post</button>
    </div>
</div>

# Card Tiles

Card Tiles are the flexbox alternative to cards that tile child elements horizontally and more closely resemble horizontal cards in Android. These get displayed in card slide-up to show an avatar, text, or buttons.

Robert Downey Jr. shared a post from Stark Industries.

Robert shared: 'Stark Industries is proud to announce its brand new suit.'

23 minutes ago

Robert Downey Jr. shared a post from Stark Industries.

Robert shared: 'Stark Industries is proud to announce its brand new suit.'

23 minutes ago
<div class="card-tile">
    <div class="tile-icon">
        <figure class="avatar">
            <img src="https://www.seoclerk.com/pics/319222-1IvI0s1421931178.png">
        </figure>
    </div>
    <div class="tile-container">
        <p class="tile-title no-margin">Robert Downey Jr. shared a post from <b>Stark Industries</b>.</p>
        <p class="tile-subtitle no-margin">Robert shared: 'Stark Industries is proud to announce its brand new suit.'</p>
        <span class="info">23 minutes ago</span>
        <p class="tile-buttons no-margin">
            <button class="btn-accent btn-tiny uppercase">View</button>
            <button class="btn-tiny uppercase">Dismiss</button>
        </p>
    </div>
</div>

In the two examples above, the first one is your standard tile with the card-tile parent container and tile-container for other elements images, text, buttons, etc. The tile-buttons class could be used also to display buttons horizontally. The card tile at the bottom vertically aligns all elements to be vertically centered giving a more balanced appearance.

Robert Downey Jr. just poked you.

Poke him back or view on Facebook.

6 seconds ago

Polarity.exe

953KB / 1.1MB - 3 seconds...

Meeting Scheduled

You have a scheduled meeting in 1 hour.

If you require some extra padding around your avatar image, add the padded class to the avatar image.