Component: Body

What's a Body Component?

The body component serves as the foundation for presenting text, images, links, and other essential elements, making it a key tool for building informative and engaging pages. Mastering the body component helps maintain consistency across pages while allowing room for customization to meet the unique needs of each page that created

There are four elements to a body component:

1. Heading
2. Lead text
3. Body Text
4. Aside

Headings:

Headings are some of the most critical content on a website.  They are crucial for structuring content, improving readability, accessibility, and search engine optimization (SEO). 

In HTML, headings range from Heading 1 (H1) to Heading 6 (H6), indicating a hierarchy of importance — Our design system defaults page titles as H1 (used only once per page), and the body component heading field is set to H2.  There are instances when a body component is used with in a layout section that already contains a header, in which case, the system will automatically set the body heading as an H3.  The text editor offers H3 to H6 for subsections.  It is important to choose headings based on their hierarchical role, not appearance, to ensure a clear structure and to ensure that screen readers can accurately read content for accessibility purposes.  

For more on headings, visit the following pages:

• Accessibility | California Judicial Branch Design System
• Headings | California Judicial Branch Design System
• Ensure the Order of Headings is Semantically Correct - Accessibility Checker

Lead Text

Lead text is a short, introductory section that appears between a heading and the main body content. It’s typically styled with a slightly larger or distinct font style to draw attention and provide a quick overview of the content that follows. Lead text helps set the tone, gives context, and guides readers into the main content.  This area is generally short and concise.  Too much content in this area, given the font styles, may be visually overwhelming to a reader.

Body Text

As the main element of the body component, this area is meant to hold the bulk of content for each section or topic.

The text area of a body component has the most editing options, allowing authors to set:

• subsection headings
• font styles
• hyperlinks to other pages or documents
• bulleted or numbered lists
• rules
• tables
• images

The overall look and feel of the styles set are determined by the design system; however, the flexibility of the body component makes it one of the most used components in the system.  

Aside

The aside is an element that is found within the body component.  It offers an option to add supplementary content to the right of the main content.  For more information, visit our Aside Component Page.