Heading

In progress

Heading element is used for different heading sizes. Heading type can be defined by giving the component heading attribute.

# Examples

Provide heading attribute for the component to choose what type of heading to use.

This uses h2
<hy-heading heading="h2">This uses h2</hy-heading>

# Different variants starting with default

H1 With default section H2 With default section H3 With default section
<hy-docs-container>
  <hy-baseline>
    <hy-heading heading="h1" section="">H1 With default section</hy-heading>
  </hy-baseline>
  <hy-baseline>
    <hy-heading heading="h2" section="">H2 With default section</hy-heading>
  </hy-baseline>
  <hy-baseline>
    <hy-heading heading="h3" section="">H3 With default section</hy-heading>
  </hy-baseline>
</hy-docs-container>

# contentPageHeader

H1 With contentPageHeader section H2 With contentPageHeader section H3 With contentPageHeader section
<hy-docs-container>
  <hy-baseline>
    <hy-heading heading="h1" section="contentPageHeader"
      >H1 With contentPageHeader section</hy-heading
    >
  </hy-baseline>
  <hy-baseline>
    <hy-heading heading="h2" section="contentPageHeader"
      >H2 With contentPageHeader section</hy-heading
    >
  </hy-baseline>
  <hy-baseline>
    <hy-heading heading="h3" section="contentPageHeader"
      >H3 With contentPageHeader section</hy-heading
    >
  </hy-baseline>
</hy-docs-container>

# introduction

H1 With introduction section H2 With introduction section H3 With introduction section
<hy-docs-container>
  <hy-baseline>
    <hy-heading heading="h1" section="introduction"
      >H1 With introduction section</hy-heading
    >
  </hy-baseline>
  <hy-baseline>
    <hy-heading heading="h2" section="introduction"
      >H2 With introduction section</hy-heading
    >
  </hy-baseline>
  <hy-baseline>
    <hy-heading heading="h3" section="introduction"
      >H3 With introduction section</hy-heading
    >
  </hy-baseline>
</hy-docs-container>

# landingPageHeader

H2 With landingPageHeader section H3 With landingPageHeader section
<hy-docs-container>
  <hy-baseline>
    <hy-heading heading="h2" section="landingPageHeader"
      >H2 With landingPageHeader section</hy-heading
    >
  </hy-baseline>
  <hy-baseline>
    <hy-heading heading="h3" section="landingPageHeader"
      >H3 With landingPageHeader section</hy-heading
    >
  </hy-baseline>
</hy-docs-container>

# subSection

H2 With subSection section H3 With subSection section
<hy-docs-container>
  <hy-baseline>
    <hy-heading heading="h2" section="subSection"
      >H2 With subSection section</hy-heading
    >
  </hy-baseline>
  <hy-baseline>
    <hy-heading heading="h3" section="subSection"
      >H3 With subSection section</hy-heading
    >
  </hy-baseline>
</hy-docs-container>

# Heading with section divider

Section divider works with all heading sizes.

H1 With divider H2 With divider H3 With divider This is a Heading 1 This is a Heading 2 This is a Heading 3 This is a Heading 4 This is a Heading 5 This is a Heading 6
<hy-docs-container>
  <hy-baseline>
    <hy-heading heading="h1" section="subsection">H1 With divider</hy-heading>
  </hy-baseline>
  <hy-baseline>
    <hy-heading heading="h2" section="subsection">H2 With divider</hy-heading>
  </hy-baseline>
  <hy-baseline>
    <hy-heading heading="h3" section="subsection">H3 With divider</hy-heading>
  </hy-baseline>
  <hy-baseline>
    <hy-heading heading="h1">This is a Heading 1</hy-heading>
  </hy-baseline>
  <hy-baseline>
    <hy-heading heading="h2">This is a Heading 2</hy-heading>
  </hy-baseline>
  <hy-baseline>
    <hy-heading heading="h3">This is a Heading 3</hy-heading>
  </hy-baseline>
  <hy-baseline>
    <hy-heading heading="h4">This is a Heading 4</hy-heading>
  </hy-baseline>
  <hy-baseline>
    <hy-heading heading="h5">This is a Heading 5</hy-heading>
  </hy-baseline>
  <hy-baseline>
    <hy-heading heading="h6">This is a Heading 6</hy-heading>
  </hy-baseline>
</hy-docs-container>

# Properties

Property Attribute Description Type Default
headerstyle headerstyle string 'common'
heading heading HeadingVarians.default \| HeadingVarians.h2 \| HeadingVarians.h3 \| HeadingVarians.h4 \| HeadingVarians.h5 \| HeadingVarians.h6 HeadingVarians.default as any
hyphenatedText hyphenated-text string undefined
isSearch is-search boolean false
negative negative boolean false
section section HeadingSectionVariants.contentPageHeader \| HeadingSectionVariants.default \| HeadingSectionVariants.introduction \| HeadingSectionVariants.landingPageHeader \| HeadingSectionVariants.subSection HeadingSectionVariants.default as any

# Dependencies

# Used by

# Graph

graph TD;
  hy-footer-info --> hy-heading
  hy-footer-link-item --> hy-heading
  hy-hero --> hy-heading
  hy-introduction --> hy-heading
  hy-large-process-flow --> hy-heading
  hy-shortcuts --> hy-heading
  hy-video --> hy-heading
  style hy-heading fill:#f9f,stroke:#333,stroke-width:4px

Helsinki University Design System

← Hero →