# Button-Style Cards ## expand\_more Purpose of the Button-Style Cards ### Provide quick, prominent links to related content or tasks This component helps surface key destinations in a grid layout, supporting scannability and clear calls to action. ![Button-style Card in page layout](/sites/g/files/omnuum631/files/styles/hwp_1_1__480x480/public/2026-02/Button%20Style%20Card.png?itok=TPEpInbp) *Example page context showing where a Button-Style Card is typically used* ## ✓ Use this component when: - You need to provide **quick access to related links** - Users are navigating between **tasks, journeys, or resources** - Links are of **equal importance** - A grid layout improves clarity and scanning ## ✕ Avoid using this component when: - You are highlighting a single primary story (use 50/50 Card instead) - Links require long descriptions or detailed explanation - Content needs to be read sequentially - You need dense, text-heavy content ## Choosing between similar components If your goal is… SortYour goalUse this componentProvide quick links to related content Button-Style Cards Highlight one primary feature 50/50 Card Display multiple content previews with summaries Vertical Cards Provide a simple inline call to action Call to Action Links ## Button-Style Cards overview A Button-Style Card is a clickable card that displays an icon or image, link, and short description. Button-Style Cards are often grouped and displayed as a grid to provide prominent links to common resources. ## Example: Providing quick access to key resources This example shows Button-Style Cards used to provide quick access to related resources. Each card represents a destination of equal importance, allowing users to scan and select what they need. accessibility\_new [### Harvard’s Digital Accessibility​ Website ](https://accessibility.huit.harvard.edu/)Resources and guidelines to ensure digital content and technology at Harvard are accessible to all users, including people with disabilities. edit [### U.S. Plain Language Guidelines ](https://www.plainlanguage.gov/guidelines/)Guidance and resources for creating clear, user-friendly content, with guiding principles, practical guidelines, and testing techniques. ## Elements of Button-Style Cards SortElementPurposeIcon or image Displays at the top of the card Heading Describes the topic of the card and links to more details about the topic Text Provides descriptive details about the topic ## Guidance on using Button-Style Cards - **Group related links.** Use a group of Button-Style Cards to provide links to related user journeys, tasks, or topics. - **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. - **Use relevant images.** Use icons and images that signpost the source or topic of the linked content as well as provide visual interest. ## Content guidelines **Write clear, descriptive headings** Headings should clearly communicate the destination or task. **Use brief supporting text** Summaries should provide context without overwhelming the layout. **Avoid redundancy** Do not repeat information already conveyed in headings or icons. **Ensure link clarity** Card text and visuals should make the destination obvious before clicking. ## Accessibility considerations - Ensure sufficient color contrast between text and background - Use descriptive headings that function as clear link text - Avoid relying solely on icons to communicate meaning - Maintain logical focus order for keyboard navigation ## Button-Style Cards features SortFeatureStandardOptimized color contrast Minimum Contrast Heading links with underlines Link Indicators Heading used as card control name Control Names Left-aligned headings and text Text Block Alignment See also:- [ Components ](/page-categories/components) ## Button-Style Cards Showcase ### Button-Style Cards with centered icons expand\_more This example shows the Button-Style Cards component with two linked cards, each with a centered filled icon followed by a heading and short text summary. accessibility\_new [#### Harvard’s Digital Accessibility​ Website ](https://accessibility.huit.harvard.edu)Resources and guidelines to ensure digital content and technology at Harvard are accessible to all users, including people with disabilities. edit [#### U.S. Plain Language Guidelines ](https://www.plainlanguage.gov/guidelines/)Guidance and resources for creating clear, user-friendly content, with guiding principles, practical guidelines, and testing techniques. ### Button-Style Cards with images expand\_more This example shows the Button-Style Cards component with two linked cards, each with an image followed by a heading and short text summary. ![](/sites/g/files/omnuum631/files/styles/hwp_1_1__360x360_scale/public/2025-01/thumb_das.png?itok=2MxudNXe) [#### Harvard’s Digital Accessibility​ Website ](https://accessibility.huit.harvard.edu)Resources and guidelines to ensure digital content and technology at Harvard are accessible to all users, including people with disabilities. ![](/sites/g/files/omnuum631/files/styles/hwp_1_1__360x360_scale/public/2025-01/Plain%20Language%20logo_0.png?itok=ohN1H96e) [#### U.S. Plain Language Guidelines ](https://www.plainlanguage.gov/guidelines/)Guidance and resources for creating clear, user-friendly content, with guiding principles, practical guidelines, and testing techniques. ### Button-Style Cards with images and no summary text expand\_more This example shows the Button-Style Cards component with two linked cards, each with an image followed by a heading. ![](/sites/g/files/omnuum631/files/styles/hwp_1_1__360x360_scale/public/2025-01/thumb_das.png?itok=2MxudNXe) [#### Harvard’s Digital Accessibility​ Website ](https://accessibility.huit.harvard.edu) ![](/sites/g/files/omnuum631/files/styles/hwp_1_1__360x360_scale/public/2025-01/Plain%20Language%20logo_0.png?itok=ohN1H96e) [#### U.S. Plain Language Guidelines ](https://www.plainlanguage.gov/guidelines/)