Start typing to search components and docs…
↵ select ↑ ↓ navigate ESC close

Headline

Headline - universal HTML tag (nice for SEO).

Headings give both your visitors and search engines important clues about the content’s hierarchy and relevancy.

It’s good to use only H1-H6 for important headings, but sometimes I want more things to be unified. That’s why I created this universal component.

Thanks to this, I can make a header that always looks the same, regardless of whether it is an H1 or a DIV or P.

Import

<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-language="js"><code><span class="line"><span style="color:#F97583">import</span><span style="color:#E1E4E8"> Headline </span><span style="color:#F97583">from</span><span style="color:#9ECBFF"> 'spoko-design-system/src/components/Headline.vue'</span><span style="color:#E1E4E8">;</span></span></code></pre>

Props

PropTypeDefaultDescription
as'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div' | 'span''span'HTML element rendered as the headline container.
classstring''UnoCSS/Tailwind classes, including responsive variants (e.g. `text-2xl md:text-4xl`).
fontFamily'head' | 'text' | 'novamono' | 'mono''head'Font family applied to the headline.
fontWeight'light' | 'regular' | 'bold' | 'light-bold' | 'light-thin''regular'Font weight variant.
underlineboolean | 'center'false`true` = left-aligned underline; `center` = centered underline.
defaultSizestring'text-inherit'Fallback font-size class when no `class` prop is provided.
noFlexLayoutbooleanfalseDisables the default flex layout (used for icon alignment).
noMarginbooleanfalseDisables default `mb-2.5` bottom margin.
noLeadingbooleanfalseDisables default `leading-none` line height.

HTML Attributes Support

The component supports all standard HTML attributes via v-bind="$attrs":

<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-language="vue"><code><span class="line"><span style="color:#E1E4E8">&#x3C;</span><span style="color:#85E89D">Headline</span></span> <span class="line"><span style="color:#B392F0"> as</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"h1"</span></span> <span class="line"><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"text-4xl"</span></span> <span class="line"><span style="color:#B392F0"> id</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"main-title"</span></span> <span class="line"><span style="color:#B392F0"> data-section</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"hero"</span></span> <span class="line"><span style="color:#B392F0"> aria-label</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"Main headline"</span></span> <span class="line"><span style="color:#E1E4E8">></span></span> <span class="line"><span style="color:#E1E4E8"> Accessible Headline</span></span> <span class="line"><span style="color:#E1E4E8">&#x3C;/</span><span style="color:#85E89D">Headline</span><span style="color:#E1E4E8">></span></span></code></pre>

CSS Custom Properties

Customize underline colors using CSS variables:

