Cards are a versatile type of microcontent designed to group and showcase your content in clean, modular blocks. Adapt content to any layout using flexible 1, 2, 3, or 4-column grids that automatically stack into organized rows as you build out your page. Cards offer light and dark display variations, and you can tailor each card using optional images, formatted text, and call-to-action buttons. The only required field is a Title—which can be hidden if you want to let your visuals and text take center stage. Sample column layouts are noted below.
SIngle Column Card Collection
This collection displays a series of single column cards, with and without the various content options.
Single Column Card Text Only
Cras tellus orci
Suspendisse vestibulum enim eget urna elementum congue. Cras tellus orci, facilisis id ante sit amet, auctor efficitur justo. In a leo id diam porta bibendum eu id mi. Nullam elementum odio vel odio blandit commodo vel ac diam. Suspendisse egestas eros a elit mollis, nec hendrerit diam ultrices. Praesent commodo risus facilisis tellus pretium dignissim. Praesent semper varius maximus. Maecenas sagittis interdum odio, quis sollicitudin neque vulputate sed.
Phasellus eu lorem in purus finibus mattis. Pellentesque eu justo turpis. Nulla aliquam quis mi vitae auctor. Aliquam erat volutpat. Nullam non magna leo. Suspendisse potenti. Cras at ultrices turpis, non vulputate nisi. Sed ut sodales nibh, sit amet imperdiet tortor.
Single Column Card with Image and Button
In hac habitasse platea dictumst. Quisque volutpat sagittis gravida. Donec pharetra, elit a finibus pellentesque, enim lorem molestie erat, at aliquam ante tortor vitae arcu. Donec volutpat accumsan feugiat. Morbi vel libero sed enim convallis ultricies. Mauris mi nisi, maximus ut nibh in, mollis mattis massa. Proin rutrum metus eu pulvinar gravida. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla ornare sit amet lorem sit amet rutrum.
Two Column Card Collection
A sample of cards in a two column layout.
Two Column Sample: Column 1
Quisque efficitur
Enim libero. Suspendisse in consectetur orci. Phasellus ante purus, feugiat eu nunc a, tristique interdum nunc. Nullam urna ligula, placerat ut quam id, consequat dapibus nisi. Donec mauris sem, malesuada quis leo et, interdum tincidunt orci. Nullam luctus tincidunt odio, ac semper nunc vehicula nec.
Cras vitae dapibus ipsum, id facilisis nunc. Ut elementum, magna faucibus feugiat ornare, dolor nulla vestibulum neque, vitae dignissim eros sapien sed enim. Duis ut tortor nisl. Aliquam in risus quis urna mollis blandit.
Two Column Sample: Column 2
Sed pellentesque
Sed pellentesque pretium venenatis.
- Cras orci ante,
- condimentum id
- nunc non
bibendum scelerisque odio. Etiam molestie lacinia risus, ac condimentum nisi egestas eu. Nam at consectetur urna. Duis malesuada lorem auctor, elementum ante vitae, ullamcorper quam. Cras lobortis at sapien at ullamcorper. Nunc mattis vel odio a auctor.
Three Column Card Collection
A sample of a three column card layout. Three and four column card collects display in the wider column view. Cards will also stack into rows as more items are added.
1:3 Three Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sodales, nisi nec ullamcorper euismod, mauris nisl pellentesque tellus, quis finibus ex ligula eget odio.
2:3 Three Column
Suspendisse vestibulum enim eget urna elementum congue. Cras tellus orci, facilisis id ante sit amet, auctor efficitur justo. In a leo id diam porta bibendum eu id mi.
3:3 Three Column
Cras orci ante, condimentum id nunc non, bibendum scelerisque odio. Etiam molestie lacinia risus, ac condimentum nisi egestas eu. Nam at consectetur urna.
1:3 Row 2
Suspendisse vestibulum enim eget urna elementum congue. Cras tellus orci, facilisis id ante sit amet, auctor efficitur justo. In a leo id diam porta bibendum eu id mi.
2:3 Row 2
Cras orci ante, condimentum id nunc non, bibendum scelerisque odio. Etiam molestie lacinia risus, ac condimentum nisi egestas eu. Nam at consectetur urna.
2:3 Row 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sodales, nisi nec ullamcorper euismod, mauris nisl pellentesque tellus, quis finibus ex ligula eget odio.
Four Column Card Collection
Four column sample card layout. Like the three column view, this view uses the wider display format.
4 Column 1:4
Nam sed velit ac lacus faucibus congue et at massa. Curabitur posuere eget purus non consequat. In accumsan risus eu mauris fermentum, eu dictum arcu egestas.
4 Column 2:4
Mauris mi nisi, maximus ut nibh in, mollis mattis massa. Proin rutrum metus eu pulvinar gravida.
4 Column 3:4
Mauris mi nisi, maximus ut nibh in, mollis mattis massa. Proin rutrum metus eu pulvinar gravida.
4 Column 4:4
Phasellus eu lorem in purus finibus mattis. Pellentesque eu justo turpis. Nulla aliquam quis mi vitae auctor. Aliquam erat volutpat.
Row 2 1:4
Duis ut tortor nisl. Aliquam in risus quis urna mollis blandit. Quisque sed magna ac dui pharetra auctor.
Row 2 3:4
Duis malesuada lorem auctor, elementum ante vitae, ullamcorper quam. Cras lobortis at sapien at ullamcorper. Nunc mattis vel odio a auctor. Phasellus ac bibendum odio.
Row 2 3:4
hasellus ante purus, feugiat eu nunc a, tristique interdum nunc. Nullam urna ligula, placerat ut quam id, consequat dapibus nisi. Donec mauris sem, malesuada quis leo et,
Row 2 4:4
Phasellus ac bibendum odio. Nam sed velit ac lacus faucibus congue et at massa. Curabitur posuere eget purus non consequat. In accumsan risus eu mauris fermentum.