1. Home
  2. Documentation
  3. Content Builder Blocks
  4. Preview - Cards

Preview - Cards

Style & Appearance

Description

Links that can give users a preview of content. This can be a combination of images, page titles, and preview text. Two blocks serve the purpose of providing a preview to content.

    Available Blocks & Styles

    Preview Cards

    Standard

    A person reviewing building plans unrolled on a table.

    Architecture of Craft CMS
    Person wearing a suit placing a natural wood cube on a stack.

    Content Builder Blocks
    Red apple on a stack of books in front of a black chalkboard.

    Course Development
    Hand on a electrical plug in an electrical outlet.

    Plug-ins

    Small

    A person reviewing building plans unrolled on a table.

    Architecture of Craft CMS
    Person wearing a suit placing a natural wood cube on a stack.

    Content Builder Blocks
    Red apple on a stack of books in front of a black chalkboard.

    Course Development
    Hand on a electrical plug in an electrical outlet.

    Plug-ins

    Icon

    A person reviewing building plans unrolled on a table.

    Architecture of Craft CMS
    Person wearing a suit placing a natural wood cube on a stack.

    Content Builder Blocks
    Red apple on a stack of books in front of a black chalkboard.

    Course Development
    Hand on a electrical plug in an electrical outlet.

    Plug-ins

    Icon - Transparent - NEW 2026!

    Note: The live example doesn't highlight the best use case because these icons have solid backgrounds. Imagine using svg or transparent png icons.

    eye icon

    Preview - Offset Preview
    accordion icon

    Accordion
    box icon

    Container Start / End

    Images showing this style in standard, hover state, and with preview text visible.

    Thin outline with rounded corners, transparent icon, header text below.
    Thin outline with rounded corners, transparent icon, header text below. Light blue background, sky blue outline.
    Thin outline with rounded corners, transparent icon, header text below, preview text below that.

    Text Cards

    Architecture of Craft CMS

    Content Builder Blocks

    Course Development

    Plug-ins

    Text List

    Architecture of Craft CMS

    Content Builder Blocks

    Course Development

    Plug-ins

    Examples

    Preview Cards

        Admin UI

        Default Traits & Behaviors

        Shows dropdown and lightswitch options in the Admin UI for the Preview - Card content builder block.
        • Autogenerated Child Page Preview Cards
          This block type will insert image-based preview cards for any child page that has content in the preview card tab.
        • Related Entry Preview Card(s)
          Set preview cards by selecting the related entry. Related entry must have preview card data or nothing will display.
        • Card Types
          Dropdown options (described below)
        • Display Preview Text - New 2026!
          If the entries you select have content in the "Preview Text" field, you can opt to show this text to give users additional context about the link. Formerly, this text displayed by default.
        • Open Links in New Tabs - New 2026!
          Use judiciously. Preferably only when original page context is required while interacting with new content. It is a best practice for accessibility to open in the same tab/window.
        • Remove Bottom Padding
          Use when stacking a content block and you wish to remove white space beneath it and the next block.

        Card Types

        • Standard
          Large rectangular preview image above page title. Can optionally include preview text. Multiples wrap 1, 2, 3, 4 across, depending on screen size.
        • Small
          Small square preview image to the left of page titles. Preview text display is not an option. Multiples wrap 1, 2, 3, 4 across, depending on screen size.
        • Icon
          Small circle preview image above title, centrally aligned. Can optionally include preview text. Multiples wrap 1, 2, 3, 4 across, depending on screen size.
        • Icon - Transparent
          Thin line rectangular card with small icon, ideally on a transparent background (png or svg). Can optionally include preview text. Multiples wrap 1, 2, 3 across, depending on screen size.
        • Text Cards
          Rectangular boxes without images, but with an arrow icon. Includes page title. Can optionally include preview text. Multiples wrap 1, 2, 3, 4 across, depending on screen size.
        • Text List
          Page title with a bullet (circle). Can optionally include preview text. Multiples do not wrap, but stack on top of one another. Multiples wrap 1, 2, 3, 4 across, depending on screen size.