#Components

Cirrus offers an extensive and growing library of components that can be easily integrated into any webpage. Have elegantly designed components ranging from cards to tabs right at your finger tips. Jump other sections from the jump menu at the top right.

Embedding Video

Yosemite National Park

Modal Dialogs

Tab Component

#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 u-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" style="background-image: linear-gradient(-20deg, #fc6076 0%, #ff9a44 100%);"></div>
        <div class="title-container">
            <p class="title">Title</p>
            <span class="subtitle">Subtitle</span>
        </div>
    </div>
    <div class="content">
        <!-- Content -->
    </div>
    <div class="action-bar u-center">
        <!-- Action Bar -->
    </div>
    <div class="card-footer content-fluid">
        <!-- Footer -->
    </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.

<a href="#">
    <div class="card">
        <div class="content">
            <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>
</a>

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 tile.

There are a couple of new and different classes to know about before using an animated card:

Following the steps above, the resulting card should be 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...

<div class="card slide-up">
    <div class="card-container">
        <div class="card-image" style="background-image: url(https://unsplash.it/640/480?random&blur)"></div>
    </div>
    <div class="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

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 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...

Another card design with the same CSS, different structure.

Kangaroo Valley Safari

By John Doe

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

Person

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...

Equal Heights

Added
0.5.5

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 u-flex u-flex-column h-100 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.

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.

Title

Subtitle

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

Title

Subtitle

Twitter Card

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

Person

Joanne Doe

@jdoe

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">
        <space></space>
        <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="pull-right">
            <div class="level-left ignore-screen">
                <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>

#Card Headers

Add a simple title to your card with the card-head-title class inside the card-head.

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 u-center">
        <button class="btn">Cancel</button>
        <button class="btn">Save</button>
        <button class="btn">Post</button>
    </div>
</div>

# Tiles

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="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 u-no-margin">Robert Downey Jr. shared a post from <b>Stark Industries</b>.</p>
        <p class="tile__subtitle u-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 u-no-margin">
            <button class="btn-primary 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 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.

# Media

Embed figures, videos, and responsive images in your website.

Images

Never worry about resizing images ever again. Add the img-stretch class to make your graphic responsive to all screen sizes.

<div class="row">
    <img class="img-stretch" src="img/yosemite.png" />
</div>

Having the image cover a parent element or just being contained in it can be achived by using the img-cover and img-contain classes respectively. These are particularly helpful when the image or parent has a fixed height (below is an example with a fixed height of 350px).

Image with img-cover
Image with img-contain
<div class="row">
    <div class="col-6">
        <figure class="fig">
            <img class="img-cover" src="img/yosemite.png" />
            <figcaption class="fig-caption u-text-center">
                Image with <code>img-cover</code>
            </figcaption>
        </figure>
    </div>
    <div class="col-6"> 
        <figure class="fig">
            <img class="img-contain" src="img/yosemite.png" />
            <figcaption class="fig-caption u-text-center">
                Image with <code>img-contain</code>
            </figcaption>
        </figure>
    </div>
</div>

Figures

Figures are simply containers for an images that would be positioned independently from the main flow of the page.

Yosemite Valley, United States

To add a caption and separate the image from the rest of the page, surround it with a figure tag with the fig class. This allows the image to span a given area while leaving space underneath it for a simple caption.

<figure class="fig">
    <img src="img/yosemite-falls.png" />
    <figcaption class="fig-caption u-text-center">
        Yosemite Valley, United States
    </figcaption>
</figure>

Videos

As for videos, responsiveness can be achieved by adding the media-stretch class to the parent div holding the video.

To change the aspect ratio of videos, Cirrus introduces modifiers rat-4-3 and rat-1-1 to change aspect ratios with the media-stretch class.

1:1 ratio

4:3 ratio

<div class="media-stretch rat-1-1">
    <iframe width="560" height="315" src="./..." frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>

Avatars

A useful class for styling user profile pictures. This is used within many other components including the tile. To provide some flexibility, Cirrus adds a data-text attribute to specify some text in place of an image if it is not available.

