Juniper Websites: How do I add a card block to a page?

Juniper Websites

Overview

This article explains how to add a card block to a page and add cards to it.

A card block shows short pieces of information as cards. Each card can have a title, a subtitle, text, an icon, and a background colour or image. For example, you could use cards to highlight your school values, key dates, or awards.

Add a card block

Follow these steps to add a card block to a page:

  1. Open the web page you want to edit.
  2. Select the content area where you want to add the card block.
  3. Select the Edit tab.
  4. Select the Blocks icon.

  5. From Website content, select Cards. Cards Block appears:

Add cards

Follow these steps to add each card to your block:

  1. In Cards Block, select the Cards tab.

  2. Select Add New Card.  Add Card appears:

  3. Enter the details for your card. All fields are optional, so you can, for example, add a card with only text:

    1. Enter a Title.
    2. Enter a Subtitle.
    3. Enter the Text for the card.
  4. Optionally, add an Icon.
  5. Optionally, choose any of the card settings in the next section.
  6. Select OK to add the card.
  7. Repeat these steps for each card. You can add as many cards as you need.

Choose optional card settings

Expand a section to find out more:

  • Follow these steps to add an icon to a card:

    1. In Add Card, find Icon:

    2. Select one of the icons.

    3. Alternatively, choose one from Font Awesome and enter its code in the field below the icons. For example: 

      <i class="fab fa-linkedin-in"></i>.

      Your website supports Light, Regular, Solid, and Brand icons within Font Awesome v5.7.1. Icons introduced in any later version don't appear.

      If you add an icon and wish to remove it, scroll down the page to the Icon Code section and remove the code: 

  • Follow these steps to add a background image to a card:

    1. In the Add Card window, scroll down to Image.

    2. Select Select image. The File Manager appears:

    3. Select the image you want to use.
    4. To remove an image, select Remove image.

    A card can have a background colour or a background image, but not both.

  • Follow these steps to choose the colours for a card:

    1. In the Add Card window, find Background Colour and Foreground Colour:

    2. Select a Background Colour.
    3. Select a Foreground Colour. This is the colour of the text and icon.
    4. Check the Accessibility Colour Contrast Checker. It shows Pass or Fail for large text and small text.
    5. If your colours fail, choose a different foreground colour.

    The contrast checker only checks your colours. It doesn't check text over an image, so choose a text colour that is easy to read on your image.

Add the block to your page

Follow these steps after you add all your cards:

  1. In the Cards Block window, select OK.

  2. Check the card block in the content area:

  3. Select Save to save your changes.

Tips and best practices

  1. Keep the text you add to a card short. This lets visitors read it quickly.
  2. Choose a foreground colour that stands out clearly from the background or any background image. When selecting colours and images, always check the contrast checker results.
  3. If you select a background image we recommend using a plain one. This ensures that your text is easy to read.
  4. To ensure your cards look balanced, add cards with a similar amount of text.

Next steps

To edit, delete, or reorder your cards, change how your cards look, or move the card block, see Juniper Websites: How do I manage cards and change how a card block looks?

Related information

Updated