Blog post

Overview #

The Blog Post block is designed to display an article card within various sections of a theme. It showcases a blog post's title, featured image, excerpt, and provides a link to read more. This block can be used in sections such as Blog Posts, Collage, Slideshow, and Multicolumn.

Key components and functionality #

Article

This setting allows you to select the specific article to display within the block. It is essential for linking the block to the correct blog post content.

Image aspect ratio

This setting controls the aspect ratio of images within the card. Options include:

• Use theme setting
• Default
• Landscape
• Portrait
• Square
• Widescreen
• Ultrawide

Default: Use theme setting

Card style

This setting determines the visual style of the card. Options include:

• Use theme setting
• Banner
• No image
• No padding
• Padding

Default: Use theme setting

Card text

This setting specifies the text content displayed on the card. Options include:

• Use theme setting
• Title and excerpt
• Excerpt only
• Title only
• No text

Default: Use theme setting

Card button style

This setting defines the style of the button on the card. Options include:

• Use theme setting
• Primary
• Secondary
• Extra large
• Plain
• Small
• Small secondary

Default: Use theme setting

Card text horizontal alignment

This setting aligns the text horizontally within the card. Options include:

• Use theme setting
• Left
• Center
• Right

Default: Use theme setting

Card text vertical alignment

This setting aligns the text vertically within the card. Options include:

• Use theme setting
• Top
• Center
• Bottom

Default: Use theme setting

Card caption article

This setting allows you to choose what additional information is displayed as a caption on the card. Options include:

• Use theme setting
• Author
• Date
• Author and date
• None

Default: Use theme setting

Available in sections #

• Blog posts
• Collage
• Slideshow
• Multicolumn

Usage notes #

• Ensure that text and background colors meet accessibility guidelines for readability.
• Consider responsive design principles to maintain a consistent appearance across different devices.
• Optimize images for performance to ensure fast loading times without compromising quality.

Usage examples #

1. Blog Posts Section: Use the Blog Post block to feature recent articles in a grid layout, allowing users to quickly access and read new content.

2. Collage Section: Integrate the Blog Post block within a collage to create a visually appealing mix of images and text, enhancing the storytelling aspect of your site.

3. Slideshow Section: Add the Blog Post block to a slideshow to highlight featured articles, drawing attention to specific content as users navigate through slides.

4. Multicolumn Section: Utilize the Blog Post block in a multicolumn layout to present multiple articles side by side, offering a comprehensive view of available content.