Skip to main content

Article Blocks

Article blocks are designed for displaying blog content — article cards, titles, descriptions, and media. Use them to showcase your blog posts throughout the store.

Article Card​

The Article Card block displays a blog article with its featured image, title, excerpt, and metadata in a card format.

block-article-card.webp

Settings:

  • Article: Select a specific article or use dynamic context.
  • Card type: Choose from layout styles:
    • Style 1: Vertical card (image on top, content below).
    • Style 2: Horizontal card (image on side, content beside).
  • Color scheme: Apply a color scheme to the card.
  • Background: Color, gradient, or transparent.
  • Border radius & border style: Card edge styling.
  • Animation: Entrance animation effect.

Accepts child blocks: Article Description, Article Button.

Article Media​

Displays the article's featured image.

Settings:

  • Aspect ratio: Auto, square, portrait, landscape, or custom.
  • Border radius: Corner roundness.
  • Animation: Image entrance effect.

Article Title​

Displays the article title as a heading.

Settings:

  • Tag: HTML heading tag (H2-H6).
  • Typography: Font, size, weight, color, letter spacing.
  • Line clamp: Limit the number of visible title lines.
  • Link: Automatically links to the full article.

Article Description​

Displays the article's excerpt or summary text.

Settings:

  • Typography: Font, size, weight, color.
  • Line clamp: Limit visible text lines.

Article Published Date​

Displays the article's publication date.

Settings:

  • Date format: Choose how the date is displayed.
  • Typography: Font, size, color controls.

Article Button​

A "Read more" button that links to the full article.

Settings:

  • Text: Button label (default: "Read more").
  • Button type: Primary or secondary.
  • Button variant: Filled, outline, or ghost.
  • Size: Small, medium, or large.
Building a blog section

Combine article blocks with Layout blocks to create blog grids:

  1. Add a Section with a Layout block (type: Grid, 3 columns).
  2. Inside each Layout item, add an Article Card block.
  3. The cards will automatically display in a responsive grid.