Hero Heading

HeroHeading helps you create headings with eyebrows.

Create headings for your hero elements easily

The HeroHeading structure is built with accessibility in mind — you just have to include eyebrows with Eyebrow if you want them.

<h2 class="HeroHeading">
  <span class="Eyebrow"> Eyebrow </div>
  <span> A Typical Heading </span>
</h2>

Eyebrow A Typical Heading

Create your perfect HeroHeading

Styling HeroHeading is easy. You just have to tweak a couple of CSS properties and all your HeroHeading elements will have a consistent look and feel.

.HeroHeading { /* ... */ }
.Eyebrow { /* ... */ }

Eyebrow A typical heading

Easy alignment to the start, center, and end

Use HeroHeading-* to align the entire hero heading (including the elements within) to the start, center, or end - it’s just that easy!

<h2 class="HeroHeading-start">...</h2>
<h2 class="HeroHeading-center">...</h2>
<h2 class="HeroHeading-end">...</h2>

Start

EyebrowA typical heading

Center

EyebrowA typical heading

End

EyebrowA typical heading

Adjust the width of your Hero Element without breaking a sweat

No need to worry about realigning HeroHeading items when you set a maximum width. We’ve got that covered.

By the way, all items in HeroHeading have a max-width of 100% so you can just set width instead of max-width.

<h2 class="HeroHeading-center w-[20ch]"> ... </h2>

This doesn’t violate any best practice! Just resize the component and you’ll see everything function perfectly.

Resize to see this work!

Pretty nifty eyebrowExpress what you need to say — even a long heading is fine

Basic Usage

HeroHeading contains two elements:

Eyebrow: The text that goes before the main heading.
The heading itself

<h2 class="HeroHeading">
  <span class="Eyebrow">Eyebrow</span>
  <span>A typical heading</span>
</h2>

Note

It’s best to use a heading tag (h1 - h6) with the HeroHeading class and <span> elements within. This keeps the entire heading accessible for screen readers.

Changing default styles

Eyebrow has the following values set by default.

We recommend changing these values in your CSS so you can use Eyebrow in your headings without worrying about consistency. When you do so, feel free to add other properties as you deem fit.

.HeroHeading {
  --gap: 0.25em;
}

.Eyebrow {
  --eyebrow-size: 0.6em;
}

.HeroHeading {
  --gap: 0.5rem;
}

.Eyebrow {
  font-family: 'monospace';
}

Multiple headings

If you have multiple hero headings, you can style them each with a tag or class — or both!

.HeroHeading:where(h2, .h2) { /* ... */ }
.HeroHeading:where(h3, .h3) { /* ... */ }

Start, Center, and End

You can align HeroHeading to the start, center, and end with HeroHeading-*.

When you do this, HeroHeading will reposition itself and its children items to the start, center or end accordingly.

<h2 class="HeroHeading-start"> ... </h2>
<h2 class="HeroHeading-center"> ... </h2>
<h2 class="HeroHeading-end"> ... </h2>

Setting Maximum Width

Each HeroHeading and their children items have their max-width set to 100% by default, so you can simply set width to change the length of your headings.

<h2 class="HeroHeading-start w-[25ch]"> ... </h2>
<h2 class="HeroHeading-center w-[25ch]"> ... </h2>
<h2 class="HeroHeading-end w-[25ch]"> ... </h2>

Please login to view this content

Splendid Labz is free because we love developers and we want to contribute back to the ecosystem.

We only charge for access to the documentation to keep the project going. If you don't wish to pay, feel free to use the content from the features tab, our blogs or our videos as your guide.

Here’s the CSS for HeroHeading.

The astro-island and astro-slot selectors help to alleviate styling frustrations when using Astro.

[class*='HeroHeading'] {
  display: flex;
  flex-direction: column;
  gap: var(--gap, 0.25em);
  max-width: 100%;

  > :where(.Eyebrow) {
    font-size: var(--eyebrow-size, 0.6em);
  }

  > *,
  > *:where(astro-slot, astro-island) > * {
    max-width: 100%;
  }
}

.HeroHeading {
  &-start {
    text-align: start;
  }

  &-center {
    align-self: center;
    margin-inline: auto;
    text-align: center;
  }

  &-end {
    align-self: end;
    margin-inline-start: auto;
    text-align: end;
  }
}

Please login to view this content

Splendid Labz is free because we love developers and we want to contribute back to the ecosystem.

We only charge for access to the documentation to keep the project going. If you don't wish to pay, feel free to use the content from the features tab, our blogs or our videos as your guide.

HeroHeading

Children Elements

Class	Description
`Eyebrow`	Eyebrow of the hero heading

CSS Variable

Variables	Default Value	Description
`--gap`	`0.5rem`	Gap between Eyebrow and Heading text

Eyebrow

CSS Variables

Variables	Default Value	Description
`--eyebrow-size`	`0.6em`	Eyebrow’s font size

Please login to view this content

Splendid Labz is free because we love developers and we want to contribute back to the ecosystem.

We only charge for access to the documentation to keep the project going. If you don't wish to pay, feel free to use the content from the features tab, our blogs or our videos as your guide.

Hero Heading

Create headings for your hero elements easily

Eyebrow A Typical Heading

Create your perfect HeroHeading

Eyebrow A typical heading

Easy alignment to the start, center, and end

EyebrowA typical heading

EyebrowA typical heading

EyebrowA typical heading

Adjust the width of your Hero Element without breaking a sweat

Pretty nifty eyebrowExpress what you need to say — even a long heading is fine

Basic Usage

EyebrowA typical heading

Changing default styles

Eyebrow A typical heading

Multiple headings

Start, Center, and End

EyebrowA typical heading

EyebrowA typical heading

EyebrowA typical heading

Setting Maximum Width

EyebrowExpress what you need to say — even a long heading is fine.

EyebrowExpress what you need to say — even a long heading is fine.

EyebrowExpress what you need to say — even a long heading is fine.

Please login to view this content

Basic Usage

EyebrowA typical heading

Changing default styles

Eyebrow A typical heading

Multiple headings

Start, Center, and End

EyebrowA typical heading

EyebrowA typical heading

EyebrowA typical heading

Setting Maximum Width

EyebrowExpress what you need to say — even a long heading is fine.

EyebrowExpress what you need to say — even a long heading is fine.

EyebrowExpress what you need to say — even a long heading is fine.

Please login to view this content

HeroHeading

Children Elements

CSS Variable

Eyebrow

CSS Variables

Please login to view this content

HeroHeading

Children Elements

CSS Variable

Eyebrow

CSS Variables