Jenelle Zaynab

@jenelle_zaynab

Jenelle Zaynab

@jenelle_zaynab

Jenelle Zaynab

@jenelle_zaynab

Jenelle Zaynab

@jenelle_zaynab

Jenelle Zaynab

@jenelle_zaynab

Nathan Dumlao

@nate_dumlao

Nathan Dumlao

@nate_dumlao

Nathan Dumlao

@nate_dumlao

Nathan Dumlao

@nate_dumlao

Nathan Dumlao

@nate_dumlao

As with many other components in Cirrus, avatar comes with 4 other size modifiers including avatar--xsmall, avatar--small, avatar--large, and avatar--xlarge.

<!-- No avatar image -->
<figure class="avatar avatar--xsmall" data-text="Jz"></figure>

<!-- With avatar image -->
<figure class="avatar avatar--xsmall">
    <img src="./img/avatar.png" />
</figure>

To show the surrounding avatar circle, add the padded class to the avatar's image element.

<figure class="avatar avatar--xsmall">
    <img src="./img/avatar.png" class="padded" />
</figure>

# Modals

Modals makes prompts simple for any website or app.

Setting up a modal is quite simple. To start, create a div with the modal class anywhere on the page. The next crucial step is to specify an id that you will use to reference the modal dialog with (from a button for example).

For a close button, you must specify an id to change the closing behavior.

Outline

  • modal acts the parent container of all the components
    • modal-content is similar to the content class itself, where it adds padding on the sides to push the content closer to the center.
      • modal-header provides a region for the title of the dialog with the modal-title class.
      • modal-body holds the main contents of the dialog and can contain other controls within,
      • modal-footer serves as the ending of the modal dialog. This typically holds buttons to allow user to make a selection.
<div class="modal" id="modal-id">
    <a href="#target" class="modal-overlay close-btn" aria-label="Close"></a>
    <div class="modal-content" role="document">
        <div class="modal-header">
            <a href="#components" class="pull-right" aria-label="Close"><span class="icon"><i class="fa fa-wrapper fa-times"></i></span></a>
            <div class="modal-title">Modal Dialog</div>
        </div>
        <div class="modal-body">
            <!-- Modal content -->
        </div>
        <div class="modal-footer">
            <!-- Rows, buttons, etc... -->
        </div>
    </div>
</div>

Sizes

Modal dialogs come in 3 pre-defined sizes, each corresponding to small, medium, and large viewports using the modal-small, modal, and modal-large class selectors respectively.

Animations

Spice up your modal dialogs with a couple of animations.

Accessibility

To be complaint with WAI-ARIA Best Practices, you can easily include this snippet of JavaScript to close all dialogs when hitting the escape key.

                    document.addEventListener('keyup', function(e) {
    if(e.key === "Escape") {
        const modals = document.querySelectorAll('.modal-overlay');
        for (const modal of modals) {
            modal.click();
        }
    }
});
                

#Placeholders

A friendly way to notify users of updates or upcoming events.

The sever is currently taking a nap.
Come back in a few hours or press the refresh button.
<div class="placeholder">
    <div class="placeholder-icon">
        <span class="icon">
            <i class="fa fa-wrapper fa-coffee x-large"></i>
        </span>
    </div>
    <h6 class="placeholder-title">The sever is currently taking a nap.</h6>
    <div class="placeholder-subtitle">Come back in a few hours or press the refresh button.</div>

    <div class="placeholder-commands u-center">
        <div class="btn-container">
            <button class="btn-primary">Refresh</button>
        </div>
        <div class="btn-container">
            <button>Home</button>
        </div>
    </div>
</div>
                    

Outline

  • placeholder is the base class for this component.
    • placeholder-icon for displaying icons/glyphs
    • placeholder-title to show the main title.
    • place-subtitle provides extra context to the title.
    • placeholder-commands wraps around other controls like buttons or inputs.
Don't wait for the latest updates.
Sign up for our newsletter today.

