Jump to main content

Divided section


Work in progress

Vanilla's patterns are newly released and still evolving as we receive feedback.

A divided section is used to create structured content section with a title, a description block and various divided blocks. It provides a flexible layout system that can accommodate different types of content including text, images, videos, lists, code blocks, logos, and call-to-action elements, within both the description and divided blocks. Internally, it utilizes content blocks from Basic section pattern, so the configuration for most of the layout options, as well as for content items is going to be identical.

The divided section pattern is composed of the following elements:

Element Description
Title (required) Main heading text (h2)
Blocks Array of blocks (either description-block or divided-block)
Items Array of content items within a block

The default divided section uses a 50/50 grid layout that splits on large screens and stacks on smaller screens.

Layout Options

Linked Title

Similar to the Basic section pattern, the title can be made clickable by providing link attributes.

Top Rule variants

Since divided section pattern utilizes the content blocks from Basic section pattern, therefore, it also supports the same top rule variants.

Padding Variants

Divided section supports customizable padding options at both the pattern and item level, using the section pattern. The Jinja macro for the pattern applies the section padding automatically. For more, please see Basic section pattern's layout options.

Split Layout

Use is_split_on_medium=true to create a 50/50 grid layout that splits on medium screens and above.

Divided section supports customizable padding options at both the pattern and item level, using the section pattern. The Jinja macro for the pattern applies the section padding automatically. For more, please see Basic section pattern's layout options.

Blocks

Blocks in divided section use a flexible model where you can pass an array of blocks representing different types. These can either be description-block or divided-block.
Ideally, there should be only one description block, and between 1-9 divided blocks.
Each block can have an array of items, which follow the same model as Basic section's content blocks

"blocks": [
  {
    "type": "description-block",
    "items": [
      <Basic section's content blocks>
    ]
  },
  {
    "type": "divided-block",
    "bullet_type": "number" | "bullet" | "status" | "none"
    "items": [
      {
        "title_text" : "Optional text to render as block's heading",
        "contents": [
          <Basic section's content blocks>
        ]
      }
    ]
  },
  ...
]

Description Block

Divided section supports a description block, in the right column right above divided blocks. It can be used to provide information about the section itself, as well as about the divided blocks that are going to be appearing below.

{
  "type": "description-block",
  "items": [
    <Basic section's content blocks>
  ]
}

The items in description block follow the same model as Basic section's content blocks, so you can use different types of elements supported by the Basic section pattern. For example, lists, images, videos, notifications, text, and code blocks.

Divided Block

The divided blocks are subsections, separated by a muted rule and a shallow bottom padding. These can have optional headings, which can have different bullet types such as bullets, numbers or status. The bullets can also be omitted.
Each block can contain 1 to 5 content items. These items also follow the same model as Basic section's content blocks.

{
  "type": "divided-block",
  "bullet_type": "number" | "bullet" | "status" | "none"
  "items": [
    {
      "title_text" : "Optional text to render as block's heading",
      "contents": [
        <Basic section's content blocks>
      ]
    }
  ]
}

Divided Block with bulleted headings

Divided Block with checked headings

Divided Block with no bullets

Divided Block with no headings

Divided Block with mixed content and bulleted headings

Divided Block with mixed content and numbered headings

Jinja Macro

The vf_divided_section Jinja macro can be used to generate a basic section pattern. The API for the macro is shown below.

Parameters

Name Required? Type Default Description
title Yes Object N/A Title configuration object with text and optional link_attrs
title.text Yes string N/A The main title text (rendered as h2)
title.link_attrs No Object N/A Attributes of an anchor element, as a dictionary. See attribute forwarding docs for more info.
blocks Yes Array<Object> [] Array of blocks to display in the section. See Blocks for configuration details.
padding No One of:
'deep',
'shallow',
'default'
'default' Padding variant for the entire section
is_split_on_medium No boolean false Whether to split the layout on medium screens and above
top_rule_variant No One of:
'default',
'muted',
`highlighted`,
'none'
'default' Variant of horizontal rule to display at the top of the section."

Import

Jinja Macro

To import the Basic Section Jinja macro, copy the following import statement into your Jinja template.

{% from "_macros/vf_divided-section.jinja" import vf_divided_section %}

View the building with Jinja macros guide for macro installation instructions.

SCSS

Since Patterns leverage many other parts of Vanilla in their composition and content, we recommend importing the entirety of Vanilla for full support.