[Component] Text & Icon Card

[stephaniefois]

Component Specs

Fields

{* Required element}

• Upload icon*
• Title text
• Description

Notes

• Not used with images
• No CTA button or link
• Layout has a maximum of 3 columns
  • Elements wrap to a new line if a fourth item is added
  • Four or more items in a grid follow 3-column layout
• Cards don't "spread" to fill the space when there is less than 3 cards

Variations

• One-, two-, or three-column grids
• Left or right aligned icon and text

Design

These designs do not represent the component as a whole. Each card shows different alignment styles. In the Figma file, you will find all sorts of variations, as described in the "variations" notes above.

[stephaniefois]

I added additional notes to this card:

• Maximum of 3 columns
  • Elements wrap to a new line if a fourth item is added
  • Four or more items in a grid follow 3-column layout

These notes are specifically to address a scenario I'm very conscious of happening:

"I have a list of 5 things I want to use this text & icon block for, but I only see options for 1, 2, or 3 columns. I guess I'll just use a 3-column grid first, and then add a 2-column grid under that to make 5 items."

This then results in something like this:

The preferred scenario would be:

"I have a list of 5 things I want to use this text & icon block for, but I only see options for 1, 2, or 3 columns. Let me start off with this 3 column pattern and then just add two more items and have it do the layout for me."

This would then ensure we get this consistency:

Regardless if the preferred scenario can be achieved, we must avoid the first scenario where two patterns get mixed together and creates an illogical design.

[bd-viget]

@stephaniefois According to the specs, I'm only seeing Left and Center alignment variations, but it shows "Left or right aligned icon and text". I don't see an example of "right aligned icon and text" in the Figma. Should it be centered, right, or should we support all 3? Or is this a per-card alignment? Like, the first one is Left, the 2nd one is Center, and the 3rd one is Right?

[stephaniefois]

@stephaniefois According to the specs, I'm only seeing Left and Center alignment variations, but it shows "Left or right aligned icon and text". I don't see an example of "right aligned icon and text" in the Figma. Should it be centered, right, or should we support all 3? Or is this a per-card alignment? Like, the first one is Left, the 2nd one is Center, and the 3rd one is Right?

"right aligned" is a typo; that should say center aligned. There wouldn't be a right aligned option.