#Tabs

Simple tab navigation for presenting different views with different styles and add-ons.

Above are tabs with base styling.

Outline

  • tab-container to house all the tabs
    • li for each of the individual tabs
      • a to embed links and for additional styling

To highlight or select any of the elements, add the active class to the list item's link.

<div class="tab-container">
    <ul>
        <li><a>Home</a></li>
        <li><a>Group</a></li>
        <li><a>Shop</a></li>
        <li class="selected"><a>Me</a></li>
    </ul>
</div>

Alternative Sizes

Modify the size of the tab-container using the tabs-xsmall, tabs-small, tabs-large, and tabs-xlarge classes.

X-Small

<div class="tab-container tabs-xsmall">
    <ul>
        <!-- Tab Items -->
    </ul>
</div>

Small

<div class="tab-container tabs-small">
    <ul>
        <!-- Tab Items -->
    </ul>
</div>

Large

<div class="tab-container tabs-large">
    <ul>
        <!-- Tab Items -->
    </ul>
</div>

X-Large

<div class="tab-container tabs-xlarge">
    <ul>
        <!-- Tab Items -->
    </ul>
</div>

Alignment

Easily change the alignment on the tabs with tabs-center, tabs-right, and tabs-fill. Note that tabs are left-justified by default.

Centered

<div class="tab-container tabs-center">
    <ul>
        <li><a>Home</a></li>
        <li><a>Group</a></li>
        <li><a>Shop</a></li>
        <li class="selected"><a>Me</a></li>
    </ul>
</div>

Right

<div class="tab-container tabs-right">
    <ul>
        <li><a>Home</a></li>
        <li><a>Group</a></li>
        <li><a>Shop</a></li>
        <li class="selected"><a>Me</a></li>
    </ul>
</div> 

Fill

<div class="tab-container tabs-fill">
    <ul>
        <li><a>Home</a></li>
        <li><a>Group</a></li>
        <li><a>Shop</a></li>
        <li class="selected"><a>Me</a></li>
    </ul>
</div> 

Styles

Try out alternative styles with tabs.

Depth

<div class="tab-container tabs-depth tabs-fill">
    <ul>
        <li><a>Home</a></li>
        <li><a>Group</a></li>
        <li><a>Shop</a></li>
        <li class="selected"><a>Me</a></li>
    </ul>
</div>

Classic

<div class="tab-container tabs-classic tabs-fill tabs-center">
    <ul>
        <li><a>Home</a></li>
        <li><a>Group</a></li>
        <li class="selected"><a>Shop</a></li>
        <li><a>Me</a></li>
    </ul>
</div>

Font Awesome

Integrate FontAwesome glyphs into your tabs. Cirrus will automatically align the glyphs to the left or right depending if the glyph or text comes first.

Classic

<div class="tab-container tabs-classic tabs-center">
    <ul>
        <li>
            <a><span class="icon"><i class="fa fa-wrapper fa-chevron-left"></i></span><span>Back</span></a>
        </li>
        <li class="selected">
            <a><span class="icon"><i class="fa fa-wrapper fa-home"></i></span><span>Home</span></a>
        </li>
        <li>
            <a><span>Forward</span><span class="icon"><i class="fa fa-wrapper fa-chevron-right"></i></span></a>
        </li>
    </ul>
</div>

#Tags

Added
0.5.5

A handy component to display snippets of information throughout the site.

Look
At
Me!
<div class="tag-container u-center">
    <div class="tag">Look</div>
    <div class="tag">At</div>
    <div class="tag">Me!</div>
</div>
Tag Colors

Color your tags up just like your buttons with 8 different colors.

White
Dark
Primary
Info
Success
Warning
Danger
<div class="tag tag--white">White</div>
<div class="tag tag--black">Dark</div>
<div class="tag tag--primary">Primary</div>
<div class="tag tag--link">Link</div>
<div class="tag tag--info">Info</div>
<div class="tag tag--success">Success</div>
<div class="tag tag--warning">Warning</div>
<div class="tag tag--danger">Danger</div>
Tag Sizes

