Multiple Navigation cards can be added to the page using the 'Navigation cards' paragraph type. Navigation cards are a good way to link to other pages in your site (by completing the URL field on the card) and are commonly used on Home and landing pages.
An editor is able to add a Title and chose how to align this text in the page before adding a new card. There are also configuration option to choose the amount of cards displayed in a row and whether the cards should be displayed as a carousel or as a grid (Show all).
Fields that exist on this paragraph type are:
* = Required
Title - Text field
Text alignment - Dropdown *
Default options - Center/Left/Right
Style - Dropdown *
Default options - 3 / 4 or 6 cards per row
Display - Checkbox
default options Show all / Carousel
The layout and background of the paragraph can be configured with the additional fields:
Background image - Image upload
Background colour - Dropdown
The background colour can be selected from the core brand colours defined in the theme variables.
Width - Dropdown
Default options - Narrow/Medium/Wide/Full/Full bleed
Partial background %
Select the % of the background to apply colour to.
Partial background orientation, choose the position of the partial background
From top / From bottom
Top margin - Dropdown
Default options - Auto/96/48/32/16/8/0px
Bottom margin - Dropdown
Default options - Auto/96/48/32/16/8/0px
Each card has the fields:
* = Required
Image - Image upload
Title - Text field *
Description - Long text field - WYSIWYG *
Icon - Image upload
Icon placement - Dropdown *
Default options - Top Left/Top Center/ Top Right
URL link
If a Title is added to the URL link field the link will display as a button on the card!
Once a card has been added the editor can choose to 'Add another card' and repeat the process.
Examples of a Navigation card paragraph display
With title and card Icon - Display = 3 cards per row / Show all
With title and card Icon - Display = 4 cards per row / Show all
With title and card Icon - Display = 6 cards per row / Show all
With title and card Icon - Display = 4 cards per row / Carousel
With title and no image or icon - Display = 3 cards per row / Carousel
With title and no image or icon Link title added to produce button- Display = 3 cards per row / Carousel
Example of the Navigation card paragraph - form before and after the 'Add new card' button has been clicked.
