Cards
Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options. Please read the official Bootstrap documentation for a full list of options.
Do:
- Keep layout simple and straightforward
- Set card content to have clear expectations about purpose with clear actionable language
- Prioritized information so most important is first
- Use one primary call to action per card (preferably at bottom edge)
Don't:
- Overload with extraneous information or actions
- Use permissive language in content
- Use unnecessary words and articles in call to actions
Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis fugiat dolorem, expedita rem. Quis natus officiis asperiores rem ipsum, dolore cumque voluptatum iste vel alias, recusandae culpa hic pariatur quos.
Go somewhereCard header
Easily create a card header of a fixed height and populate it with text, buttons, or navigation.
Subtitle 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis fugiat dolorem, expedita rem. Quis natus officiis asperiores rem ipsum, dolore cumque voluptatum iste vel alias, recusandae culpa hic pariatur quos.
Subtitle 2
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis fugiat dolorem, expedita rem. Quis natus officiis asperiores rem ipsum, dolore cumque voluptatum iste vel alias, recusandae culpa hic pariatur quos.
Card footer
Easily create a card footer and populate it with text, buttons, or navigation.
Subtitle
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis fugiat dolorem, expedita rem. Quis natus officiis asperiores rem ipsum, dolore cumque voluptatum iste vel alias, recusandae culpa hic pariatur quos.
Enhance Acquia Design System only
A card used for promoting supplementary products and services.
Do:
- Use with or without a header image
- Use get started link for documentation pages
- Limit subtitle to 2 lines
- Limit body text to 4 lines
Don't:
- Use more than two badges
Search
Help your visitors find relevant site content faster
Acquia Search enables you to create a rich index of your website content and add faceted search refinement to help users find content faster and stay on your website longer.
Coming SoonIncluded with Any Subscription
Statcards Acquia Design System only
Create beautiful statcards with the default .card component and the combination of the Bootstrap components and icons.
Budget
$24,500 +3.5%Posts Acquia Design System only
A combination of the .card component, illustrations and margin utilities.
We released 2008 new versions of our theme to make the world a better place.
This is a true story and totally not made up. This is going to be better in the long run but for now this is the way it is.
Try it for freePricing Acquia Design System only
A .card component variation for a pricing option.
Basic plan
- Unlimited activity
- Direct messaging
- Members 10 members
- Admins No access
Ab Hadley
Looking good Dianna! I like the image grid on the left, but it feels like a lot to process and doesn't really show me what the product does? I think using a short looping video or something similar demo'ing the product might be better?