Component Status Card

A status card is a component with a color, which can represent different things, attached to it. The container can change size depending on need.

Get the UI kit

Example

Lorem ipsum dolor sit amet, consectetur.

View code

<som-status-card class="mb-1" color="gray">
  <som-content>Lorem ipsum dolor sit amet, consectetur.</som-content>
</som-status-card>
<som-status-card class="mb-1" color="primary">
  <som-content>Lorem ipsum dolor sit amet, consectetur.</som-content>
</som-status-card>
<som-status-card class="mb-1" color="danger">
  <som-content>Lorem ipsum dolor sit amet, consectetur.</som-content>
</som-status-card>

Props

Attr	Type	Default	Docs
button-aria-label	string		This property can be used to set the ARIA label associated with this status card (for screen readers).
color	"danger" \| "gray" \| "info" \| "primary" \| "success" \| "warning"	'gray'	This property is the color of the status indicator.
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 status 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.