Go to AAD Home
Donate For AAD Members Search

Go to AAD Home


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: Title character limit is 59 with spaces. The description field limit is 242 characters with spaces.

  • Image sizes for cards: The goal is to keep the cards consistent. Recommended image ratio is 3:2. The pixel dimensions and the subsequent file size depends on the context and the type of image. Typically 800 x 533 px works but if you have an image that needs to be better quality or a simple vector image that doesn't need the high resolution rendering, adjust accordingly. Note that in mobile each card will take the full width of the mobile screen. Read more about images on the web here.

  • 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

enroll in DataDerm icon
Enroll in DataDerm

Review the 3-step process and enroll in DataDerm today. Our CMS-certified registry supports your reporting success.

dataderm dashboard icon
DataDerm dashboard

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.

Cards in mobile example image
Notice how the card image takes up the entire width of the mobile screen

Vertical cards

DataDerm icon
AAD's DataDerm

DataDerm is a clinical data registry — created by dermatologists, for dermatologists — to transform your practice and elevate the specialty.

Coding resource center icon
Coding resources

Find practical tips about common dermatological coding issues, including biopsies, excisions, E/M, and modifiers.

recommended vendors icon
Recommended vendors

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

Cards can have buttons or a text link to highlight the action

Lorem ipsum dolor sit amet

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.

Lorem ipsum dolor sit amet

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Extra small cards for showing many related references.

How to apply sunscreen illustration
How to apply sunscreen
Is your sunscreen really protecting you?
Is your sunscreen really protecting you?
What are the best ingredients to look for in sunscreen?
What are the best ingredients to look for in sunscreen?
Is misinformation increasing your skin cancer risk?
Prevent skin cancer
Prevent skin cancer
Sunscreen FAQ

Extra small cards without images

My profile

Notification center

Pay your Dues

Claim CME

Membership benefits

Life membership

Disclosure of outside interests

My purchases - AAD Store

My Learning

More examples: