Experimental Design - Top Banners for Card Component

[cora-goldston-bah]

What

We propose adding an option for a top banner on the existing Card component.

Purpose

The banner will allow product teams to emphasize certain cards in a group, when a tag or other solution is not sufficient

Usage

Time-sensitive information: For our product, we'd like to use this banner to clearly indicate if a benefit Card is time-sensitive (i.e., if Veterans or transitioning service members need to apply for the benefit within a certain timeframe). We are already using the Tag component to label cards by benefit type. Even if we used the Tags to indicate time sensitivity, the Tag would not provide enough emphasis to pull the user's attention to the time-sensitive benefits.

Other uses: For other products, the top banner could be used to communicate other information. Examples include stating whether a benefit requires an application, differentiating VA benefits from resources, or indicating whether a Veteran needs a disability rating to qualify for a benefit.

Behavior

The banner would be visible on the card and could be read aloud by screen readers, but would not have any interactivity on its own. We do not anticipate anything happening when users select or click on the banner.

Examples

Example card with the top banner

Accessibility

We will need to work with the VADS and Accessibility Teams to ensure the banner can be read aloud by screen readers. We will also confer with the Accessibility Team about any implications for other assistive technologies.

Guidance

Use this feature only when tags, headers, or other existing Card features will not sufficiently differentiate your cards.

Collaboration Cycle Ticket

Link to our ticket

Your team

Transition Experience

Research (optional)

We are currently conducting user testing (through November 13th) on a Figma prototype with Veterans and transitioning service members. We are asking participants for their feedback on our proposed design.

Code (optional)

N/A - we have not written any code yet.

Next steps

You may present your work to the Design System Council at an upcoming meeting. If you do not or cannot attend the Design Council Meeting, you can opt to get an asynchronous approval.

Submit requests to join an upcoming Design System Council meeting in #platform-design-system.

During the meeting, the Design System Council Working Group will evaluate the request and make a decision.

If your request is approved, you can add your component or pattern to the system. If you have any questions on how to add your component or pattern to the system, please reach out to the Design System Team at #platform-design-system.

[cora-goldston-bah]

Tagging @nkontrabecki and @RonnieYoung-UX for awareness.