# Vertical Cards ## expand\_more Purpose of the Vertical Cards ### Display multiple content items with equal weight This component presents structured content previews in a vertical card layout to support browsing and exploration. ![Vertical Cards component in layout](/sites/g/files/omnuum631/files/styles/hwp_1_1__480x480/public/2026-02/Vertical.png?itok=JiH1lGoW) *Example page context showing where a Vertical Component is typically used* ## ✓ Use this component when: - You need to present multiple content items of equal importance - Each item includes a title, optional image, and brief summary - Users are browsing rather than following a single primary message - A grid layout improves scanning ## ✕ Avoid using this component when: - You are highlighting a single primary feature (use 50/50 Card) - You need quick navigation links without summaries (use Button-Style Cards) - Content is dynamically generated from a content type (use List) - The page requires dense or sequential reading ## Choosing between similar components If your goal is… SortYour goalUse this componentDisplay multiple equal content previews Vertical Cards Feature one story, event, or initiative 50/50 Card Provide quick links or actions Button-Style Cards Display multiple content entries List ## Vertical Cards overview A Vertical Card is a vertical element that displays an image on top and information below. Vertical Cards can be used to provide high-level information with links for more details. Vertical Cards are often grouped and displayed as a grid of related content. ## Example: Showcasing related programs This example shows Vertical Cards used to present related programs. Each card includes an image and summary, allowing users to browse multiple options easily. [### U.S. Web Design System ](https://designsystem.digital.gov/)Design Systems The U.S. Web Design System (USWDS) is a toolkit of principles, guidance, and code designed to make it easier for government teams to build accessible, mobile-friendly government websites. ![Five multi-colored triangles arranged to form a circular shape.](/sites/g/files/omnuum631/files/styles/hwp_16_9__480x270/public/2025-02/USWDS.png?itok=t94FY-UT) [### Neurodiversity Design System ](https://neurodiversity.design)Design Systems The Neurodiversity Design System (NDS) focuses on neurodiversity and user experience design for Learning Management Systems. ![A collection of speech bubbles in various sizes.](/sites/g/files/omnuum631/files/styles/hwp_16_9__480x270/public/2025-02/NDS.png?itok=92WFfP7H) ## Elements of Vertical Cards SortElementPurposeImage Displays at the top of the card Eyebrow Describes the topic category Heading Describes the topic of the card and links to more details about the topic Text Provides descriptive details about the topic and links ## Guidance on using Vertical Cards - **Invite exploration.** Use a group of Vertical Cards to provide entry points to more details about topics and tasks. - **Summarize topics.** Provide a card for each topic, with an image, topic summary, and links to support exploration. - **Include high quality, engaging images.** Use images that fit well within the Vertical Card aspect ratio. - **Use concise, descriptive headings.** Provide headings that both describe the topic of the card and serve as descriptive link text. - **Provide a summary.** Provide a brief summary of the topic or task supported by the linked content. - **Optimize space.** Use in regions with sufficient space. Avoid using in regions that are narrow due to side navigation or other elements. ## Content guidelines **Write clear, descriptive headings** Headings should communicate the destination or topic clearly. **Avoid redundant information** Do not repeat metadata already visible elsewhere on the page. **Use meaningful imagery** Images should reinforce the content, not decorate it. ## Accessibility considerations - Ensure sufficient contrast between text and background - Provide descriptive alternative text for images - Maintain logical focus order for card links - Avoid relying solely on images to communicate meaning ## Vertical Cards features SortFeatureStandardOptimized color contrast Minimum Contrast Left-aligned headings and text Text Block Alignment Underlining used to indicate links Link Indicators See also:- [ Components ](/page-categories/components) ## Vertical Cards Showcase ### Vertical Cards with images expand\_more This example shows a Vertical Cards component with two cards, each with an image followed by an eyebrow, linked heading, and short text summary. [### U.S. Web Design System ](https://designsystem.digital.gov/)Design Systems The U.S. Web Design System (USWDS) is a toolkit of principles, guidance, and code designed to make it easier to build accessible, mobile-friendly government websites. ![Five multi-colored triangles arranged to form a circular shape.](/sites/g/files/omnuum631/files/styles/hwp_16_9__480x270/public/2025-02/USWDS.png?itok=t94FY-UT) [### Neurodiversity Design System ](https://neurodiversity.design)Design Systems The Neurodiversity Design System (NDS) focuses on neurodiversity and user experience design for Learning Management Systems. ![A collection of speech bubbles in various sizes.](/sites/g/files/omnuum631/files/styles/hwp_16_9__480x270/public/2025-02/NDS.png?itok=92WFfP7H) ### Vertical Cards with text expand\_more This example shows the Vertical Cards component without images. Each of the two cards has an eyebrow, linked heading, and short text summary. [### U.S. Web Design System ](https://designsystem.digital.gov/)Design Systems The U.S. Web Design System (USWDS) is a toolkit of principles, guidance, and code designed to make it easier to build accessible, mobile-friendly government websites. [### Neurodiversity Design System ](https://neurodiversity.design)Design Systems The Neurodiversity Design System (NDS) focuses on neurodiversity and user experience design for Learning Management Systems.