Hero

A hero is an element suitable for a landing page that represents the first visual encounter with a site.

A hero by default dynamically takes up the entire screen, but can be adjusted by using one of the semantic size designations. For a hero component, they refer to size on the block axis (which is equivalent to height in Western orientations). These designations can also be used in the min- and max- variations. The setting size-auto can be used to turn off expansion altogether, which may be useful when setting the minimum size. The semantic size designations are listed below along with typical percentages of the full viewport height.

(min-/max-)size-marginal
11%
(min-/max-)size-subordinate
22%
(min-/max-)size-significant
33%
(min-/max-)size-partial
50%
(min-/max-)size-substantial
66%
(min-/max-)size-full
100%

Structure

Examples

Here is a general hero using a marquee layout.

Guise™ Skeleton

Hero Demo

<div class="hero layout-marquee" style="background-color:lightblue">
  <h1 class="title">Guise™ Skeleton</h1>
  <p class="subtitle">Hero Demo</p>
</div>

Properties

--guise-skeleton-hero-font-size
The font size of the hero. Defaults to a dynamic value relative to the current size of the hero.
--guise-skeleton-hero-padding-top
--guise-skeleton-hero-padding-right
--guise-skeleton-hero-padding-bottom
--guise-skeleton-hero-padding-left