#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

Favorites
Profile
Pins

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

This is additional footer text in card-footer.

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

Google Chrome

Hello here is some text for this card wrapped inside a link.

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

An animated card must have the 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 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, 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...

2 min. read 22 comments

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

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

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

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.

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

Twitter Card

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

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

6:32 PM - 3 Jul 18

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

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

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

Nathan Dumlao

Nathan Dumlao

Nathan Dumlao

Nathan Dumlao

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

Return to Specific Div

<a href="#TAG-OUTSIDE" class="modal-overlay close-btn" aria-label="Close"></a>

Return to Top

<a href="#" class="modal-overlay close-btn" aria-label="Close"></a>

Keep Scroll Position

<a href="#NON-EXISTANT-DIV" class="modal-overlay close-btn" aria-label="Close"></a>

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.

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

#Tabs

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

Home
Group
Shop
Me

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

Home
Group
Shop
Me

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

Small

Home
Group
Shop
Me

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

Large

Home
Group
Shop
Me

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

X-Large

Home
Group
Shop
Me

<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

Home
Group
Shop
Me

<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

Home
Group
Shop
Me

<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

Home
Group
Shop
Me

<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

Home
Group
Shop
Me

<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

Home
Group
Shop
Me

<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

Back
Home
Forward

<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

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

Link

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

Large

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.

One

Two

Three

Four

Five

<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

Link

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>

`modal-animated--dropdown`

                        <div class="modal modal-animated--dropdown" >
    <!-- your content -->
</div>

`modal-animated--zoom-in`

                        <div class="modal modal-animated--zoom-in" >
    <!-- your content -->
</div>

`modal-animated--zoom-out`

                        <div class="modal modal-animated--zoom-out" >
    <!-- your content -->
</div>

Cirrus

How to use.

What is Lorem Ipsum?

Ipsum

Ipsum II

#Components

#Cards

Card Outline

Basic Design

Animated Card

Grouping Cards

Equal Heights

Before

After

Twitter Card

#Card Headers

# Tiles

# Media

Images

Figures

Videos

Avatars

# Modals

Outline

Sizes

Animations

Accessibility

#Placeholders

The sever is currently taking a nap.

Outline

Don't wait for the latest updates.

#Tabs

Outline

Alternative Sizes

Alignment

Styles

Font Awesome

#Tags

Tag Colors

Tag Sizes

Tag Close

Tag Delete

Grouped Tags

Tag Container

#Toasts

Danger!

#Tooltips

Tooltip Direction

Max-width: 20rem

What is Lorem Ipsum?

Ipsum

Ipsum II

Max-width: 40rem

What is Lorem Ipsum?

Ipsum

Ipsum II

Max-width: 60rem

What is Lorem Ipsum?

Ipsum

Ipsum II

modal-animated--dropdown

modal-animated--zoom-in

modal-animated--zoom-out

Buttons

Font

`modal-animated--dropdown`

`modal-animated--zoom-in`

`modal-animated--zoom-out`