Juniper Websites: Working with Card Blocks

Juniper Websites

Overview

A card block shows short pieces of information as cards on a page. 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.

This guide explains how to add a card block to a page, add and manage cards, change how the block looks, and move it on your page.

Add a card block

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

  1. Open the webpage 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:

    The Cards Block window

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:

    The Add Card window

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

    Card details in the Add Card window
    1. Enter a Title.
    2. Enter a Subtitle.
    3. Enter the Text for the card.
  4. Choose any optional settings, for example an icon, a background image, or colours. See Choose optional card settings.
  5. Select OK to add the card.
  6. Repeat these steps for each card. You can add as many cards as you need.

New cards are added to the end of the list.

Choose optional card settings

These settings apply to one card at a time. Expand a section to find out more:

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

    1. In Add Card, find Icon:

      Icon options in the Add Card window
    2. Select one of the icons.

    3. Alternatively, choose an icon 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 from Font Awesome v5.7.1. Icons added in later versions don't appear.

    To remove an icon, scroll down to Icon Code and delete the code:

    The Icon Code field

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

    1. In Add Card, scroll down to Image.

    2. Select Select image. File Manager appears:

      The File Manager window

    3. Select the image you want to use.

    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 Add Card, find Background Colour and Foreground Colour:

      Colour settings and the contrast checker

    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.

Manage your cards

To open a card block you've already added, open the webpage and double-click the card block in the content area. Cards Block appears.

Expand a section to find out more:

  • Follow these steps to edit a card:
    1. Open Cards Block for your block.

    2. From the Cards tab, select the pencil icon ( ) next to the card you want to change:

      The pencil icon next to a card

    3. Update the card details.
    4. Select OK.
    5. Select OK to close Cards Block.
  • Follow these steps to delete a card:
    1. Open Cards Block for your block.

    2. From the Cards tab, select the bin icon ( ) next to the card you want to remove:

      The bin icon next to a card

    3. Select OK to close Cards Block.
  • Follow these steps to change the order of your cards:
    1. Open Cards Block for your block.

    2. From the Cards tab, drag the handle to the left of a card up or down to move it:

      The drag handle to the left of a card

    3. Select OK to close Cards Block.

  • Follow these steps to sort your cards by title:

    1. Open Cards Block for your block.

    2. From the Cards tab, select a Sort Order:

      Sort Order options

      1. Select Title A-Z to sort from A to Z.
      2. Select Title Z-A to sort from Z to A.
      3. Select Default to return to the order you added the cards.
    3. Select OK to close Cards Block.

    If you add, move, or rename a card after sorting, the Sort Order returns to Default.

Change how your cards look

These settings apply to all the cards in the block. Expand a section to find out more:

  • Follow these steps to add a title above your card block:
    1. Open Cards Block for your block.
    2. Select the General tab.

    3. Check Include Title, then enter a title for the block:

      The General tab with Include Title checked

  • Follow these steps to choose the shape, corners, and angle of your cards:
    1. Open Cards Block for your block.
    2. Select the Style tab.

    3. Choose an option for each group of settings:

      The Style tab

      Use this table to help you:

      Group Options
      Shape Square, Landscape, or Portrait
      Corners Square or Rounded
      Angle Straight or Slanted
  • Follow these steps to choose a layout for your card block:
    1. Open Cards Block for your block.
    2. Select the Layout tab.

    3. Select a layout:

      The Layout tab

      Use this table to help you:

      Layout What it does
      1 Across, 2 Across, 3 Across, or 4 Across Shows your cards in a grid, with that number of cards in each row.
      Single Swiper Shows one card at a time. Visitors use the arrows to move between cards.
      Multi-Swiper (2 Across), Multi-Swiper (3 Across), or Multi-Swiper (4 Across) Shows that number of cards at a time. Visitors use the arrows to move between cards.
  • Cards in a 1 Across layout don't fill the full width of the page. Follow these steps to choose where the card sits:
    1. Open Cards Block for your block.
    2. Select the Layout tab.
    3. Select the cog icon ( ) on the 1 Across option.
    4. From Align, select Left, Center, or Right.
  • Follow these steps to set how long each card appears in a swiper layout:
    1. Open Cards Block for your block.
    2. Select the Layout tab.
    3. Select the cog icon ( ) on a Single Swiper or Multi-Swiper option.
    4. Enter the Slide Duration in seconds.
    5. From Transition, select Fade, Fade Out, Scroll Horizontal, or None.

Save your changes

Follow these steps after you add or change your cards:

  1. In Cards Block, select OK.

  2. Check the card block in the content area:

    A finished card block in the content area

  3. Select Save to save your changes.

Move a card block

Follow these steps to move a card block to a different place on your page:

  1. Open the webpage with the card block you want to move.
  2. Drag the card block to its new position in the content area.
  3. Select Save.

Tips and best practices

  1. Keep the text on each card short, so visitors can read it quickly.
  2. Add a similar amount of text to each card, so your cards look balanced.
  3. Choose a foreground colour that stands out clearly from the background colour or image. Always check the contrast checker results.
  4. If you use a background image, we recommend a plain one, so your text is easy to read.
  5. Choose a style that suits every card in the block, because the shape, corners, and angle apply to all cards.

Next steps

Check how your cards look on different devices. See Juniper Websites: How do I see what my website looks like on different devices?

Updated