Cards
Cards are used as an introduction and a link to more content
Cards are always an introduction to a bigger piece of content so often used in landing pages.
Title and text have to be very short. Our cards have fixed heights, so that they all look consistent on the page.
They are almost always used in multiples as they form a responsive grid.
Can be used as a directional call to action (CTA)
The image and the header in the card are links
Cards are a great way to add related resources to the bottom of the page.
Cards don't necessarily need images. Especially when the subject matter is extremely technical or clinical and the imagery would not bring any value to the content.
Examples of cards
Horizontal cards
Review the 3-step process and enroll in DataDerm today. Our CMS-certified registry supports your reporting success.
Already enrolled in DataDerm? Access your dashboard. See real-time information on your reporting progress.
Cards in mobile
Cards are a component that was developed for one main reason: To make the pages mobile friendly. When adding pages with cards, always check the mobile view, as most of our users are using mobile. Notice that the images in all types of cards now take up the entire width of the mobile screen.
Vertical cards
DataDerm is a clinical data registry — created by dermatologists, for dermatologists — to transform your practice and elevate the specialty.
Find practical tips about common dermatological coding issues, including biopsies, excisions, E/M, and modifiers.
The Academy's preferred providers offer members practical, money-saving solutions for personal and professional stability.
Horizontal cards with vertical image, such as a headshot
Dr. Margaret Smith
Cards can have buttons or a text link to highlight the action
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Extra small cards for showing many related references.
More examples:
https://www.aad.org/membership
https://www.aad.org/public/cosmetic