Skip to main content

CTA grid

A CTA Grid widget allows you to create a structures block for building engaging content pages.

Use this widget to present a list of your brand's key benefits or features alongside a grid showcasing specific products or services.

note

Custom widgets are described as they are defined for our standard (Mosaic) front-end theme. If the description does not match what you see on the screen, this is due to further customization that has been carried out specifically for your webshop's theme.

  • The Container background color sets the background color of the entire widget. The choice that you make is translated to an actual color on the basis of your front-end's style sheet.
  • The Main title color sets the text color of the main heading of the widget.
  • The Text color sets the text color of the paragraphs.
  • The Container's title will appear as the main heading of the widget.

Cards​

Click + ITEM to add a card to the widget. You can add up to four card items.

Selecting an option under Which card type do you need? displays a corresponding set of fields.

Image​

  • The Title will appear as the main heading of the card.
  • The Description appears below the Title.
  • Select the Image to use as the primary visual element for the card.
  • The Image alt - for accessibility is the text description for the image to improve accessibility.
  • The link defines where the user will be redirected when they click on the card.
  • If Open link in a new tab is checked, the card link will open in a new browser tab.
  • The Icon variant defines the type of the icon button used in the card. The specific styling is determined in your CSS.

USP​

  • The Title will appear as the main heading of the card.
  • USPs:
    • Click + ITEM to add a USP text. You can add up to four USP items.
    • The text is displayed as the USP text.
  • Button
    • If a Text is provided, it will appear inside the button which is displayed below the USPs.
    • Select the Type of the button. The choice that you make is translated to an actual color on the basis of your front-end's style sheet.
    • The Link defines where the user will be redirected when they click on the button.
    • If Open link in a new tab is checked, the button link will open in a new browser tab.