ba-content
This component applies our typography styling to text elements and controls the vertical rhythm between copy and other components
GitHub
Storybook
Live Demo
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>Guidelines
Also follows guidelines set in typography guidelines
Increasing the whitespace between the content makes it easier for users to skim content and increase comprehension.
Further reading:
Accessibility
There are no specific accessibility considerations for ba-content guidelines. However, it follows the typography guidelines.
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:
<ba‑accordion><ba‑card><ba‑card‑segmented><ba‑checkbox‑card><ba‑checkbox‑list‑card><ba‑details><ba‑flex><ba‑form><ba‑form‑group><ba‑form‑group‑dropdown><ba‑grid><ba‑header‑section><ba‑hero><ba‑media‑object><ba‑message><ba‑message‑global><ba‑page‑segment><ba‑radio‑card><ba‑tab‑container‑content><ba‑tab‑chip‑content>
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 |