Menu Close menu

Design docs for Vanilla Framework

On this page

Divided section

The divided section pattern is used to separate related content into distinct steps or items within a single section. Each item is visually divided using a muted Rule and shallow padding, helping users distinguish between content blocks while maintaining a cohesive layout.

Type Pattern
Tier Sites
Documentation Status Minimal
Last Edited 16.03.2026
Figma logo Open in Figma GitHub logo View on GitHub
Divided section example

Anatomy

1
Rule
The rule component indicates the beginning of a new section.
2
Heading
The section heading communicates the primary subject or theme of the section.
3
Description block
The description provides introductory context for the divided section. It appears at the top of the section and helps users understand the purpose or scope of the content before engaging with the divided blocks.
4
Divided block
The divided block represents a single step or content item within the section. Each block is visually separated by a muted rule and shallow padding, creating clear distinction between items while maintaining a cohesive flow.
5
Block rule
The rule component indicates the beginning of a new block item.
6
Block heading
The block heading identifies the focus of each Divided block.
7
Content area
The content area contains the main content for each Divided block. It supports the same content types and layout options as the Basic section pattern, including text, images, videos, lists, code blocks, logos, and CTA block.
Divided section anatomy

Usage

The divided section pattern provides a flexible layout for presenting grouped content that needs clear internal separation, such as steps, stages, or sequential elements. Each Divided block is separated by a muted Rule and shallow padding, creating visual structure without introducing strong section breaks.

The pattern can accommodate a wide range of content types, including text, images, videos, lists, code blocks, logos, and call-to-action elements. Both the section description area and the Divided blocks themselves support these content types.

Internally, the divided section reuses content blocks from the Basic section pattern. As a result, most layout configurations and content options behave identically to those in Basic section, ensuring consistency and reducing the need for additional configuration or learning.

Layout

Divided section adapts across screen sizes. On medium screens, the layout is configurable: content can split(50/50) or stack vertically(full-width). On small screens, content always stacks.

Supported UI blocks for the Content area

  1. Description / body text - Use for long-form descriptions or explanations, when full sentences and paragraphs work best.
  2. Image - Include a 3:2 or 16:9 ratio image to illustrate or enhance the content including: photography, isometric illustrations, diagrams, and similar visuals. The image can include an optional caption.
  3. Video - Embed and link video content in 16:9 ratio.
  4. List - List up to 10 items, with bullet type options including: none, bullet, status, or number.
  5. Code block - Display preformatted code.
  6. Logo block - Display related logos such as customers or partners.
  7. Linked logo block - Display logos that link to additional resources.
  8. CTA block - Share one or more call-to-action elements, including a primary button, secondary button, and link.
  9. Notification - Highlight alerts, updates, or contextual messages within the section.

When to use

  • When content needs to be broken into clear steps or distinct items within a single section
  • When a subtle visual separation is needed without creating fully independent sections

When not to use

  • When images, lists, or other content need to stand alone without internal dividers, use Basic section instead
  • When the content consists of text only, use a Tiered list instead
  • When the content is made up of short text and a single representative image, consider using Equal heights instead

Examples

Responsive

Medium dimension (full-width)

example-8.png

Medium dimension (50/50)

example-7.png

Small dimension

example-9.png

Heading type

With icon

example-1.png

With bullet

example-2.png

With number

example-3.png

Without bullet

example-4.png

Without heading

example-5.png

Contents type

Mix of various content types

example-6.png

Properties

Name Type Required Description Constraint Options Default option
Section rule object Yes The rule component indicates the beginning of a new pattern Only use the default style for the section-level rule default default
Heading string Yes 4-column width heading using H2 Up to 60 characters - -
Linked heading single select No The heading may function as a link when clearly indicated. - default, link default
Medium layout single select No Indicate layout for the medium dimension - 50/50, full-width full-width
Bottom padding single select Yes The type of padding applied to the bottom of the pattern - default, deep, shallow, none default
Body string No 4-column width body text Up to 600 characters - -

Child properties

Divided block

Name Type Required Description Constraint Options Default option
Block rule object Yes The rule component to separate each block - mute mute
Heading string No 4-column width H5 heading for divided block Up to 160 characters true, false true
Bullet style single select No The bullet style defines how the block heading is visually presented within each divided block. When the bullet option is used, an additional 32px indent is applied to the content area below the heading to align the content visually with the bullet marker. - number, bullet, status, none number
Block item bottom padding single select No The type of padding applied to the block item The last block item of the pattern/block must not have bottom padding. none, shallow none

Change log

WhoWhenWhat
Maximilian Blazek13.02.2026Added links
Isaac Kim19.01.2026Initial commit

Mentioned in