#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 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 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(imageurl)"></div>
    </div>
    <div class="mobile-title">
        <div class="content">
            <p class="title">Kangaroo Valley Safari</p>
            <p class="subtitle">By John Doe</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 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...

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

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="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

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 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 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 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 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 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 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 img-xsmall, img-small, img-large, and img-xlarge.

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

<!-- With avatar image -->
<figure class="avatar img-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 img-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-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.

#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-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 center">
        <div class="btn-container">
            <button class="btn-accent">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-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> 
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-chevron-left"></i></span><span>Back</span></a>
        </li>
        <li class="selected">
            <a><span class="icon"><i class="fa fa-home"></i></span><span>Home</span></a>
        </li>
        <li>
            <a><span>Forward</span><span class="icon"><i class="fa fa-chevron-right"></i></span></a>
        </li>
    </ul>
</div>

#Tooltips

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

<div class="col-6 center">
    <button class="btn-accent tooltip" data-tooltip="Tooltip 1">Button 1</button>
    <button class="btn-accent tooltip" data-tooltip="Tooltip 2">Button 2</button>
    <button class="btn-accent 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>

#Toasts

Use toasts to notify users of any changes.

Danger!

Run.

Just kidding. False alarm.

Different colors are supported in Cirrus to indicate different states.

Success

Warning

Error

<div class="toast success">
    <button class="btn-close"></button>
    <p>Success</p>
</div>
<div class="toast warning">
    <button class="btn-close"></button>
    <p>Warning</p>
</div>
<div class="toast error">
    <button class="btn-close"></button>
    <p>Error</p>
</div>