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.
Fields that exist on this paragraph type are:
* = Required
Title - Text field
Text alignment - Dropdown *
Default options - Center/Left/Right
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
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
Once a card has been added the editor can choose to 'Add another card' and repeat the process.
Note: cards are added to the page in a row of up to 3 before they wrap to the next row, Adding 1 or 2 cards does not fit to the width of the screen ( unless the screen resolution dictates, such as tablet or mobile)
Examples of a Navigation card paragraph display
With title and card Icon displayed Top centre
Example of the Navigation card paragraph - form before and after the 'Add new card' button has been clicked.