Hero

Hero

The hero container shows key featured content or information.

Demonstration

Hero title

This is a hero example

<div class="hero hero-bg text-gray">
  <div class="hero-body">
    <h1>Hero title</h1>
    <p>This is a hero example</p>
  </div>
</div>

Hero prefixed title

This is a hero prefixed example

<!-- Prefixed -->
<div class=".hero hero-gray text-gray">
  <div class="hero-body">
    <h1>Hero prefixed title</h1>
    <p>This is a hero prefixed example</p>
  </div>
</div>

Hero sizes

There are following hero sizes available to use. Each color has its own size from xs to xl and to use it just add color name before the size. For example color primary has its own size in the class .hero-primary-size-xs to .hero-primary-size-xl.

xs sm md lg xl
Available
Size 1rem 2rem 4rem 8rem 10rem
CSS variable --s-hero-size-xs --s-hero-size-sm --s-hero-size-md --s-hero-size-lg --s-hero-size-xl

Use sizes from the hero-size-xs to hero-size-xl to the hero container for the smallest to the largest padding. And hero-size-vh as view height 100%.

Size extra small

Hero extra small

This is a hero example size extra small

<div class="hero hero-size-xs hero-primary">
  <div class="hero-body">
    <h1>Hero extra small</h1>
    <p>This is a hero example size extra small</p>
  </div>
</div>

To use size

Hero extra small

This is a hero example size extra small

<div class="hero hero-size-xs hero-primary">
  <div class="hero-body">
    <h1>Hero extra small</h1>
    <p>This is a hero example size extra small</p>
  </div>
</div>
Hero sizes - Small

Hero small

This is a hero example size small

<div class="hero hero-size-sm hero-primary">
  <div class="hero-body">
    <h1>Hero small</h1>
    <p>This is a hero example size small</p>
  </div>
</div>
Hero sizes - Medium

Hero medium

This is a hero example size medium

<div class="hero hero-size-md hero-primary">
  <div class="hero-body">
    <h1>Hero medium</h1>
    <p>This is a hero example size medium</p>
  </div>
</div>
Hero sizes - Large

Hero large

This is a hero example size large

<div class="hero hero-size-lg hero-primary">
  <div class="hero-body">
    <h1>Hero large</h1>
    <p>This is a hero example size large</p>
  </div>
</div>
Hero sizes - Extra large

Hero extra large

This is a hero example extra large

<div class="hero hero-size-xl hero-primary">
  <div class="hero-body">
    <h1>Hero extra large</h1>
    <p>This is a hero example size extra large</p>
  </div>
</div>

Hero colors

Code Available Dark Light
Dark dark
Light light
Accent accent
Primary primary
Secondary secondary
Gray gray
Bg bg
Border dark
Link link
Disabled disabled
Error error
Info info
Success success
Body bg body-bg
Body font body-font
Code code
Highlight highlight
Dark color

Hero dark color

This is a hero example dark background .hero-dark

<div class="s-hero hero-dark">
  <div class="hero-body">
    <h1>Hero dark color</h1>
    <p>This is a hero example dark background .hero-dark</p>
  </div>
</div>
Light color

Hero light color

This is a hero example light background .hero-light

<div class="s-hero hero-light">
  <div class="hero-body">
    <h1>Hero light color</h1>
    <p>This is a hero example light background .hero-light</p>
  </div>
</div>
Accent color

Hero accent color

This is a hero example accent background .hero-accent

<div class="s-hero hero-accent">
  <div class="hero-body">
    <h1>Hero accent color</h1>
    <p>This is a hero example accent background .hero-accent</p>
  </div>
</div>
Primary colors

Hero primary color

This is a hero example primary background .hero-primary

<div class="s-hero hero-primary">
  <div class="hero-body">
    <h1>Hero primary color</h1>
    <p>This is a hero example primary background .hero-primary</p>
  </div>
</div>

Hero primary color dark

This is a hero example primary dark background .hero-primary-dark

<div class="s-hero hero-primary-dark">
  <div class="hero-body">
    <h1>Hero primary color dark</h1>
    <p>This is a hero example primary dark background .hero-primary-dark</p>
  </div>
</div>

Hero primary color light

This is a hero example primary light background .hero-primary-light

<div class="s-hero hero-primary-light">
  <div class="hero-body">
    <h1>Hero primary color light</h1>
    <p>This is a hero example primary light background .hero-primary-light</p>
  </div>
</div>
Secondary colors

Hero secondary color

This is a hero example secondary background .hero-secondary

<div class="s-hero hero-secondary">
  <div class="hero-body">
    <h1>Hero secondary color</h1>
    <p>This is a hero example secondary background .hero-secondary</p>
  </div>
</div>

Hero secondary color dark

This is a hero example secondary dark background .hero-secondary-dark

<div class="s-hero hero-secondary-dark">
  <div class="hero-body">
    <h1>Hero secondary color dark</h1>
    <p>This is a hero example secondary dark background .hero-secondary-dark</p>
  </div>
</div>

Hero secondary color light

This is a hero example secondary light background .hero-secondary-light

<div class="s-hero hero-primary-light">
  <div class="hero-body">
    <h1>Hero secondary color light</h1>
    <p>This is a hero example secondary light background .hero-secondary-light</p>
  </div>
</div>
Gray colors

Hero gray color

