The Custom Card (Vertical) component is a flexible card layout that allows authors to display information with optional elements, including a title, subtitle, image (either as an avatar or a standard image), body text, and a call-to-action link. Authors can adjust options such as the background color and toggle a border, though changing the background color does not automatically adjust text color, which may affect readability in some cases. This component has since been largely replaced by the Updated Default Card, which offers improved functionality and ease of use. However, the Custom Card (Vertical) remains useful for layouts requiring an avatar-style image to the left of the text, a feature unique to this older component.
Examples
This is some body text
This is some body text
Content Options
For the Custom Card (Vertical) component, it’s important to remember that simply adding content (like a title, image, or CTA) does not automatically make it visible on the card. Authors must also enable each desired element within the “Layout and Style” tab under options such as “Show card header,” “Show CTA,” and “Show image.” This extra step can be unintuitive, so double-check that all necessary toggles are activated to display the content as expected.
This is some body text.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Layout and Styling Options
The Custom Card (Vertical) component offers a few styling options to help customize the card’s appearance. Authors can choose to display an image at the top or bottom of the card, enable a border, and select a custom background color. Note that the border can be difficult to see against certain background colors, so consider this when enabling it. Additionally, since the text colors do not automatically adjust to complement the background color, please be mindful of readability when choosing a background; high-contrast colors are often best for clear, accessible text.
Image Placement
Background Colors
Border
Usage
Do
- Enable the elements you want to display in the “Layout and Style” tab, like the header, CTA, or image placement.
- Choose a background color that ensures the text remains easily readable; light backgrounds work best with dark text and vice versa.
- Use the avatar style image on the left side only if it adds value or context to the card’s message.
- Keep the card title and subtitle concise to maintain a clean and balanced layout.
- Include body text that is straightforward and directly supports the card’s main purpose.
- Make the CTA text clear and actionable, so readers know exactly what to expect.
- Use this component only when you need the unique left-aligned avatar style; otherwise, consider using the Updated Default Card.
Don't
- Avoid cluttering the card with too much text; aim for brevity to keep the card visually appealing.
- Refrain from using very low-contrast background and text color combinations, as this can make the content hard to read.
- Skip using the avatar image on the left if it doesn’t add specific value or context, as it may take up space unnecessarily.
- Avoid placing an image at both the top and bottom of the card; this can make the design feel unbalanced and visually heavy.
- Do not rely on the border alone to define the card, especially if the background color makes the border hard to see.
- Avoid using a CTA that’s vague or unrelated to the card’s content; keep it relevant and direct.
- Don’t choose a background color based on style preferences alone; consider readability as a top priority.
- Resist the urge to add every optional feature just because it’s available; focus on the essentials to keep the card clear.
- Avoid using this component if the Updated Default Card offers a better layout for your needs.
Accessibility
- Ensure that you provide suitable alt text for the images on your cards. Alt text for images enhances web accessibility by offering a textual description for screen readers used by visually impaired users. See the a11yproject website for more information about writing alt text for images.
- Unlike some newer components, the text colors do not automatically adjust to complement the background color, please be mindful of readability when choosing a background; high-contrast colors are often best for clear, accessible text.