Icon row paragraph

[magjarvis]

• [x] Altgeld text for callout on gray background
• [x] 60 px padding inside top of paragraph total
• [x] 75 px padding inside bottom of paragraph total
• [x] vertical spacing between title and icons should be 20 px.
• [x] on mobile - need more vertical spacing between each icon set + 10px
• [x] need wrapping on tablet and desktop
• [x] Database backend: Remove Alignment option - Title should only center, remove option for text align left.
• [x] Database backend: Remove Spacing above paragraph

[github-actions[bot]]

Branch feature/magjarvis/issue-149-icon-row-paragraph created!

[mwllr]

Add field for spacing before paragraph: no, small, med, lg, xlg.. See Call to Action Narrow for example already added.

[mwllr]

• [ ] mobile stacking of icons need more space between icons.

[mwllr]

• [ ] Need white callout text on the gray background. Orange text works on white and gray backgrounds.
• [ ] set margins to max out at 1200.
• [ ] stacking should occur when we have more than 5 or so icons... see: https://staging.ansc.illinois.edu/testing/test-icon-row

[mwllr]

Need to see white on gray, then look at link of text color on gray background. Is the med blue okay? do we want something different?

[wrg20]

Wrapping of icons can be done by changing these rules on these classes.

[lizshalley]

add FAQ icon: https://toolkit.marketing.web.illinois.edu/icons/

[magjarvis]

this is how 7 icons are wrapping if we add flex-wrap, 6 icons wrap to three rows of two. is that what we still want to do? Or should we limit the number of icons per paragraph?

[lizshalley]

my vote would be to limit to 5, @mwllr?

[magjarvis]

White text on gray background fails all accessibility checks for contrast. We could do illini blue callout text? Or Altgeld orange passes AA standards for the callout text if we want to use that.

[magjarvis]

Altgeld callout text

[magjarvis]

my vote would be to limit to 5, @mwllr?

So, here is two separate icon row paragraphs on top of each other. top row 5, bottom row 2. With this option you also have the additional option of adding spacing between the two rows

[magjarvis]

Obviously, it would look better to do 4 on top of 3, but it would be up to the user, so we might end up with something like the above

[lizshalley]

I was thinking 5 max... as in no more than 5 total items per paragraph type. that's probably a design group or @mwllr decision.

[mwllr]

• [x] Altgeld text for callout on gray background
• [x] 60 px padding inside top of paragraph
• [x] 75 px padding inside bottom of paragraph
• [x] spacing between title and icons should be 20 px.
• [x] on mobile - need more vertical spacing between each icon set + 10px
• [x] need wrapping on tablet and desktop
• [x] Database backend: Title should only center, remove option for text align left.
• [x] Database backend: Remove Spacing above paragraph

[mwllr]

@magjarvis - ready for you to work some magic!

[wrg20]

Add switch / case, for icon row classes and flex-box.

[trubach]

@wrg20, @mwllr - I just merged #421 from Maggie. Can you use the sandbox site to verify everything is OK and close this issue if it is? The sandbox won't reflect these changes until tomorrow (9/25). Otherwise, maybe add some more tasks to the list of checkboxes above.

[mwllr]

Awesome job Maggie! I believe we are good to go!