Skip to content
GitLab

v4: Flex cards

Merged Mark Otto requested to merge flex-cards into v4-dev

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 columns 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 with flex-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 uses margin. As such, we can conditionally remove some gutters without affecting the display of the card itself. So, now we only apply margin-left to non-:first-child cards and margin-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.