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';

Settings

supported parameters

as: {
        type: String as PropType<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div' | 'span'>,
        default: 'span',  
        required: true,
},
textSize: {
        type: String as PropType<'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl'>,
        required: false,
        default: null
}

Examples

  • Regular Headline

  • Light Headline

  • Light Headline

  • Bold Headline

  • Light Bold Headline

  • Light Thin Headline

  • Light Text Content

  • Bold Text Content

  • Light Bold Text Content

  • Light Thin Text Content

  • Nova Mono Code Text
  • Mono Code Text

  • Large Bold Headline

  • Underlined Light Thin Headline

  • Headline with Icon

  • Default Headline

  • Complete Example

/* 1 */
<Headline as="h1" font-family="head" font-weight="regular">Regular Headline</Headline>

/* 2 */
<Headline as="h2" font-family="head" font-weight="light">Light Headline</Headline>

/* 3 */
<Headline as="h3" font-family="head" font-weight="bold">Bold Headline</Headline>

/* 4 */
<Headline as="h4" font-family="head" font-weight="light-bold">Light Bold Headline</Headline>

/* 5 */
<Headline as="h5" font-family="head" font-weight="light-thin">Light Thin Headline</Headline>

/* 6 */
<Headline as="p" font-family="text" font-weight="light">Light Text Content</Headline>

/* 7 */
<Headline as="p" font-family="text" font-weight="regular">Regular Text Content</Headline>

/* 8 */
<Headline as="p" font-family="text" font-weight="bold">Bold Text Content</Headline>

/* 9 */
<Headline as="p" font-family="text" font-weight="light-bold">Light Bold Text Content</Headline>

/* 10 */
<Headline as="p" font-family="text" font-weight="light-thin">Light Thin Text Content</Headline>

/* 11 */
<Headline as="code" font-family="novamono">Nova Mono Code Text</Headline>

/* 12 */
<Headline as="code" font-family="mono">Mono Code Text</Headline>

/* 13 */
<Headline as="h1" font-family="head" font-weight="bold" text-size="4xl">Large Bold Headline</Headline>

/* 14 */
<Headline as="h2" font-family="head" font-weight="light-thin" text-size="3xl" underline>Underlined Light Thin Headline</Headline>

/* 15 */
<Headline as="h3" font-family="head" font-weight="bold" text-size="2xl">
  <Icon name="ph:cat-thin" class="inline-block mr-4 text-blue-wrc" />
  Headline with Icon
</Headline>

/* 16 */
<Headline as="h1">Default Headline</Headline>

/* 17 */
<Headline as="h1" font-family="head" font-weight="light-bold" text-size="4xl" underline>
  <Icon name="ph:cat-thin" class="inline-block mr-4 text-blue-wrc" />
  Complete Example
</Headline>