Cards

Just a quick card layout for version 2. This is Grid+Flexbox. The grid layout allows you to have a a very fluid layout based on fr units and minmax. The older flexbox-based version is available, but this is a far better solution. This is not completely Internet Explorer friendly and I am working on that.

Grid + Card SCSS Flex Cards SCSS

Cards — 2 Wide

Card Title 1

This card uses the standard button in the action block.

Card Title 2

This card uses the the block style (card__action-block) and a border radius of 0 (radius-0) to extend the button across the action block and to pin it to the bottom.

For those required to support IE11, the flex-based (flex-cards flex-cards--2wide) version is available. Not as cool, but functional.

Card Title 1

This card uses the standard button in the action block.

Card Title 2

This card uses the the block style (card__action-block) and a border radius of 0 (radius-0) to extend the button across the action block and to pin it to the bottom.

See the Pen Cards - 2 Wide by Stephen Walker (@stphnwlkr) on CodePen.

Cards — 3 Wide

Card Title 1

Quisque orci mauris, pretium quis euismod sed, euismod a augue. Vestibulum pulvinar, elit nec cursus feugiat, purus lorem porta augue, vel ultricies lorem erat et.

Card Title 2

Quisque orci mauris, pretium quis euismod sed, euismod a augue. Vestibulum pulvinar, elit nec cursus feugiat, purus lorem porta augue, vel ultricies lorem erat et.

Card Title 3

Quisque orci mauris, pretium quis euismod sed, euismod a augue. Vestibulum pulvinar, elit nec cursus feugiat, purus lorem porta augue, vel ultricies lorem erat et.

Cards — 4 Wide

Card Title 1

Quisque orci mauris, pretium quis euismod sed, euismod a augue. Vestibulum pulvinar, elit nec cursus feugiat, purus lorem porta augue, vel ultricies lorem erat et.

Card Title 2

Quisque orci mauris, pretium quis euismod sed, euismod a augue. Vestibulum pulvinar, elit nec cursus feugiat, purus lorem porta augue, vel ultricies lorem erat et.

Card Title 3

Quisque orci mauris, pretium quis euismod sed, euismod a augue. Vestibulum pulvinar, elit nec cursus feugiat, purus lorem porta augue, vel ultricies lorem erat et.

Card Title 4

Quisque orci mauris, pretium quis euismod sed, euismod a augue. Vestibulum pulvinar, elit nec cursus feugiat, purus lorem porta augue, vel ultricies lorem erat et.

Cards — 5 Wide

Card Title 1

Quisque orci mauris, pretium quis euismod sed, euismod a augue. Vestibulum pulvinar, elit nec cursus feugiat, purus lorem porta augue, vel ultricies lorem erat et.

Card Title 2

Quisque orci mauris, pretium quis euismod sed, euismod a augue. Vestibulum pulvinar, elit nec cursus feugiat, purus lorem porta augue, vel ultricies lorem erat et.

Card Title 3

Quisque orci mauris, pretium quis euismod sed, euismod a augue. Vestibulum pulvinar, elit nec cursus feugiat, purus lorem porta augue, vel ultricies lorem erat et.

Card Title 4

Quisque orci mauris, pretium quis euismod sed, euismod a augue. Vestibulum pulvinar, elit nec cursus feugiat, purus lorem porta augue, vel ultricies lorem erat et.

Card Title 5

Quisque orci mauris, pretium quis euismod sed, euismod a augue. Vestibulum pulvinar, elit nec cursus feugiat, purus lorem porta augue, vel ultricies lorem erat et.

Page content was last updated: Friday, March 1, 2019