Getting startedFoundationsUtilitiesComponentsReleasesSupportGetting startedFoundationsUtilitiesComponentsReleasesComponent StatusAccordion GroupAccordionCollapseBadgeButtonButton DropdownCardStatus CardContentData GridData Grid Table HeaderDate PickerDate Picker InputDate Range PickerDate Range Picker ButtonInputSelectText AreaCheckboxCheckbox GroupRadio ButtonRadio Button GroupIconIcon LibraryListList Parent ItemList ItemList HeaderHeaderMobile SubheaderFooterFooter ItemSidebarAlertToastToast GroupDialogModalPanelPopoverPaginationSpinnerTabsTab GroupTabTab Panel GroupTab PanelToggle

Component Content

This component is used to add space around an element. Spacing is set using spacing variables.

Example

placeholder image
Duis aute irure dolor in reprehenderit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dignissim.
Duis aute irure dolor in reprehenderit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dignissim.
<div class="row row-cols-1 row-cols-sm-2">
<div class="col mb-1">
    <som-card>
    <img src="https://placehold.jp/30/d0d0d0/707070/320x180.png?text=image" alt="placeholder image" />
    <som-content padding="1_5">
        <div class="text-type-3-bold mb-1">Duis aute irure dolor in reprehenderit.</div>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dignissim.
    </som-content>
    </som-card>
</div>
<div class="col mb-1">
    <som-card>
    <som-content padding="4">
        <div class="text-type-5-bold mb-1">Duis aute irure dolor in reprehenderit.</div>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dignissim.
    </som-content>
    </som-card>
</div>
</div>

Props

AttrTypeDefaultDocs

padding

string

This property controls the amount of padding added to the card content.

Parts

NameDocs

content

This part is the full content block.

Styles

NameDocs

--padding-bottom

This style control the bottom padding of content container.

--padding-left

This style control the left padding of content container.

--padding-right

This style control the right padding of content container.

--padding-top

This style control the top padding of content container.

Healthy

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

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.

Open source