Ribbon

Ribbons are decorative elements placed on the corner of cards or containers. They support left and top positions with text or icon content.

<TCard>
  <TRibbon color="red">Hot</TRibbon>
  <!-- ... -->
</TCard>

Ribbon Position

Use the position prop to switch between start (left, default) and top.

<TRibbon position="start" color="blue">Left</TRibbon>
<TRibbon position="top" color="purple">Top</TRibbon>

Ribbon Color

The color prop sets the background color, supporting all Tabler preset colors.

<TRibbon color="red">Red</TRibbon>
<TRibbon color="blue">Blue</TRibbon>
<TRibbon color="green">Green</TRibbon>
<TRibbon color="orange">Orange</TRibbon>
<TRibbon color="purple">Purple</TRibbon>
<TRibbon color="cyan">Cyan</TRibbon>

Text & Icon Content

The default slot accepts text or @tabler/icons-vue icons.

<TRibbon color="red">New</TRibbon>
<TRibbon color="green"><IconStar :size="24" /></TRibbon>
<TRibbon color="orange"><IconAlertTriangle :size="24" /></TRibbon>

Bookmark Style

Enable the bookmark prop for a bookmark-style ribbon (diagonal cut at the bottom corner).

<TRibbon color="red" bookmark>Hot</TRibbon>
<TRibbon color="blue" position="top" bookmark><IconBell :size="24" /></TRibbon>

Usage with TCard

TRibbon works seamlessly with the TCard component. You can use the ribbonColor and ribbonPosition props on TCard directly.

<TCard ribbonColor="red" title="Left Ribbon">
  <template #ribbon>Hot</template>
</TCard>

API

Props

Prop	Description	Type	Default
position	Ribbon position: left (start) / top	'start' | 'top'	'start'
color	Ribbon background color (Tabler preset)	TablerColor	undefined
bookmark	Bookmark style (diagonal bottom cut)	boolean	false

Slots

Slot	Description
default	Ribbon content, accepts text and icons