Tags also come two sizes larger with the tag--large and tag--xlarge modifiers. Tags can also be more rounded with the tag--rounded class.

Normal
Extra Large
<div class="tag tag--info">Normal</div>
<div class="tag tag--link tag--large">Large</div>
<div class="tag tag--danger tag--xlarge">Extra Large</div>
Tag Close

This is a special tag that is designed to serve as a close button for the tag with the tag__close-btn class.

<div class="tag tag__close-btn"></div>
Tag Delete

This is embedded within the tag itself unlike the close button to the side. Create a new div inside the tag with the tag--delete class.

Close Me
<div class="tag tag--success">
    Close Me
    <div class="tag tag--delete"></div>
</div>
Grouped Tags

Group tags with extra buttons like the delete button

Version
0.5.5
<div class="tag-container group-tags">
    <div class="tag tag--dark">Version</div><div class="tag tag--info">0.5.5</div>
    <div class="tag tag--warning tag__close-btn"></div>
</div>
Tag Container

The tag-container is a container for different tags.

<div class="tag-container">
    <div class="tag tag--link">One</div>
    <div class="tag tag--link">Two</div>
    <div class="tag tag--link">Three</div>
    <div class="tag tag--link">Four</div>
    <div class="tag tag--link">Five</div>
</div>

#Toasts

Added
0.5.5

Use toasts to notify users of any changes. For titles, remember to add the toast__title class.

Danger!

Run.

Just kidding. False alarm.

Different colors are supported in Cirrus to indicate different states.

Success

Warning

Error

Info

Primary

<div class="toast toast--success">
    <button class="btn-close"></button>
    <p>Success</p>
</div>
<div class="toast toast--warning">
    <button class="btn-close"></button>
    <p>Warning</p>
</div>
<div class="toast toast--error">
    <button class="btn-close"></button>
    <p>Error</p>
</div>
<div class="toast toast--info">
    <button class="btn-close"></button>
    <p>Info</p>
</div>
<div class="toast toast--link">
    <button class="btn-close"></button>
    <p>Link</p>
</div>
<div class="toast toast--primary">
    <button class="btn-close"></button>
    <p>Primary</p>
</div>

#Tooltips

Provide context and information with tooltips for any component. Specify text in the data-tooltip attribute.

<div class="col-6 u-center">
    <button class="btn-primary tooltip" data-tooltip="Tooltip 1">Button 1</button>
    <button class="btn-primary tooltip" data-tooltip="Tooltip 2">Button 2</button>
    <button class="btn-primary tooltip" data-tooltip="Tooltip 3">Button 3</button>
</div>

Tooltip Direction

Show your tooltips in different directions.

<div class="btn-container">
    <button class="tooltip" data-tooltip="Tooltip Top (Default)">Tooltip Top</button>
</div>
<div class="btn-container">
    <button class="tooltip tooltip-top-left" data-tooltip="Tooltip Top Left">Tooltip Top Left</button>
</div>
<div class="btn-container">
    <button class="tooltip tooltip-top-right" data-tooltip="Tooltip Top Right">Tooltip Top Right</button>
</div>
<div class="btn-container">
    <button class="tooltip tooltip-bottom" data-tooltip="Tooltip Bottom">Tooltip Bottom</button>
</div>
<div class="btn-container">
    <button class="tooltip tooltip-bottom-left" data-tooltip="Tooltip Bottom Left">Tooltip Bottom Left</button>
</div>
<div class="btn-container">
    <button class="tooltip tooltip-bottom-right" data-tooltip="Tooltip Bottom Right">Tooltip Bottom Right</button>
</div>
<div class="btn-container">
    <button class="tooltip tooltip--left" data-tooltip="Tooltip Left">Tooltip Left</button>
</div>
<div class="btn-container">
    <button class="tooltip tooltip-right" data-tooltip="Tooltip Right">Tooltip Right</button>
</div>