Cards

Adding Cards

Cards are flexible elements that can be used to highlight content and group similar information together.

  1. Select "Cards" as the Row Type.
  2. In the "Cards" group, enter the following:
    1. Headline: Add a headline above the cards
    2. Content: Add a description for the cards
    3. Add Call to Action button: Select "Yes" to add a Call to Action button
      1. Add a link
    4. Cards Per Row: Select the number of cards to display per row. This will also determine the width of the cards.
    5. Card Type: Select the type of cards that should be displayed
    6. Add Background Image: Select "Yes" to add a background image
      1. Background Image: Select an image to use for the background
      2. Overlay Color: Select a color to overlay the background. This is mandatory to ensure adequate contrast with the headline and content.
    7. If you do not add a background image, you can update the color of the row.
      1. Row Background Color: Select a color to use as the background color
    8. Add Cards:
      1. College/Image Card
      2. CTA Card
      3. Profile Card
      4. Add cards by clicking the “+” icon at the top right corner, delete cards by clicking the “x” icon at the top right corner, and use the navigation arrows or drag the cards to rearrange their order.
    9. Click Preview Draft > Submit.

College/Image Card

A college/image card is a great way to display links in a visually heavy way.

drone image example
Image Card 1
drone image example
Image Card 2
drone image example
Image Card 3

Adding a College/Image Card

  1. Image: Select an image for the card
  2. Image Alternative Text: Add alternative text for the image. This will be read to screen reader users.
  3. Color: Select a color for the label on the image card.
  4. Link: Add a link

Call to Action (CTA) Card

A Call to Action card can contain an image, short description, and call to action link. This card type is great to introduce a topic and provide an option for users to read more.

 

drone image example

Call to Action Card 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquet lectus vel volutpat semper. Duis cursus urna nec felis sollicitudin cursus. Sed faucibus molestie nulla, ac ornare augue posuere venenatis.

Call to Action
drone image example

Call to Action Card 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquet lectus vel volutpat semper. Duis cursus urna nec felis sollicitudin cursus. Sed faucibus molestie nulla, ac ornare augue posuere venenatis.

Call to Action
drone image example

Call to Action Card 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquet lectus vel volutpat semper. Duis cursus urna nec felis sollicitudin cursus. Sed faucibus molestie nulla, ac ornare augue posuere venenatis.

Call to Action

Adding a Call to Action (CTA) Card

  1. Add Image: Select "Yes" to include an image in the card
    1. Image: Choose an image to use with the card
    2. Image Alternative Text: Add alternative text for the image. This will be read to screen reader users.
  2. Heading: Enter a heading to display at the top of the card
  3. Content: Enter a description to display within the card
  4. Add CTA/Link: Select "Yes" to add a CTA link
    1. Color: Select a color for the CTA link
    2. Link: Add a link

Profile Cards

Profile cards are a great way to display short descriptions of members in your department. You can also add links to these cards to provide more information on an a member.

drone image example

Profile Card 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet eros eget nibh imperdiet volutpat. Duis in metus eros. Maecenas elementum quam vel elit aliquam, vel elementum massa placerat.

drone image example

Profile Card 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet eros eget nibh imperdiet volutpat. Duis in metus eros. Maecenas elementum quam vel elit aliquam, vel elementum massa placerat.

drone image example

Profile Card 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet eros eget nibh imperdiet volutpat. Duis in metus eros. Maecenas elementum quam vel elit aliquam, vel elementum massa placerat.

Adding a Profile Card

  1. Image: Select an image for the card
  2. Image Alternative Text: Add alternative text for the image. This will be read to screen reader users.
  3. Heading: Add the heading for the card. 
  4. Content: Add a description for the card.
  5. Text Alignment: Select your preferred alignment for the heading and content.
  6. Add Link: Select "Yes" to add a link to the heading
    1. Link: Add a link