Component Card

Cards are containers that group related content and information together.

Example

Card with image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi suscipit quam eget odio sollicitudin ullamcorper aliquam ac magna varius.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.Learn more

Lorem ipsum dolor sit amet consectetur adipiscing.

View code

<div class="row row-cols-1 row-cols-sm-2">
  <div class="col mb-1">
    <som-card color="white">
      <img src="https://placehold.jp/30/d0d0d0/707070/320x180.png?text=image" alt="placeholder image" />
      <som-content>
        <h2 className='text-type-2'>Card with image</h2>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi suscipit quam eget odio sollicitudin ullamcorper aliquam ac magna varius.
      </som-content>
    </som-card>
  </div>
  <div class="col mb-1">
    <som-card class="mb-1" color="white">
      <som-content>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        <a class="cta-link" href="#">Learn more</a>
      </som-content>
    </som-card>
    <som-card class="mb-1" color="success">
      <som-content>Lorem ipsum dolor sit amet consectetur adipiscing.</som-content>
    </som-card>
    <som-card color="danger">
      <som-content>Lorem ipsum dolor sit amet consectetur adipiscing.</som-content>
    </som-card>
  </div>  
</div>

CSS

Additional styling can be added to a card using .cta-link. This utility class is used to style a link at the bottom of the card. The link color will inherit the card color property.

Props

Attr	Type	Default	Docs
button-aria-label	string		This property can be used to set the ARIA label associated with this card (for screen readers).
color	"danger" \| "info" \| "light-gray" \| "success" \| "transparent" \| "warning" \| "white"	'white'	This property will determine the color applied to the card background and border
match-height	boolean	false	This boolean is used to add 100% height to the card which is helpful when you want the card height to expand to match the height of surrounding elements.
type	"button" \| "default"	'default'	The type of card.

Healthy

Healthy content is accurate and represents our most up-to-date recommendations.

Get in touch

Do you have an idea, or want to help us improve this page? Reach out to us via email.

DTMB-DG-Support@michigan.gov

Need help? Visit our Support page to learn how to get assistance, troubleshoot issues, and connect with the team.

Get in touch

Do you have an idea, or want to help us improve this page? Reach out to us via email.

DTMB-DG-Support@michigan.gov

Need help? Visit our Support page to learn how to get assistance, troubleshoot issues, and connect with the team.