Section Component

The section component is a way to add a section with a colored background to your page. It includes an optional header, description and CTA button, which can be displayed either on the top or the side of the section.

When To Use This Component

Use the Section Component Block when you need to visually group related content and create clear separation from other areas of the page. This component is especially useful for drawing attention to important information or actions while maintaining a consistent page layout.

USE CASES OR SCENARIOS

Highlighting key messages or initiatives within a page
Breaking up long pages into scannable, digestible sections
Emphasizing calls to action such as “Apply Now,” “Learn More,” or “Register”
Providing contextual information that supports surrounding content
Creating visual rhythm and hierarchy through the use of background color, Images or videos

Component Do’s and Don’ts

There might be a time when you don’t know whether to use a Section Block component or not. Here are some examples of how to effectively use a Section Block component and when you shouldn’t use one:

Use the header to clearly communicate the section’s purpose by keeping headings concise and meaningful. Descriptions should remain brief and focused, using short sentences or paragraphs that quickly convey value to the reader. CTA buttons should be used sparingly and intentionally, always linking to a clear and relevant next step. Choose the top or side layout strategically—top-aligned content supports linear reading, while side-aligned content works well alongside visuals or in multi-column layouts. Finally, ensure that all content within the section is directly related, with every element supporting a single, clear idea or goal.

DON’T

Avoid overloading the section with too much content by keeping text concise and focused, and do not include multiple competing messages or long text blocks. The component should not be used purely for decoration, each section must serve a clear purpose or user need. Finally, do not group unrelated content together simply to fill space or take advantage of a colored background.

Component Design Options

Below are the Section Block component design options, with explanations of each and guidance on proper usage.

EDITABLE PARTS:

Styles:
- Default: Layout stacks the title and description with the CTA button aligned to the right, while the
- Columns: layout places the title, description, and CTA together in a smaller column on the left, with the main content displayed alongside it on the right.
Block Heading:
- Show Block Heading: Option to turn off or on the header.
- Eyebrow Text (optional): An eyebrow text is a small line of text that appears above the title. Its purpose is to provide context, category information, or a subtle introduction to the main heading without drawing as much attention as the headline itself.
- Title (optional): A header title should clearly convey the blocks main topic, be visually prominent, and guide visitors through the content while maintaining readability and accessibility.
- Description (optional): The description provides a brief, clear summary that supports the header title and helps visitors quickly understand the block content.
- Button (optional): The button prompts users to take a specific action. Its text should be short, clear, and compelling, and the linked URL must be correct and active to ensure users reach the intended destination.
- Button Color: Green, Gold
Block Options:
- Background Color: Gray, Black, White

The example below shows the Section Block in use, along with the selected configuration options.

Style: Columns
Block Heading:
- Show Block Heading: Yes
- Title: Header Title
- Description: This is the section heading description. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
- Button (optional): URL: Example Link Text: Link Text
- Button Color: Gold
Block Options:
- Background Color: Black

Header Title

This is the section heading description. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Link Text

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt vel sequi, eius quasi ipsam quae eos tempora maiores excepturi, aspernatur ad facilis? Doloribus qui facilis voluptates quidem provident laboriosam quod.

Maiores dolores dolore itaque consequuntur impedit culpa dignissimos nemo quidem, quae autem quod eum blanditiis. Facere, quia, sequi, dicta itaque blanditiis hic accusamus illo officiis fugit non nostrum ipsum mollitia.

Dose Media — This is a caption for an image. I’m intentionally making it very long to see how well things wrap with my styles.

Aptent euismod nascetur proin ridiculus venenatis velit felis nulla vel, tellus ac non aenean mi curae penatibus porttitor parturient sociis, facilisi posuere consequat senectus ultricies fames suscipit aliquet. Augue egestas quam convallis justo tincidunt risus enim interdum, dignissim sodales cursus hac sollicitudin cum nostra habitasse a, litora montes purus class venenatis duis tempus. Ultrices curabitur ad et nam integer leo magna platea, tellus hendrerit consequat ut egestas ante mauris, mi hac aliquet nisi at sapien mollis.