This is a hero example gray background .hero-gray

<div class="s-hero hero-gray">
  <div class="hero-body">
    <h1>Hero gray color</h1>
    <p>This is a hero example gray background .hero-gray</p>
  </div>
</div>

Hero gray color dark

This is a hero example gray dark background .hero-gray-dark

<div class="s-hero hero-gray-dark">
  <div class="hero-body">
    <h1>Hero gray dark color</h1>
    <p>This is a hero example gray dark background .hero-gray-dark</p>
  </div>
</div>

Hero gray color light

This is a hero example gray light background .hero-gray-light

<div class="s-hero hero-gray-light">
  <div class="hero-body">
    <h1>Hero gray light color</h1>
    <p>This is a hero example gray light background .hero-gray-light</p>
  </div>
</div>
Bg colors

Hero bg color

This is a hero example bg background .hero-bg

<div class="s-hero hero-bg">
  <div class="hero-body">
    <h1>Hero bg color</h1>
    <p>This is a hero example bg background .hero-bg</p>
  </div>
</div>

Hero bg color dark

This is a hero example bg background .hero-bg-dark

<div class="s-hero hero-bg-dark">
  <div class="hero-body">
    <h1>Hero bg color dark</h1>
    <p>This is a hero example bg dark background .hero-bg-dark</p>
  </div>
</div>

Hero bg color light

This is a hero example bg background .hero-bg-light

<div class="s-hero hero-light">
  <div class="hero-body">
    <h1>Hero bg color light</h1>
    <p>This is a hero example bg light background .hero-bg-light</p>
  </div>
</div>
Border colors

Hero border color

This is a hero example border background .hero-border

<div class="s-hero hero-border">
  <div class="hero-body">
    <h1>Hero border color</h1>
    <p>This is a hero example border background .hero-border</p>
  </div>
</div>

Hero border color dark

This is a hero example border background .hero-border-dark

<div class="s-hero hero-border-dark">
  <div class="hero-body">
    <h1>Hero border color dark</h1>
    <p>This is a hero example border dark background .hero-border-dark</p>
  </div>
</div>

Hero border color light

This is a hero example border background .hero-border-light

<div class="s-hero hero-border-light">
  <div class="hero-body">
    <h1>Hero border color light</h1>
    <p>This is a hero example border light background .hero-border-light</p>
  </div>
</div>

Hero link color

This is a hero example link background .hero-link

<div class="s-hero hero-link">
  <div class="hero-body">
    <h1>Hero link color</h1>
    <p>This is a hero example link background .hero-link</p>
  </div>
</div>

Hero link color dark

This is a hero example link background .hero-link-dark

<div class="s-hero link-hero-dark">
  <div class="hero-body">
    <h1>Hero link color dark</h1>
    <p>This is a hero example link dark background .hero-link-dark</p>
  </div>
</div>

Hero link color light

This is a hero example link background .hero-link-light

<div class="s-hero hero-link-light">
  <div class="hero-body">
    <h1>Hero link color light</h1>
    <p>This is a hero example link light background .hero-link-light</p>
  </div>
</div>
Control colors

Hero disabled color

This is a hero example disabled background .hero-disabled

<div class="s-hero hero-disabled"> 
  <div class="hero-body">
    <h1>Hero disabled color</h1>
    <p>This is a hero example disabled background .hero-disabled</p>
  </div>
</div>

Hero error color

This is a hero example error background .hero-error

<div class="s-hero hero-error">
  <div class="hero-body">
    <h1>Hero error color</h1>
    <p>This is a hero example error background .hero-error</p>
  </div>
</div>

Hero info color

This is a hero example info background .hero-info

<div class="s-hero hero-info">
  <div class="hero-body">
    <h1>Hero info color</h1>
    <p>This is a hero example info background .hero-info</p>
  </div>
</div>

Hero success color

This is a hero example success background .hero-success

<div class="s-hero hero-success">
  <div class="hero-body">
    <h1>Hero success color</h1>
    <p>This is a hero example success background .hero-success</p>
  </div>
</div>

Hero warning color

This is a hero example warning background .hero-warning

<div class="s-hero hero-warning">
  <div class="hero-body">
    <h1>Hero warning color</h1>
    <p>This is a hero example warning background .hero-warning</p>
  </div>
</div>
Body colors

Hero body-bg color

This is a hero example body-bg background .hero-body-bg

<div class="s-hero hero-body-bg">
  <div class="hero-body">
    <h1>Hero body-bg color</h1>
    <p>This is a hero example body-bg background .hero-body-bg</p>
  </div>
</div>

Hero highlight color

This is a hero example highlight background .hero-body-font

<div class="s-hero hero-body-font">
  <div class="hero-body">
    <h1>Hero body-font color</h1>
    <p>This is a hero example body-font background .hero-body-font</p>
  </div>
</div>
Other colors

Hero code color

This is a hero example code background .hero-code

<div class="s-hero hero-code">
  <div class="hero-body">
    <h1>Hero code color</h1>
    <p>This is a hero example code background .hero-code</p>
  </div>
</div>

Hero highlight color

This is a hero example highlight background .hero-highlight

<div class="s-hero hero-highlight">
  <div class="hero-body">
    <h1>Hero highlight color</h1>
    <p>This is a hero example highlight background .hero-highlight</p>
  </div>
</div>