---
# System prepended metadata

title: Component header

---

> # Component header

import { SectionBreak } from "@emcm-ui/design-system/src/components/index.js";

import SectionHeaderLayout from "../../../design-system/src/templates/SectionHeaderLayout";
import Group from "@emcm-ui/component-group";
import Alert from "@emcm-ui/component-alert";
import Panel from "@emcm-ui/component-panel";
import VerticalSpacing from "@emcm-ui/component-vertical-spacing";
import Header from "@emcm-ui/component-header";

## Visual

<Panel>
  <div>
  <Section>
    <Header
      align="left"
      eyebrow="Eyebrow"
      heading={
        <Heading rank="2" type="l">
          Large heading with eyebrow, <strong>bold highlight,</strong> CTA, and subheading
        </Heading>
      }
      callToAction={
        <Link href="http://example.com" type="primary">
          Primary link
        </Link>
      }
      standfirst="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ante elit, mollis vestibulum efficitur sed, elementum eu arcu. Curabitur dapibus, nisl ac dictum lacinia, enim elit auctor mauris."
    />
  </Section>
  <Section>
    <Header
      align="left"
      heading={
        <Heading rank="2" type="m">
          Medium heading with <strong>bold highlight,</strong> CTA, and subheading
        </Heading>
      }
      callToAction={
        <Link href="http://example.com" type="secondary">
          Secondary link
        </Link>
      }
      standfirst="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ante elit, mollis vestibulum efficitur sed, elementum eu arcu. Curabitur dapibus, nisl ac dictum lacinia, enim elit auctor mauris."
    />
  </Section>
  <Section>
    <Header
      align="left"
      heading={
        <Heading rank="2" type="small-caps">
          Small all-caps heading
        </Heading>
      }
    />
  </Section>
  </div>
</Panel>

<SectionBreak />

## Best practices

### Quick tips

<SectionHeaderLayout
  dos={[
    "Be concise and descriptive in constructing page section headers",
    "Use headings to reinforce the hierarchy of the page"
  ]}
  donts={[
    "Avoid using articles (the, a, an, etc.) to keep content concise and scannable"
  ]}
/>

See [Component header - Component overview](https://thehub.thomsonreuters.com/docs/DOC-2810960) for full AEM authoring guidance.

### Writing guide

Component headers should:

- Be written in sentence case
- Be scannable but descriptive
- Be relevant to the content to which they refer

Component headers should not:

- Use articles or punctuation when they can be avoided

#### Component header in action
<VerticalSpacing size="s">
  <Alert state="failure">
    Instead of:
  </Alert>
</VerticalSpacing>
<VerticalSpacing size="l">
  <div style={{ padding: "10px", backgroundColor: "#F4F4F4" }}>
    <h3>Products for the investment management sector.</h3>
  </div>
</VerticalSpacing>

<VerticalSpacing size="s">
  <Alert state="success">
    Try:
  </Alert>
</VerticalSpacing>
<VerticalSpacing size="m">
  <div style={{ padding: "10px", backgroundColor: "#F4F4F4" }}>
    <h3>Investment management products</h3>
  </div>
</VerticalSpacing>

<SectionBreak />

## Related components

[DownloadButton](/lib-components-download-button-storybook)

[Link](/lib-components-link-storybook)