Cards Block

Showcase your services and features in a single block by using the card carousel.

Quick links

1. Overview

2. Settings

3. Card Item

Overview

In the Gutenberg editor, open the block section and click or drag the Cards Block to the editor area. Main elements of the block are:

  • Subtitle
  • Title
  • Paragraph
  • Card item
  • Navigation
  • Add item button

Note: Because of the frequency of use, the first three elements (Subtitle, title and paragraph) of the Text Block are integrated in almost every Sana block.

Settings

If the settings side panel is not visible while working on your page or post, click on the Settings icon in the top left corner of the editor toolbar. Once opened you will see all the available options of the selected block, organized into collapsible tabs.

General

  • Content Align – Align the entire block content left, center or right
  • Padding – Add top and bottom block padding
  • Background – Choose a solid color or a background image

Note: Content Align positions containers within the block, while Text Align positions text within its own container.

Subtitle, Title, Paragraph

  • On/Off toggle – Display or hide the element
  • Text Align – Align text left, center or right within its own container
  • Font Size – Choose from nine preset sizes or add a custom font size
  • Text Color – Select a color for the subtitle, title and paragraph

Navigation

  • Position – Position the navigation buttons left, center or right
  • Border Radius – Choose how round the button corners will be
  • Background Color – Choose a solid color for your navigation buttons
  • Arrow Color – Select a color for the navigation button arrows

Responsive

  • Hide on Desktop – Block is visible on mobile, but not on desktop screens
  • Hide on Mobile – Block is visible on desktop, but not on mobile screens

Tip: You can create two separate blocks for a section of your page and load each block on a different screen size.

Card Item

Within the Cards Block you will find the Card Item. This inner block behaves like a module that gives you more flexibility and control over your content.

Tip: Inner blocks are similar to regular blocks. Feel free to move them around, delete them or add new ones.

General

  • Content Align – Align the entire inner block content left, center or right
  • Border Radius – Choose how round the card corners will be
  • Shadow – Add a background shadow to the card
  • Background Color – Choose a card background color

Title and Paragraph

  • On/Off toggle – Display or hide the element
  • Text Align – Align text left, center or right within the card
  • Font Size – Choose from nine preset sizes or add a custom font size
  • Text Color – Select a color for the title and paragraph

Link

  • Display Link – Show the link/button on the bottom of the card
  • URL – Set the URL address for your link/button
  • Style – Show the link as a button or hyperlink with an arrow
  • Font Size – Choose from nine preset sizes or add a custom font size
  • Text Color – Select a color for the link/button label
  • Background Color – If the link style is set to Button, choose a color
  • Border Radius – If the link style is set to Button, set the corner roundness (px)

Image

Ratio – Display the card image in a specific ratio or set it to flexible (the image height determines the ratio)

Was this article helpful?
YesNo
Was this article helpful?
YesNo