Skip to content
  • There are no suggestions because the search field is empty.

Blog Post - Hero

A blog post hero with breadcrumbs, post information, and featured image.

blog-post-hero


View a live demo of this partial here.
The following is a detailed listing of the styling edits made to the partial's sections, the modules used in the sections, and field changes from the modules' default state.

Section 1

Section Styles

Alignment and spacing > Max width theme.global.max_width_wide
Alignment and spacing > Padding top: 1, bottom: 1
Alignment and spacing > Vertical alignment MIDDLE
Background > Background color theme.global.colors.backgrounds.medium_dark.color

Modules


Section Settings

Section Options Custom Columns
Custom Columns

{number: 1, width: {desktop: {fit_content: true}, {mobile: {unit: %, width: 100}},

{number: 2, margin: {desktop: {left: 25}, mobile: {top: 0, left: 0}}


Utility

Utility Items Type: Link List
Layout > Divider Caret
Layout > Spacing 8
Styles > Dark Mode true
Styles > Links > Font size: theme.typography.body_text_tiny.font.size
color: theme.typography.body_text.dark_mode.color

Section 2

Section Styles

Alignment and spacing > Max width theme.global.max_width_wide
Alignment and spacing > Vertical alignment MIDDLE
Alignment and spacing > Padding top: 40, bottom: 50
Background > Background color theme.global.colors.backgrounds.medium_dark.color

Modules


Section Settings

Section Options Custom Columns
Custom Columns

{number: 1, width: {desktop: {unit: px, width: 575}, mobile: {unit: %, width: 100}},

{number: 2, margin: {desktop: {left: 190}, tablet: {left: 50}, mobile: {left: 0}}


Tags

Style Simple
Custom Tags

{dynamic_data: true, data_type: blog-tags, is_blog_post: true},

{dyanmic_data: true, data_type: read-time}
Layout > Divider Bullet
Layout > Spacing 5
Styles > Dark Mode true


Text Block

Heading content.name
Semantic Heading Level 1
Text
content.meta_description
Styles > Dark Mode
true
Styles > Module > Spacing > Desktop > Padding
top: theme.global.spacing.rows,
bottom: theme.global.spacings.rows * 2


Tags

Style Simple
Custom Tags {dynamic_data: true, data_type: author-name,
{dynamic_data: true, data_type: publish-date}
Layout > Divider Vertical Bar
Layout > Spacing 6
Styles > Dark Mode true
Styles > Tags > Font > Color theme.typography.body_text.dark_mode.color


Media

Type Image
Content Type Featured Image
Displace from Row > Image is in: Far Right Column
Displace from Row > Section Width theme.global.max_width_wide
Styles > Image > Borders > Radius theme.global.borders.radius