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.

[caw310]

Summary from DSC meeting:

• Not a candidate to bring to DS for now.
• Would prefer you stick to using the tags b/c it is something we have
• I would not make it a candidate to bring to DS for now.
• You can use in your application, but if we do add the warning one Jasmine shared, we would ask you to go back and update it.
• Will use this for version 2, then for version 3, will work with Jasmine to implement colored tags.

Link to notes: https://docs.google.com/document/d/1H8B989-PbHIqdrNZppsEGE-Oyxriuou3jryD0YRpJzA/edit?usp=sharing