NCIOCPL / ncids

NCI Design System
10 stars 5 forks source link

(#4383) prototyping imageless card group #1798

Open dlescarbeau opened 2 months ago

dlescarbeau commented 2 months ago

Closes #4383

NO MERGE

github-actions[bot] commented 2 months ago

Viewing Information

monika-jaeger commented 2 months ago

At 879 width and below, the cards start to have varying heights depending on how long the content is.

Screenshot 2024-07-19 at 12 43 50 PM
blilianyu commented 2 months ago

On mobile large 480 and down when it stacks, can we increase the spacing from 16px to 24px to be consistent with our feature card stacking?

Screenshot 2024-07-22 at 11 32 30 AM

And on desktop the spacing between rows, increase from 16px to 32px.

Screenshot 2024-07-22 at 11 35 18 AM
adrianacastaneda commented 2 months ago

@dlescarbeau not for the first imageless card but for the other groups of imageless cards, these needs titles (which will optional later on). Thank you!

blilianyu commented 2 months ago

@dlescarbeau spacing updates look great, thank you!

monika-jaeger commented 2 months ago

Also looks better to me!

andyvanavery31 commented 1 month ago

@dlescarbeau can you please update the second to last example to be a 2 card row, with 5 cards, so there are 3 total rows, the first two rows have two cards each, and the last row has one card?

dlescarbeau commented 1 month ago

@laurelthrash updated with usa-section rather than <hr/> for separating the groups of cards. imageless-card-html.txt imageless-card-scss.txt