<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-language="css"><code><span class="line"><span style="color:#6A737D">/* Override underline colors globally */</span></span> <span class="line"><span style="color:#B392F0">:root</span><span style="color:#E1E4E8"> {</span></span> <span class="line"><span style="color:#FFAB70"> --headline-underline-accent</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">#0066cc</span><span style="color:#E1E4E8">; </span><span style="color:#6A737D">/* Main underline color */</span></span> <span class="line"><span style="color:#FFAB70"> --headline-underline-base</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">#999999</span><span style="color:#E1E4E8">; </span><span style="color:#6A737D">/* Thin line color */</span></span> <span class="line"><span style="color:#E1E4E8">}</span></span> <span class="line"></span> <span class="line"><span style="color:#6A737D">/* Or scope to specific headlines */</span></span> <span class="line"><span style="color:#B392F0">.custom-headline</span><span style="color:#E1E4E8"> {</span></span> <span class="line"><span style="color:#FFAB70"> --headline-underline-accent</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">#ff6600</span><span style="color:#E1E4E8">;</span></span> <span class="line"><span style="color:#FFAB70"> --headline-underline-base</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">#cccccc</span><span style="color:#E1E4E8">;</span></span> <span class="line"><span style="color:#E1E4E8">}</span></span></code></pre>

Examples

Basic Usage

  • Regular Headline

  • Light Headline

  • Bold Headline

  • Light Bold Headline

  • Light Thin Headline

  • Default Text (inherits size)

Responsive Typography

  • Responsive Hero

  • Bold Responsive

  • Multi-breakpoint

  • Extra large screens

Font Families & Weights

  • Light Text

  • Bold Text

  • Nova Mono Code
  • Mono Code

With Underline

  • Underlined Headline

  • Centered Underline

With Icons

  • Headline with Icon

  • Responsive with Icon & Underline

Code Examples

Basic Usage

<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-language="vue"><code><span class="line"><span style="color:#6A737D">&#x3C;!-- Simple headline with defaults (inherits font size) --></span></span> <span class="line"><span style="color:#E1E4E8">&#x3C;</span><span style="color:#85E89D">Headline</span><span style="color:#B392F0"> as</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"h1"</span><span style="color:#E1E4E8">>Default Headline&#x3C;/</span><span style="color:#85E89D">Headline</span><span style="color:#E1E4E8">></span></span> <span class="line"></span> <span class="line"><span style="color:#6A737D">&#x3C;!-- With explicit size --></span></span> <span class="line"><span style="color:#E1E4E8">&#x3C;</span><span style="color:#85E89D">Headline</span><span style="color:#B392F0"> as</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"h1"</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"text-xl"</span><span style="color:#E1E4E8">>Regular Headline&#x3C;/</span><span style="color:#85E89D">Headline</span><span style="color:#E1E4E8">></span></span> <span class="line"></span> <span class="line"><span style="color:#6A737D">&#x3C;!-- Font family and weight --></span></span> <span class="line"><span style="color:#E1E4E8">&#x3C;</span><span style="color:#85E89D">Headline</span><span style="color:#B392F0"> as</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"h2"</span><span style="color:#B392F0"> font-weight</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"light"</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"text-lg"</span><span style="color:#E1E4E8">>Light Headline&#x3C;/</span><span style="color:#85E89D">Headline</span><span style="color:#E1E4E8">></span></span> <span class="line"><span style="color:#E1E4E8">&#x3C;</span><span style="color:#85E89D">Headline</span><span style="color:#B392F0"> as</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"h3"</span><span style="color:#B392F0"> font-weight</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"bold"</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"text-2xl"</span><span style="color:#E1E4E8">>Bold Headline&#x3C;/</span><span style="color:#85E89D">Headline</span><span style="color:#E1E4E8">></span></span></code></pre>

Responsive Typography

<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-language="vue"><code><span class="line"><span style="color:#6A737D">&#x3C;!-- Hero headline - small on mobile, large on desktop --></span></span> <span class="line"><span style="color:#E1E4E8">&#x3C;</span><span style="color:#85E89D">Headline</span><span style="color:#B392F0"> as</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"h1"</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"text-2xl md:text-4xl lg:text-6xl"</span><span style="color:#E1E4E8">></span></span> <span class="line"><span style="color:#E1E4E8"> Responsive Hero</span></span> <span class="line"><span style="color:#E1E4E8">&#x3C;/</span><span style="color:#85E89D">Headline</span><span style="color:#E1E4E8">></span></span> <span class="line"></span> <span class="line"><span style="color:#6A737D">&#x3C;!-- Progressive scaling across all breakpoints --></span></span> <span class="line"><span style="color:#E1E4E8">&#x3C;</span><span style="color:#85E89D">Headline</span><span style="color:#B392F0"> as</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"h2"</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"text-base sm:text-lg md:text-xl lg:text-2xl xl:text-3xl"</span><span style="color:#E1E4E8">></span></span> <span class="line"><span style="color:#E1E4E8"> Multi-breakpoint Headline</span></span> <span class="line"><span style="color:#E1E4E8">&#x3C;/</span><span style="color:#85E89D">Headline</span><span style="color:#E1E4E8">></span></span> <span class="line"></span> <span class="line"><span style="color:#6A737D">&#x3C;!-- Extra large screens support --></span></span> <span class="line"><span style="color:#E1E4E8">&#x3C;</span><span style="color:#85E89D">Headline</span><span style="color:#B392F0"> as</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"h2"</span><span style="color:#B392F0"> font-weight</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"light-bold"</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"text-lg md:text-2xl lg:text-4xl 3xl:text-6xl"</span><span style="color:#E1E4E8">></span></span> <span class="line"><span style="color:#E1E4E8"> Scales up to 3xl breakpoint</span></span> <span class="line"><span style="color:#E1E4E8">&#x3C;/</span><span style="color:#85E89D">Headline</span><span style="color:#E1E4E8">></span></span></code></pre>

Font Families

<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-language="vue"><code><span class="line"><span style="color:#6A737D">&#x3C;!-- Heading font (default) --></span></span> <span class="line"><span style="color:#E1E4E8">&#x3C;</span><span style="color:#85E89D">Headline</span><span style="color:#B392F0"> as</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"h1"</span><span style="color:#B392F0"> font-weight</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"regular"</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"text-xl"</span><span style="color:#E1E4E8">></span></span> <span class="line"><span style="color:#E1E4E8"> Regular Headline</span></span> <span class="line"><span style="color:#E1E4E8">&#x3C;/</span><span style="color:#85E89D">Headline</span><span style="color:#E1E4E8">></span></span> <span class="line"></span> <span class="line"><span style="color:#6A737D">&#x3C;!-- Text font for body content --></span></span> <span class="line"><span style="color:#E1E4E8">&#x3C;</span><span style="color:#85E89D">Headline</span><span style="color:#B392F0"> as</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"p"</span><span style="color:#B392F0"> font-family</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"text"</span><span style="color:#B392F0"> font-weight</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"light"</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"text-base"</span><span style="color:#E1E4E8">></span></span> <span class="line"><span style="color:#E1E4E8"> Light Text Content</span></span> <span class="line"><span style="color:#E1E4E8">&#x3C;/</span><span style="color:#85E89D">Headline</span><span style="color:#E1E4E8">></span></span> <span class="line"></span> <span class="line"><span style="color:#6A737D">&#x3C;!-- Monospace fonts --></span></span> <span class="line"><span style="color:#E1E4E8">&#x3C;</span><span style="color:#85E89D">Headline</span><span style="color:#B392F0"> as</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"code"</span><span style="color:#B392F0"> font-family</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"novamono"</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"text-sm"</span><span style="color:#E1E4E8">></span></span> <span class="line"><span style="color:#E1E4E8"> Nova Mono Code</span></span> <span class="line"><span style="color:#E1E4E8">&#x3C;/</span><span style="color:#85E89D">Headline</span><span style="color:#E1E4E8">></span></span> <span class="line"></span> <span class="line"><span style="color:#E1E4E8">&#x3C;</span><span style="color:#85E89D">Headline</span><span style="color:#B392F0"> as</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"code"</span><span style="color:#B392F0"> font-family</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"mono"</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"text-sm"</span><span style="color:#E1E4E8">></span></span> <span class="line"><span style="color:#E1E4E8"> Mono Code</span></span> <span class="line"><span style="color:#E1E4E8">&#x3C;/</span><span style="color:#85E89D">Headline</span><span style="color:#E1E4E8">></span></span></code></pre>

With Underline

<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-language="vue"><code><span class="line"><span style="color:#6A737D">&#x3C;!-- Left-aligned underline --></span></span> <span class="line"><span style="color:#E1E4E8">&#x3C;</span><span style="color:#85E89D">Headline</span><span style="color:#B392F0"> as</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"h2"</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"text-3xl"</span><span style="color:#B392F0"> underline</span><span style="color:#E1E4E8">></span></span> <span class="line"><span style="color:#E1E4E8"> Underlined Headline</span></span> <span class="line"><span style="color:#E1E4E8">&#x3C;/</span><span style="color:#85E89D">Headline</span><span style="color:#E1E4E8">></span></span> <span class="line"></span> <span class="line"><span style="color:#6A737D">&#x3C;!-- Centered underline with responsive sizing --></span></span> <span class="line"><span style="color:#E1E4E8">&#x3C;</span><span style="color:#85E89D">Headline</span><span style="color:#B392F0"> as</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"h2"</span><span style="color:#B392F0"> font-weight</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"bold"</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"text-2xl md:text-4xl"</span><span style="color:#B392F0"> underline</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"center"</span><span style="color:#E1E4E8">></span></span> <span class="line"><span style="color:#E1E4E8"> Centered Underline</span></span> <span class="line"><span style="color:#E1E4E8">&#x3C;/</span><span style="color:#85E89D">Headline</span><span style="color:#E1E4E8">></span></span></code></pre>

With Icons

<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-language="vue"><code><span class="line"><span style="color:#6A737D">&#x3C;!-- Icon with responsive sizing --></span></span> <span class="line"><span style="color:#E1E4E8">&#x3C;</span><span style="color:#85E89D">Headline</span><span style="color:#B392F0"> as</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"h1"</span><span style="color:#B392F0"> font-weight</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"light-bold"</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"text-xl md:text-3xl lg:text-5xl"</span><span style="color:#B392F0"> underline</span><span style="color:#E1E4E8">></span></span> <span class="line"><span style="color:#E1E4E8"> &#x3C;Icon name="ph:cat-thin" class="inline-block mr-4" /></span></span> <span class="line"><span style="color:#E1E4E8"> Complete Example</span></span> <span class="line"><span style="color:#E1E4E8">&#x3C;/</span><span style="color:#85E89D">Headline</span><span style="color:#E1E4E8">></span></span> <span class="line"></span> <span class="line"><span style="color:#6A737D">&#x3C;!-- Simple icon headline --></span></span> <span class="line"><span style="color:#E1E4E8">&#x3C;</span><span style="color:#85E89D">Headline</span><span style="color:#B392F0"> as</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"h3"</span><span style="color:#B392F0"> font-weight</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"bold"</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"text-2xl"</span><span style="color:#E1E4E8">></span></span> <span class="line"><span style="color:#E1E4E8"> &#x3C;Icon name="ph:cat-thin" class="inline-block mr-4" /></span></span> <span class="line"><span style="color:#E1E4E8"> Headline with Icon</span></span> <span class="line"><span style="color:#E1E4E8">&#x3C;/</span><span style="color:#85E89D">Headline</span><span style="color:#E1E4E8">></span></span></code></pre>

Custom Styling

<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-language="vue"><code><span class="line"><span style="color:#6A737D">&#x3C;!-- Combine with any UnoCSS/Tailwind utilities --></span></span> <span class="line"><span style="color:#E1E4E8">&#x3C;</span><span style="color:#85E89D">Headline</span><span style="color:#B392F0"> as</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"h1"</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"text-4xl md:text-6xl text-blue-600 dark:text-blue-400"</span><span style="color:#E1E4E8">></span></span> <span class="line"><span style="color:#E1E4E8"> Colored Headline</span></span> <span class="line"><span style="color:#E1E4E8">&#x3C;/</span><span style="color:#85E89D">Headline</span><span style="color:#E1E4E8">></span></span> <span class="line"></span> <span class="line"><span style="color:#6A737D">&#x3C;!-- Responsive colors and sizes --></span></span> <span class="line"><span style="color:#E1E4E8">&#x3C;</span><span style="color:#85E89D">Headline</span></span> <span class="line"><span style="color:#B392F0"> as</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"h2"</span></span> <span class="line"><span style="color:#B392F0"> font-weight</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"bold"</span></span> <span class="line"><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"text-2xl md:text-4xl text-slate-700 md:text-blue-600"</span></span> <span class="line"><span style="color:#E1E4E8">></span></span> <span class="line"><span style="color:#E1E4E8"> Responsive Color &#x26; Size</span></span> <span class="line"><span style="color:#E1E4E8">&#x3C;/</span><span style="color:#85E89D">Headline</span><span style="color:#E1E4E8">></span></span></code></pre>

Advanced Features

Remove Default Spacing

<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-language="vue"><code><span class="line"><span style="color:#6A737D">&#x3C;!-- No bottom margin --></span></span> <span class="line"><span style="color:#E1E4E8">&#x3C;</span><span style="color:#85E89D">Headline</span><span style="color:#B392F0"> as</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"h1"</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"text-4xl"</span><span style="color:#B392F0"> no-margin</span><span style="color:#E1E4E8">></span></span> <span class="line"><span style="color:#E1E4E8"> Headline without margin</span></span> <span class="line"><span style="color:#E1E4E8">&#x3C;/</span><span style="color:#85E89D">Headline</span><span style="color:#E1E4E8">></span></span> <span class="line"></span> <span class="line"><span style="color:#6A737D">&#x3C;!-- No line height adjustment --></span></span> <span class="line"><span style="color:#E1E4E8">&#x3C;</span><span style="color:#85E89D">Headline</span><span style="color:#B392F0"> as</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"h2"</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"text-2xl"</span><span style="color:#B392F0"> no-leading</span><span style="color:#E1E4E8">></span></span> <span class="line"><span style="color:#E1E4E8"> Headline with normal line height</span></span> <span class="line"><span style="color:#E1E4E8">&#x3C;/</span><span style="color:#85E89D">Headline</span><span style="color:#E1E4E8">></span></span> <span class="line"></span> <span class="line"><span style="color:#6A737D">&#x3C;!-- Remove both --></span></span> <span class="line"><span style="color:#E1E4E8">&#x3C;</span><span style="color:#85E89D">Headline</span><span style="color:#B392F0"> as</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"h3"</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"text-xl"</span><span style="color:#B392F0"> no-margin</span><span style="color:#B392F0"> no-leading</span><span style="color:#E1E4E8">></span></span> <span class="line"><span style="color:#E1E4E8"> Fully custom spacing</span></span> <span class="line"><span style="color:#E1E4E8">&#x3C;/</span><span style="color:#85E89D">Headline</span><span style="color:#E1E4E8">></span></span></code></pre>

Disable Flex Layout

<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-language="vue"><code><span class="line"><span style="color:#6A737D">&#x3C;!-- By default, headlines without underline use flex layout for icon alignment --></span></span> <span class="line"><span style="color:#6A737D">&#x3C;!-- Disable it with noFlexLayout --></span></span> <span class="line"><span style="color:#E1E4E8">&#x3C;</span><span style="color:#85E89D">Headline</span><span style="color:#B392F0"> as</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"h2"</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"text-2xl"</span><span style="color:#B392F0"> no-flex-layout</span><span style="color:#E1E4E8">></span></span> <span class="line"><span style="color:#E1E4E8"> Block-level headline</span></span> <span class="line"><span style="color:#E1E4E8">&#x3C;/</span><span style="color:#85E89D">Headline</span><span style="color:#E1E4E8">></span></span></code></pre>

Custom Underline Colors

<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-language="vue"><code><span class="line"><span style="color:#6A737D">&#x3C;!-- In your component or style tag --></span></span> <span class="line"><span style="color:#E1E4E8">&#x3C;</span><span style="color:#85E89D">style</span><span style="color:#E1E4E8">></span></span> <span class="line"><span style="color:#B392F0"> .custom-underline-headline</span><span style="color:#E1E4E8"> {</span></span> <span class="line"><span style="color:#FFAB70"> --headline-underline-accent</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">#ff6600</span><span style="color:#E1E4E8">;</span></span> <span class="line"><span style="color:#FFAB70"> --headline-underline-base</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">#cccccc</span><span style="color:#E1E4E8">;</span></span> <span class="line"><span style="color:#E1E4E8"> }</span></span> <span class="line"><span style="color:#E1E4E8">&#x3C;/</span><span style="color:#85E89D">style</span><span style="color:#E1E4E8">></span></span> <span class="line"></span> <span class="line"><span style="color:#E1E4E8">&#x3C;</span><span style="color:#85E89D">Headline</span></span> <span class="line"><span style="color:#B392F0"> as</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"h1"</span></span> <span class="line"><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"text-4xl custom-underline-headline"</span></span> <span class="line"><span style="color:#B392F0"> underline</span></span> <span class="line"><span style="color:#E1E4E8">></span></span> <span class="line"><span style="color:#E1E4E8"> Custom colored underline</span></span> <span class="line"><span style="color:#E1E4E8">&#x3C;/</span><span style="color:#85E89D">Headline</span><span style="color:#E1E4E8">></span></span></code></pre>

Accessibility Features

<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-language="vue"><code><span class="line"><span style="color:#6A737D">&#x3C;!-- Add ARIA attributes for screen readers --></span></span> <span class="line"><span style="color:#E1E4E8">&#x3C;</span><span style="color:#85E89D">Headline</span></span> <span class="line"><span style="color:#B392F0"> as</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"h1"</span></span> <span class="line"><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"text-4xl"</span></span> <span class="line"><span style="color:#B392F0"> id</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"page-title"</span></span> <span class="line"><span style="color:#B392F0"> role</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"heading"</span></span> <span class="line"><span style="color:#B392F0"> aria-level</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"1"</span></span> <span class="line"><span style="color:#B392F0"> aria-label</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"Welcome to our website"</span></span> <span class="line"><span style="color:#E1E4E8">></span></span> <span class="line"><span style="color:#E1E4E8"> Welcome</span></span> <span class="line"><span style="color:#E1E4E8">&#x3C;/</span><span style="color:#85E89D">Headline</span><span style="color:#E1E4E8">></span></span> <span class="line"></span> <span class="line"><span style="color:#6A737D">&#x3C;!-- Add data attributes for tracking or testing --></span></span> <span class="line"><span style="color:#E1E4E8">&#x3C;</span><span style="color:#85E89D">Headline</span></span> <span class="line"><span style="color:#B392F0"> as</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"h2"</span></span> <span class="line"><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"text-2xl"</span></span> <span class="line"><span style="color:#B392F0"> data-testid</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"section-heading"</span></span> <span class="line"><span style="color:#B392F0"> data-analytics</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"hero-title"</span></span> <span class="line"><span style="color:#E1E4E8">></span></span> <span class="line"><span style="color:#E1E4E8"> Section Title</span></span> <span class="line"><span style="color:#E1E4E8">&#x3C;/</span><span style="color:#85E89D">Headline</span><span style="color:#E1E4E8">></span></span></code></pre>