> # 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)