Card Title
This card image has an anchor tag
Cards
Standard cards
Mailchimp Email Marketing
From $9.99 / month
Includes 4 iterations
20% Off First Design Project
Custom Designs
Be seen by customers at the very moment that they are searching on Google for the things you offer.
Notes:
You can optionally add an anchor tag, wrapping the .card-image class (See the first card for an example).
Cards share styles from the containers SCSS map.
Cards with figcaption overlay
Card title
This card shows an action on hover
Lorem ipsum dolor set amet some more jibberish...
20% Off First Design Project
Custom Designs
Be seen by customers at the very moment that they are searching on Google for the things you offer.
Card title
Lorem ipsum dolor set amet some more jibberish...
Mailchimp Email Marketing
From $9.99 / month
Notes:
The button used in the figcaption overlay has its own card specific class to adjust the styling.
The figcaption content is middle aligned and can house any text.
Cards with clickable figcaption
20% Off First Design Project
Custom Designs
Be seen by customers at the very moment that they are searching on Google for the things you offer.
Lorem ipsum dolor set amet some more jibberish...
Card title
This card shows an action on hover
Card title
Lorem ipsum dolor set amet some more jibberish.
Card title
This card shows an action on hover
Notes:
An anchor tag has been placed just inside the figcaption called .card-figcaption-button.
The other important change when using this style is to use a span tag for any button desired as there is no need for it to be a second anchor.
Cards with footers
Card Title
This card image has an anchor tag
Mailchimp Email Marketing
From $9.99 / month
20% Off First Design Project
Custom Designs
Be seen by customers at the very moment that they are searching on Google for the things you offer.
Notes:
Cards can also come with footers which are great for displaying actions.
Actions should come in the form of primary buttons and you should mark these
up with an additional CSS class of card-button.
It is suggested you only use 2 sizes of button,
the default button size and button--small. N.B. buttons anything other than
button--small will take full-width of the card.