---
name: Section headline
route: /components/common/section-headline
edit: false
---

import { Playground, Props } from 'docz'
import SectionHeadline from './section-headline'

# SectionHeadline
**SUBCATEGORY:** Landmarks

<hr />

## Section headline
### Description
For titling sections.

<Playground>
  <SectionHeadline
    headline='Section headline'
  />
</Playground>

<hr />

## Section headline with link
### Description
For titling and linking sections.

<Playground>
  <SectionHeadline
    headline='Section headline'
    href='/'
  />
</Playground>

<hr />

## Section headline (heavy)
### Description
For titling sections with hierarchical importance.

<Playground>
  <SectionHeadline
    headline='Section headline'
    heavy
  />
</Playground>

<hr />

## Section headline with link (heavy)
### Description
For titling and linking sections with hierarchical importance.

<Playground>
  <SectionHeadline
    headline='Section headline'
    heavy
    href='/'
  />
</Playground>

<hr />

## Section headline + rule (emphasised)
### Description
A graphic device for titling sections.

<Playground>
  <SectionHeadline
    headline='Section headline'
    rule='emphasised'
  />
</Playground>

<hr />

## Section headline with link + rule (emphasised)
### Description
A graphic device for titling and linking sections.

<Playground>
  <SectionHeadline
    headline='Section headline'
    rule='emphasised'
    href='/'
  />
</Playground>

<hr />

## Section headline + rule (heavy)
### Description
A graphic device for titling sections with hierarchical importance.

<Playground>
  <SectionHeadline
    headline='Section headline'
    heavy
    rule='heavy'
  />
</Playground>

<hr />

## Section headline with link + rule (heavy)
### Description
A graphic device for titling and linking sections with hierarchical importance.

<Playground>
  <SectionHeadline
    headline='Section headline'
    heavy
    rule='heavy'
    href='/'
  />
</Playground>

<hr />

## Section headline and subheadline + rule (emphasised)
### Description
A graphic device for titling sections. Include a subheadline for additional contextual information.

<Playground>
  <SectionHeadline
    headline='Section headline'
    subheadline='Section subheadline'
    rule='emphasised'
  />
</Playground>

<hr />

## Section headline and subheadline with link + rule (emphasised)
### Description
A graphic device for titling and linking sections. Include a subheadline for additional contextual information.

<Playground>
  <SectionHeadline
    headline='Section headline'
    subheadline='Section subheadline'
    rule='emphasised'
    href='/'
  />
</Playground>

<hr />

## Section headline and subheadline + rule (heavy)
### Description
A graphic device for titling sections with hierarchical importance. Include a subheadline for additional contextual information.

<Playground>
  <SectionHeadline
    headline='Section headline'
    subheadline='Section subheadline'
    heavy
    rule='heavy'
  />
</Playground>

<hr />

## Section headline and subheadline with link + rule (heavy)
### Description
A graphic device for titling and linking sections with hierarchical importance. Include a subheadline for additional contextual information.

<Playground>
  <SectionHeadline
    headline='Section headline'
    subheadline='Section subheadline'
    heavy
    rule='heavy'
    href='/'
  />
</Playground>

<hr />

## Section headline + rule (accent)
### Description
A unique graphic device for titling sections.

**To ensure section headlines with accent rules are effective, use sparingly and with distinct groups of content. Most content is best sectioned with a clear typographic hierarchy, clear of ornament.**

**Use short and descriptive headlines:  one or two words, at most five.**

<Playground>
  <SectionHeadline
    headline='Section headline'
    rule='accent'
  />
</Playground>

<hr />

## Section headline with link + rule (accent)
### Description
A unique graphic device for titling and linking sections.

**To ensure section headlines with accent rules are effective, use sparingly and with distinct groups of content. Most content is best sectioned with a clear typographic hierarchy, clear of ornament.**

**Use short and descriptive headlines:  one or two words, at most five.**

<Playground>
  <SectionHeadline
    headline='Section headline'
    rule='accent'
    href='/'
  />
</Playground>

<hr />

## Section headline + rule (inverse, accent)
### Description
A unique graphic device for titling sections.

**To ensure section headlines with accent rules are effective, use sparingly and with distinct groups of content. Most content is best sectioned with a clear typographic hierarchy, clear of ornament.**

**Use short and descriptive headlines:  one or two words, at most five.**

<Playground style={{ backgroundColor: "#333", margin: '-2em', padding: '2em' }}>
  <SectionHeadline
    headline='Section headline'
    rule='accent'
    inverse
  />
</Playground>

<hr />

## Section headline with link + rule (inverse, accent)
### Description
A unique graphic device for titling and linking sections.

**To ensure section headlines with accent rules are effective, use sparingly and with distinct groups of content. Most content is best sectioned with a clear typographic hierarchy, clear of ornament.**

**Use short and descriptive headlines:  one or two words, at most five.**

<Playground style={{ backgroundColor: "#333", margin: '-2em', padding: '2em' }}>
  <SectionHeadline
    headline='Section headline'
    rule='accent'
    inverse
    href='/'
  />
</Playground>

<hr />

## Section headline and subheadline + rule (accent)
### Description
A unique graphic device for titling sections. Include a subheadline for additional contextual information.

<Playground>
  <SectionHeadline
    headline='Section headline'
    subheadline='Section subheadline'
    rule='accent'
  />
</Playground>

<hr />

## Section headline and subheadline with link + rule (accent)
### Description
A unique graphic device for titling and linking sections. Include a subheadline for additional contextual information.

<Playground>
  <SectionHeadline
    headline='Section headline'
    subheadline='Section subheadline'
    rule='accent'
    href='/'
  />
</Playground>

<hr />

## Section headline and subheadline + rule (inverse, accent)
### Description
A unique graphic device for titling sections. Include a subheadline for additional contextual information.

<Playground style={{ backgroundColor: "#333", margin: '-2em', padding: '2em' }}>
  <SectionHeadline
    headline='Section headline'
    subheadline='Section subheadline'
    rule='accent'
    inverse
  />
</Playground>

<hr />

## Section headline and subheadline with link + rule (inverse, accent)
### Description
A unique graphic device for titling and linking sections. Include a subheadline for additional contextual information.

<Playground style={{ backgroundColor: "#333", margin: '-2em', padding: '2em' }}>
  <SectionHeadline
    headline='Section headline'
    subheadline='Section subheadline'
    rule='accent'
    inverse
    href='/'
  />
</Playground>

<hr />

## Properties
<Props of={SectionHeadline} />