Redoes much of our cards in flexbox. Nothing huge changes here, though some card defaults have been updated. It's also worth noting that creating columns with flexbox isn't super great. I've stuck with CSS column
s there for the time being, but added more vars for folks to customize,
This PR also includes the new width/height utils from #21402 so I can size columns.
Here's what's changed with cards:
-
Cards are now
display: flex
withflex-direction: column
, though this doesn't affect the layout of the component from it's previous value,block
. However, if you used.card
and.card-block
on the same element, you may encounter some visual bugs from the flexbox changes. To fix, separate those classes across two different HTML elements (as done in our docs). -
Cards are still 100% by default, which is now clarified in our docs with clearer mentions of sizing and better examples across the board.
-
Cards no longer have a default bottom margin. Use spacing utilities as you need to space them out. Closes #21073 (closed).
-
Footers in card decks and groups now align themselves to the bottom across cards thanks to some
flex-grow
on.card-blocks
. For some card layouts, you may need to set this yourself, and to support you in that endeavor, we likely need some additional flex utilities. That'll come in future updates. Fixes #19381 (closed). -
Revamped the card deck margins to avoid some unneeded negative margins. Unlike the grid system, which uses
padding
for gutters, the card deck usesmargin
. As such, we can conditionally remove some gutters without affecting the display of the card itself. So, now we only applymargin-left
to non-:first-child
cards andmargin-right
to non-:last-child
cards. Fixes #19883 (closed) and #21300 (closed). -
Card docs have been overhauled quite extensively to better document all the supported content types, demonstrate various layout options, better group related content, and more.
-
Card columns have been updated with new and improved variables.
Future iterations of the card component will focus on expanding layout options (horizontal mode, more/better column support, responsive decks and groups, etc). That's not being addressed here though for scope reasons.