Article cards

Overview #

The theme settings for article cards provide a comprehensive set of options to customize the appearance and functionality of article cards across the shop. These settings are applied globally but can be overridden at the section or block level. They allow for the customization of card style, image aspect ratio, button style, caption, text display, and alignment, ensuring a cohesive and visually appealing presentation of articles.

Key components and functionality #

Article cards

This setting group provides default configurations for all article cards, which can be customized further at the section level. The settings include options for card style, image aspect ratio, button style, and text alignment, ensuring a cohesive and visually appealing presentation of articles.

Card style

This setting determines the visual style of the article cards. Options include:

1. Banner
2. No image
3. No padding
4. Padding (default)

Image aspect ratio

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

1. Default
2. Landscape (default)
3. Portrait
4. Square
5. Widescreen
6. Ultrawide

Button style

This setting defines the style of buttons on the article cards. Options include:

1. Primary
2. Secondary
3. Extra large
4. Plain (default)
5. Small
6. Small secondary

Card caption

This setting specifies the type of caption displayed on the article cards. Options include:

1. Author (default)
2. Date
3. Author and date
4. None

Text display

This setting determines the text content shown on the article cards. Options include:

1. Title and excerpt (default)
2. Excerpt only
3. Title only
4. No text

Text horizontal alignment

This setting aligns the text horizontally within the article cards. Options include:

1. Left (default)
2. Center
3. Right

Text vertical alignment

This setting aligns the text vertically within the article cards. Options include:

1. Top
2. Middle
3. Bottom (default)

Tag badges

This setting allows for the addition of tag badges to the article cards, providing a visual cue for categorization or emphasis.

Usage examples #

1. Customizing card style: If you want your article cards to have a minimalistic look, you can select the "No image" option under the Card style setting. This will remove images from the cards, focusing attention on the text content.

2. Adjusting image aspect ratio: For a more cinematic presentation, choose the "Widescreen" option under Image aspect ratio. This will give your article images a broader, more expansive look.

3. Button style for call-to-action: To make call-to-action buttons stand out, select the "Extra large" option under Button style. This will increase the button size, making it more prominent and engaging for users.

By utilizing these settings, you can create a consistent and visually appealing presentation of articles across your shop, enhancing user engagement and readability.