ba-content

This component applies our typography styling to text elements and controls the vertical rhythm between copy and other components

GitHub Storybook

Primary header

Secondary header

Tertiary header

Summary

Micro XS header

Micro XXS header

Body

Small Print

<ba-content>
  <h1>Primary header</h1>
  <h2>Secondary header</h2>
  <h3>Tertiary header</h3>
  <h4>Summary</h4>
  <h5>Micro XS header</h5>
  <h6>Micro XXS header</h6>
  <p>Body</p>
  <p class="ba-c-content__small-print">Small Print</p>
</ba-content>

Also follows guidelines set in typography guidelines

Increasing the whitespace between the content makes it easier for users to skim content and increase comprehension.

Code

Properties & Attributes

Property	Attribute	Description	Type	Default
`spacing`	`spacing`	Set's the relative space between first level child elements	`string \| undefined`	`undefined`

Slots

Slot	Description	Permitted elements
Unnamed slot	Elements will render in the body of the component	`<ba‑image>`, `<ba‑link>`, `<ba‑link‑back>`, `<ba‑star‑rating>`, `<ba‑tag>`, `<dl>`, `<figure>`, `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>`, `<ol>`, `<p>`, `<table>`, `<ul>`

Permitted ARIA roles

None

Parent components

ba-content can be slotted into:

Usage

Clean HTML

In order to work correctly this component relies on clean HTML. For example wrapping elements in <divs> will break the the styling of the components children

Default sizes

Element	Default typography styling
`<h1>`	Primary header
`<h2>`	Secondary header
`<h3>`	Tertiary header
`<h4>`	Summary
`<h5>`	Micro XS header
`<h6>`	Micro XXS header
`<p>`	Body

Picking custom sizes

The following CSS classes can be added to elements to add your own typography styling

Class	Typography styling
`ba-c-content__heading-secondary`	Secondary heading
`ba-c-content__heading-tertiary`	Tertiary heading
`ba-c-content__summary`	Summary
`ba-c-content__heading-micro-xs`	Micro XS heading
`ba-c-content__heading-micro-xxs`	Micro XXS heading
`ba-c-content__small-print`	Small print