Specifications

[Variant] Accented

Overview

The Card accented variant emerges as a vibrant alternative within the Dimsum Design System, enhancing the traditional Card component with a touch of branding to draw user attention effectively.

This variant leverages a distinctive branded border, setting it apart from standard Cards.

Its purpose is to signal a higher level of importance or to demarcate specific content that requires emphasis, making it an excellent tool for guiding user focus and enhancing the informational hierarchy within a user interface.

By maintaining the foundational design elements of the standard Card, the accented variant offers familiarity while adding an element of distinction that captures and retains user engagement.

decision tree

Design

Box Model Specifications

The design choices for the Card accented variant are carefully selected to align with the standard Card's flexibility and responsiveness, with the addition of unique styling cues to mark its significance:

Border 1px 1px 1px 5px solid brand-500
The standout feature of the accented variant is its unique border, thicker on one side and colored in the brand's primary hue (brand-500).

  • This design choice not only draws attention but also serves as a visual indicator of the Card's special status or purpose.

    The branded border acts as a clear marker for distinguishing the accented Card from its standard counterparts, effectively transmitting the intention behind its use.

The Card accented variant's box model is a testament to the thoughtful integration of branding elements within functional design.

It preserves the versatility and user-centric approach of the standard Card while introducing a visual distinction that elevates the overall design narrative.

 

Responsive

No difference with the standard variant

 

States

StateStarting GraphicVariation GraphicVariation Styling
IdleIdleIdle Accented variant[vs standard idle]
border-left: 5px, solid brand-500 (#1394E5)
FocusN/A (no IE, no focus received)N/A (no IE, no focus received)N/A
DisabledDisabled[vs standard disabled + variant-idle]

- variant idle styles
box-shadow: none
background: neutral-050 (#F6F7F9)
border: 1px solid neutral-100 (#E0E3E8)
border-left: 5px, solid neutral-100 (#E0E3E8)
Read-onlyN/A (content needs to apply)N/A (content needs to apply)N/A
Hover [vs standard hover + variant-idle]
ErrorN/A (no required cases)N/AN/

Use Cases

Original Scenario (Use Case)Dim Sum Version (Proposed Solution with DS Components)
Disabled

Disabled		Disabled

Examples

Given the Card Component's role as a primarily container-centric element in the design system, its content is highly dependent on what scenario it's used in

The component's value lies in its ability to provide a structured, visually consistent container for diverse content types.

We have selected a curated list of scenario that can be achieved through atomic composition with other components in the design system, allowing for a wide range of layout possibilities while maintaining a cohesive design language to serve as the baseline for application to expand on and integrate as is if the scenario is already covered.

Scenario GraphicScenario SolutionText Resize and Reflow (200%)Scenario Description
no action card within contextno action card within contextNo Action
When information requires user action to be taken.
action card within contextaction card exampleaction resize and reflow card exampleAction
When information requires user action to be taken.
multiple action card within contextmultiple action card examplemultiple action resize and reflow card exampleMultiple Action
When information requires user action to be taken on multiple items.
single select card within contextsingle select card examplesingle select resize and reflow card exampleSingle Select
For selecting a single card within a card region. Includes contextual action.
multi select card within contextmulti select card examplemulti select resize and reflow card exampleMulti Select
For taking bulk action within a card region. Includes contextual action.
drag and drop card within contextdrag and drop card exampledrag and drop resize and reflow card exampleDrag and Drop
Allows for moving a card within a matrix or list to arrange in a desired order. Includes contextual action.
with notification badges within contextnotification badges card examplenotifications badges resize and reflow card exampleNotification Badge
When status change, new or unread items or quantity of items added needs to be indicated. Includes contextual action.
accordion card within contextaccordion card exampleaccordion collapsed resize and reflow card example

accordion expanded resize and reflow card example		Accordion
Expand and collapse to hide or reveal additional content. Includes contextual action.
 

Additional Examples

Hypothetical Scenario GraphicHypothetical Scenario SolutionText Resize and Reflow (200%)Hypothetical Scenario Description
with notification badges within contextcard with multiple features-1multiple feature-1-collapse resize and reflow card example

multiple feature-1-expand resize and reflow card example		Multiple Control
Expand and collapse to hide or reveal additional content and take bulk action within a card region. Includes contextual action.
with notification badges within contextcard with multiple features-2multiple feature-2 resize and reflow card exampleMultiple Control-1
Allows for moving a card within a matrix or list to arrange in a desired order and to take bulk action within a card region. Includes contextual action.

Accessibility

This variant doesn't add any specific accessibility concern, the visual feedback is already designed to work with people affected by color blindness and would provide a similar UX callout to every visual user.

All the callouts from the standard variant also applies here.

Usage Warnings

No known-of issues

References

  • link to storybook stories when they exist
  • link to usage guidelines for ensuring this variant is used the intended way?
  • Resize and Reflow Guidance