# Core/Ribbon - Design

A ribbon component used to highlight new features that exist in a 'preview' state. Ribbons communicate that users may encounter errors when using these features.

## Properties

### Color

Ribbons use the 'decorative' palette by default. Use the `color` prop for preset colors (teal, green, purple). For the rare case where you need to use a custom color, use `FORCE__className` with a class that sets the `--_ribbon-background-color` CSS variable.

### Label

Labels highlight features of the UI.

## Content

### Label

Use a simple short sentence, fewer than 5 words, in sentence case.

## Best Practices

### Preview features

Use ribbons to highlight new features that are in a 'preview' state. These features may not be fully completed and users may encounter unexpected errors.

## Accessibility

### Keyboard interaction

A ribbon is a static element, associated with other user interface controls (e.g. a card). It is not keyboard focusable by itself.

### Labeling

A ribbon adds context which must be announced in addition to the parent component's label. For example, "\[parent identifier], \[ribbon string]".

### Color contrast

When using custom colors via `FORCE__className` (e.g. setting `--_ribbon-background-color`), ensure the background color meets WCAG 2.2 Level AA contrast requirements (4.5:1 ratio) against the white foreground text.