Examples
Basic card
Title
Visit ten places on our planet that are undergoing the biggest changes today.
+mdc-card
+mdc-card__header('Title')
// or
// +mdc-card__header(title='Title')
+mdc-card__section()(secondary)
+mdc-typography('Visit ten places on our planet that are undergoing the biggest changes today.')(type='body2' noMargin)Card with a primary action
Title
Visit ten places on our planet that are undergoing the biggest changes today.
+mdc-card
+mdc-card__primary-action
+mdc-card__header('Title')
+mdc-card__section()(secondary)
+mdc-typography('Visit ten places on our planet that are undergoing the biggest changes today.')(type='body2' noMargin)Card with subtitle
Title
Subtitle
Visit ten places on our planet that are undergoing the biggest changes today.
+mdc-card
+mdc-card__header('Title', 'Subtitle')
// or
// +mdc-card__header(title='Title' subtitle='Subtitle')
+mdc-card__section()(secondary)
+mdc-typography('Visit ten places on our planet that are undergoing the biggest changes today.')(type='body2' noMargin)Card with overline
Overline
Title
Subtitle
Visit ten places on our planet that are undergoing the biggest changes today.
+mdc-card
+mdc-card__header('Title', 'Subtitle', 'Overline')
// or
// +mdc-card__header(
// overline='Overline'
// title='Title'
// subtitle='Subtitle'
// )
+mdc-card__section()(secondary)
+mdc-typography('Visit ten places on our planet that are undergoing the biggest changes today.')(type='body2' noMargin)Card with a header graphic
star
Title
Visit ten places on our planet that are undergoing the biggest changes today.
+mdc-card
+mdc-card__header(
title='Title'
icon='star'
)
+mdc-card__section()(secondary)
+mdc-typography('Visit ten places on our planet that are undergoing the biggest changes today.')(type='body2' noMargin)Card with a header action
Title
Visit ten places on our planet that are undergoing the biggest changes today.
+mdc-card
+mdc-card__header('Title')(withActions)
+mdc-card__header__actions
+mdc-card__icon('star')
+mdc-card__section()(secondary)
+mdc-typography('Visit ten places on our planet that are undergoing the biggest changes today.')(type='body2' noMargin)Card with buttons
Title
Visit ten places on our planet that are undergoing the biggest changes today.
+mdc-card
+mdc-card__header('Title')
+mdc-card__section()(secondary)
+mdc-typography('Visit ten places on our planet that are undergoing the biggest changes today.')(type='body2' noMargin)
+mdc-card__actions
+mdc-card__button('Button')
+mdc-card__button('Button')Card with icons
Title
Visit ten places on our planet that are undergoing the biggest changes today.
+mdc-card
+mdc-card__header('Title')
+mdc-card__section()(secondary)
+mdc-typography('Visit ten places on our planet that are undergoing the biggest changes today.')(type='body2' noMargin)
+mdc-card__actions
+mdc-card__icon('star')
+mdc-card__icon('favorite')Card with buttons and icons
Title
Visit ten places on our planet that are undergoing the biggest changes today.
+mdc-card
+mdc-card__header('Title')
+mdc-card__section()(secondary)
+mdc-typography('Visit ten places on our planet that are undergoing the biggest changes today.')(type='body2' noMargin)
+mdc-card__actions
+mdc-card__action-buttons
+mdc-card__button('Button')
+mdc-card__button('Button')
+mdc-card__action-icons
+mdc-card__icon('star')
+mdc-card__icon('favorite')