An official website of the United States government
Card (Vertical and Horizontal)
Best Practices
This card uses variations of the main theme on a neutral (white) background.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
This card uses variations of the same shade (gray) but with a bit of accent color (the action button).
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
This card uses variations of the main theme on a neutral (white) background.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
This card uses variations of the same shade (gray) but with a bit of accent color (the action button).
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vertical stacked card with section images on top. Accent border in primary color of main theme.
Vertical stacked card with section images on top. Accent border in secondary color of main theme.
Vertical stacked card with section images on top. Accent border in tertiary color of main theme.
Vertical stacked card with section images on top. Accent border in primary color of main theme.
Vertical stacked card with section images on top. Accent border in secondary color of main theme.
Vertical stacked card with section images on top. Accent border in tertiary color of main theme.
Vertical stacked card with section images on top. Accent border in primary color of main theme.
Vertical stacked card with section images on top. Accent border in secondary color of main theme.
Vertical stacked card with section images on top. Accent border in tertiary color of main theme.
Horizontal stacked card. Lightest gray background, no border.
Horizontal stacked card. Lightest gray background, no border.
Horizontal stacked card. Shadow, no standard border.
Horizontal stacked card. Shadow, no standard border.
Single-section vertical card with image on the bottom and a “more” button on the left. No section title.
Single-section vertical card with image on the bottom and a text action link on the left. No section title.
Single-section vertical card with image on the bottom and a “more” button on the right. No section title.
Vertical card with two stacked sections. Lightest gray content background with card header in secondary color of main theme. No standard border. Shadow effect.
Vertical card with two stacked sections. Lightest gray content background with card header in secondary color of main theme. No standard border. Shadow effect.
