Ribbons Card Widget

Estimated reading: 2 minutes 26 views

Ribbon Cards in FlutKit are UI components used to highlight a card with a visual ribbon label.
They are commonly used to mark status, category, priority, or special labels such as Primary, New, Featured, or Sale.

FlutKit provides multiple ribbon styles to suit different visual needs, while keeping the API consistent across all variants.

Common Use Cases

Highlight featured or premium content
Indicate card priority or status
Label sections such as Primary, Beta, or New
Add visual emphasis without modifying the card layout

Ribbon Card Variants

1. RoundedRibbonCard

A card with a rounded ribbon style. Suitable for clean and modern layouts.

Dart

RoundedRibbonCard(
  ribbonText: 'Primary',
  ribbonColor: kPrimaryColor,
  ribbonPosition: RibbonPosition.left,
  child: ExampleContent(),
);

RoundedRibbonCard(
  ribbonText: 'Primary',
  ribbonColor: kPrimaryColor,
  ribbonPosition: RibbonPosition.left,
  child: ExampleContent(),
);

2. TriangleRibbonCard

Uses a triangular ribbon shape for sharper visual emphasis.

Dart

TriangleRibbonCard(
  ribbonText: 'Primary',
  ribbonColor: kPrimaryColor,
  ribbonPosition: RibbonPosition.left,
  child: ExampleContent(),
);

TriangleRibbonCard(
  ribbonText: 'Primary',
  ribbonColor: kPrimaryColor,
  ribbonPosition: RibbonPosition.left,
  child: ExampleContent(),
);

3. ReverseTriangleRibbonCard

An inverted triangle ribbon style, useful for variation without changing layout.

Dart

ReverseTriangleRibbonCard(
  ribbonText: 'Primary',
  ribbonColor: kPrimaryColor,
  ribbonPosition: RibbonPosition.left,
  child: ExampleContent(),
);

ReverseTriangleRibbonCard(
  ribbonText: 'Primary',
  ribbonColor: kPrimaryColor,
  ribbonPosition: RibbonPosition.left,
  child: ExampleContent(),
);

4. SlopedRibbonCard

A sloped ribbon design that adds a dynamic visual accent.

Dart

SlopedRibbonCard(
  ribbonText: 'Primary',
  ribbonColor: kPrimaryColor,
  ribbonPosition: RibbonPosition.left,
  child: ExampleContent(),
);

SlopedRibbonCard(
  ribbonText: 'Primary',
  ribbonColor: kPrimaryColor,
  ribbonPosition: RibbonPosition.left,
  child: ExampleContent(),
);

5. HoverRibbonCard

A ribbon card that expands on hover, ideal for desktop dashboards and interactive UIs.

Dart

HoverRibbonCard(
  ribbonText: 'Primary',
  ribbonColor: kPrimaryColor,
  ribbonPosition: RibbonPosition.left,
  ribbonIcon: Icons.star,
  child: ExampleContent(),
);

HoverRibbonCard(
  ribbonText: 'Primary',
  ribbonColor: kPrimaryColor,
  ribbonPosition: RibbonPosition.left,
  ribbonIcon: Icons.star,
  child: ExampleContent(),
);

Common Parameters

All Ribbon Card variants share the same core parameters:

Parameter	Description
`ribbonText`	Text displayed inside the ribbon
`ribbonColor`	Background color of the ribbon
`ribbonPosition`	Ribbon placement (`left` or `right`)
`child`	The card content widget

Best Practices

Keep ribbon text short (1–2 words) for clarity
Use semantic colors (e.g. primary, success, warning)
Use HoverRibbonCard only where hover interaction is expected (desktop/web)
Maintain consistent content across examples for easier comparison

Summary

Ribbon Cards in FlutKit provide a flexible and visually expressive way to label and highlight content.
With multiple styles and a consistent API, developers can easily adapt ribbon visuals without changing their card structure.

Tip: You can find more usage patterns and visual references directly inside the FlutKit demo under the Ribbons section.

Dart

Base UI → Ribbons

Base UI → Ribbons