ba-content
This component applies our typography styling to text elements and controls the vertical rhythm between copy and other components
Airframe
Web Components
React
React Native
Anatomy
Content container
The boundary of the component. It groups related content and applies consistent typography and spacing to its direct children.
Content element
A first-level element placed inside the component, such as a heading, paragraph, list, image, link or table.
Vertical rhythm
The consistent vertical spacing applied between first-level content elements. The amount of spacing can be adjusted using the component’s spacing property.
Design Documentation
Increasing the whitespace between the content makes it easier for users to skim content and increase comprehension.
Further reading:
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>Properties and attributes
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
spacing |
spacing |
Set's the relative space between first level child elements | string | undefined |
undefined |
Permitted ARIA roles
- None
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‑table>, <ba‑tag>, <code>, <dl>, <figure>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ol>, <p>, <pre>, <table>, <ul> |
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 structure
In order to work correctly, ba-content relies on clean HTML. For example, wrapping content in unnecessary <div> elements will break the styling of the component's children.
<ba-content>
<h1>Primary header</h1>
<h2>Secondary header</h2>
<h3>Tertiary header</h3>
<p>Body paragraph with proper typography styling applied automatically.</p>
</ba-content>Default typography sizes
Each HTML element within ba-content receives default typography styling automatically.
<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>Custom typography classes
The following CSS classes can be added to elements to apply custom typography styling beyond the defaults.
| 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 |
<ba-content>
<h2 class="ba-c-content__heading-tertiary">This h2 is styled as a tertiary heading</h2>
<p class="ba-c-content__summary">This paragraph is styled as summary text</p>
<p class="ba-c-content__small-print">This paragraph is styled as small print</p>
</ba-content>Guidelines
ba-content follows the typography guidelines, which ensure proper contrast, font sizes, and line heights for readability.
These guidelines help all users, including those with low vision or reading difficulties, to comfortably read and comprehend content.
Headings should follow a logical order (h1, h2, h3, etc.) without skipping levels. Screen readers and other assistive technology rely on headings to navigate and understand the structure of pages.
Users of assistive technology often navigate by headings, jumping between sections to find relevant content. A proper hierarchy makes this navigation efficient and accurate.
Further reading:
ba-content works best with semantic HTML elements like <h1> through <h6>, <p>, and other native elements. These elements provide important meaning and structure that assistive technologies can interpret.
Avoid using presentational markup or styling non-semantic elements to look like headings or paragraphs. Use the correct semantic element for the content's purpose.
In order to work correctly, ba-content relies on clean HTML. For example, wrapping content in unnecessary <div> elements will break the styling of the component's children.
Keep your markup semantic and avoid unnecessary wrapper elements to ensure proper typography styling is applied.
Keyboard navigation
State: ba-content is a non-interactive container
Focus moves through interactive elements within ba-content (links, buttons, etc.), skipping ba-content itself
Usage and accessibility checklist
Use this checklist to confirm the component has been configured and used correctly.
UX checklist
- ba-content relies on clean HTML structure (avoid wrapping elements in unnecessary divs)
- Spacing between content elements follows vertical rhythm guidelines for readability
- Long content sections use increased spacing to improve skimmability and comprehension
Accessibility checklist
- Heading elements follow proper document hierarchy
- Text content follows typography guidelines
- Semantic HTML elements are used appropriately within ba-content
- Text is not presented in all caps
- Bold and italic text have not been used
These checks are handled by the component and do not need to be repeated each time it is used.
- ba-content correctly applies typography styles to child elements
- Line lengths are optimised for readability across different screen sizes
- Colour contrast for all text elements in all BAgel themes
- Spacing calculations work correctly across different content combinations
- Custom CSS classes apply correct typography styling