Cirrus

#Hero

A hero is a layout used for creating splash screens. This is most commonly seen in the home page of websites.

#Structure

The structure of a hero is actually quite simple. It leaves a lot of flexibility for whatever content you want to add in the middle of it.

Structure
  • hero - main container of the layout.
    • hero-body - body that holds your content.

hero (padding shown for clarity)

hero-body

#Basic

Below is a simple example of a hero with some text.

I am the title.

And I am the subtitle.
<div class="hero bg-indigo-600">
    <div class="hero-body">
        <div class="content">
            <h2 class="title text-white">I am the title.</h2>
            <h5 class="subtitle text-gray-300">And I am the subtitle.</h5></div>
    </div>
</div>

#Fullscreen

Apply the fullscreen class on the hero to make it stretch the full length and width of the screen. It does not do that here since it is embedded inside the docs page, so it will just fill its container.

Look!

I am tall!

<div class="hero fullscreen bg-yellow-200">
    <div class="hero-body">
        <div class="mx-auto">
            <h1 class="title uppercase">Look!</h1>
            <h3 class="subtitle text-gray-600">I am tall!</h3></div>
    </div>
</div>

#Parallax

Of course, you can always stick an image into the hero with the hero-img class and add parallax with the parallax-img class.

Logo

Easily create beautiful splash screens

Only 6 lines needed and no additional CSS

<div id="splash-img" class="hero fullscreen hero-img parallax-img">
    <div class="hero-body">
        <div class="content u-text-center">
            <h1 class="uppercase text-white title">Easily create beautiful splash screens</h1>
            <h3 class="uppercase text-white sub-title u-opacity-70">Only 6 lines needed and no additional CSS</h3></div>
    </div>
</div>