Card Layout Demo
6 Card Layout
- On small screens cards stack vertically and span full container width.
- On medium sized screens cards span half width.
- On large screens cards span 1 third width.
This example headline has 40 characters
A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.
This example headline has 40 characters
A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.
This example headline has 40 characters
A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.
This example headline has 40 characters
A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.
This example headline has 40 characters
A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.
This example headline has 40 characters
A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.
5 Card Hero Layout
- On small screens cards stack vertically and span full container width.
- On medium sized screens the 1st card spans full width, and the remaining 4 cards span half widths.
- On large screens the 1st card spans 2 thirds, and the remaining cards span 1 third.
This example headline has 40 characters
A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.
This example headline has 40 characters
A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.
This example headline has 40 characters
A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.
This example headline has 40 characters
A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.
This example headline has 40 characters
A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.
4 Card Layout
- On small screens cards stack vertically and span full container width.
- On medium sized screens cards span half width.
- On large screens cards span quarter widths.
2 Card Layout
- On small screens cards stack vertically and span full container width.
- On medium to large sized screens cards span half width.
This example headline has 40 characters
A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.
A short inline text cta
This example headline has 40 characters
A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.
A short inline text cta
2 Card Layout - dark mode
- To use dark mode either place the `.mzp-t-dark` class on the element that contains the `.mzp-c-card` class or place the card within a container that is using the dark mode class.
This example headline has 40 characters
A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.
This example headline has 40 characters
A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.