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.
Similar to the Basic section pattern, the title can be made clickable by providing link attributes.
Since divided section pattern utilizes the content blocks from Basic section pattern, therefore, it also supports the same top rule 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.
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 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>
]
}
]
},
...
]
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.
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>
]
}
]
}
The vf_divided_section Jinja macro can be used to generate a basic section pattern. The API for the macro is shown
below.
| 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." |
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.
Since Patterns leverage many other parts of Vanilla in their composition and content, we recommend importing the entirety of Vanilla for full support.