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

import Headline from 'spoko-design-system/src/components/Headline.vue';

Props

interface HeadlineProps {
  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div' | 'span';
  // default: 'span'

  class?: string;
  // default: ''
  // Use any UnoCSS/Tailwind classes including responsive variants
  // Examples: 'text-4xl', 'text-2xl md:text-4xl lg:text-6xl'

  fontFamily?: 'head' | 'text' | 'novamono' | 'mono';
  // default: 'head'

  fontWeight?: 'light' | 'regular' | 'bold' | 'light-bold' | 'light-thin';
  // default: 'regular'

  underline?: boolean | 'center';
  // default: false
  // true: left-aligned underline, 'center': centered underline

  defaultSize?: string;
  // default: 'text-inherit'
  // Used when no class prop is provided

  noFlexLayout?: boolean;
  // default: false
  // Disables the default flex layout behavior

  noMargin?: boolean;
  // default: false
  // Disables default mb-2.5 margin

  noLeading?: boolean;
  // default: false
  // Disables default leading-none line height
}

HTML Attributes Support

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

<Headline
  as="h1"
  class="text-4xl"
  id="main-title"
  data-section="hero"
  aria-label="Main headline"
>
  Accessible Headline
</Headline>

CSS Custom Properties

Customize underline colors using CSS variables:

/* Override underline colors globally */
:root {
  --headline-underline-accent: #0066cc;  /* Main underline color */
  --headline-underline-base: #999999;    /* Thin line color */
}

/* Or scope to specific headlines */
.custom-headline {
  --headline-underline-accent: #ff6600;
  --headline-underline-base: #cccccc;
}

Examples

Basic Usage

Responsive Typography

Font Families & Weights

With Underline

With Icons

Code Examples

Basic Usage

<!-- Simple headline with defaults (inherits font size) -->
<Headline as="h1">Default Headline</Headline>

<!-- With explicit size -->
<Headline as="h1" class="text-xl">Regular Headline</Headline>

<!-- Font family and weight -->
<Headline as="h2" font-weight="light" class="text-lg">Light Headline</Headline>
<Headline as="h3" font-weight="bold" class="text-2xl">Bold Headline</Headline>

Responsive Typography

<!-- Hero headline - small on mobile, large on desktop -->
<Headline as="h1" class="text-2xl md:text-4xl lg:text-6xl">
  Responsive Hero
</Headline>

<!-- Progressive scaling across all breakpoints -->
<Headline as="h2" class="text-base sm:text-lg md:text-xl lg:text-2xl xl:text-3xl">
  Multi-breakpoint Headline
</Headline>

<!-- Extra large screens support -->
<Headline as="h2" font-weight="light-bold" class="text-lg md:text-2xl lg:text-4xl 3xl:text-6xl">
  Scales up to 3xl breakpoint
</Headline>

Font Families

<!-- Heading font (default) -->
<Headline as="h1" font-weight="regular" class="text-xl">
  Regular Headline
</Headline>

<!-- Text font for body content -->
<Headline as="p" font-family="text" font-weight="light" class="text-base">
  Light Text Content
</Headline>

<!-- Monospace fonts -->
<Headline as="code" font-family="novamono" class="text-sm">
  Nova Mono Code
</Headline>

<Headline as="code" font-family="mono" class="text-sm">
  Mono Code
</Headline>

With Underline

<!-- Left-aligned underline -->
<Headline as="h2" class="text-3xl" underline>
  Underlined Headline
</Headline>

<!-- Centered underline with responsive sizing -->
<Headline as="h2" font-weight="bold" class="text-2xl md:text-4xl" underline="center">
  Centered Underline
</Headline>

With Icons

<!-- Icon with responsive sizing -->
<Headline as="h1" font-weight="light-bold" class="text-xl md:text-3xl lg:text-5xl" underline>
  <Icon name="ph:cat-thin" class="inline-block mr-4" />
  Complete Example
</Headline>

<!-- Simple icon headline -->
<Headline as="h3" font-weight="bold" class="text-2xl">
  <Icon name="ph:cat-thin" class="inline-block mr-4" />
  Headline with Icon
</Headline>

Custom Styling

<!-- Combine with any UnoCSS/Tailwind utilities -->
<Headline as="h1" class="text-4xl md:text-6xl text-blue-600 dark:text-blue-400">
  Colored Headline
</Headline>

<!-- Responsive colors and sizes -->
<Headline
  as="h2"
  font-weight="bold"
  class="text-2xl md:text-4xl text-slate-700 md:text-blue-600"
>
  Responsive Color & Size
</Headline>

Advanced Features

Remove Default Spacing

<!-- No bottom margin -->
<Headline as="h1" class="text-4xl" no-margin>
  Headline without margin
</Headline>

<!-- No line height adjustment -->
<Headline as="h2" class="text-2xl" no-leading>
  Headline with normal line height
</Headline>

<!-- Remove both -->
<Headline as="h3" class="text-xl" no-margin no-leading>
  Fully custom spacing
</Headline>

Disable Flex Layout

<!-- By default, headlines without underline use flex layout for icon alignment -->
<!-- Disable it with noFlexLayout -->
<Headline as="h2" class="text-2xl" no-flex-layout>
  Block-level headline
</Headline>

Custom Underline Colors

<!-- In your component or style tag -->
<style>
  .custom-underline-headline {
    --headline-underline-accent: #ff6600;
    --headline-underline-base: #cccccc;
  }
</style>

<Headline
  as="h1"
  class="text-4xl custom-underline-headline"
  underline
>
  Custom colored underline
</Headline>

Accessibility Features

<!-- Add ARIA attributes for screen readers -->
<Headline
  as="h1"
  class="text-4xl"
  id="page-title"
  role="heading"
  aria-level="1"
  aria-label="Welcome to our website"
>
  Welcome
</Headline>

<!-- Add data attributes for tracking or testing -->
<Headline
  as="h2"
  class="text-2xl"
  data-testid="section-heading"
  data-analytics="hero-title"
>
  Section Title
</Headline>