Skip to main content
Navigation cards
C
Written by CiviPlus Helpdesk
Updated over 3 months ago

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.

Did this answer your question?