Ribbon

Ribbons: default, bookmark, corner, vertical and badge — on either side.

Variants

Variants

Vue

<div class="thl-row">
  <div v-for="(v, i) in ['default','bookmark','corner','vertical-left','vertical-right','badge']" :key="v" class="thl-col-12 thl-col-md-4"><ThlRibbon :text="v === 'corner' ? '★' : v.startsWith('vertical') ? '♥' : v" :variant="v" :color="['primary','success','info','warning','danger','purple'][i]"><p>Duis mollis, est non commodo luctus.</p></ThlRibbon></div>
</div>

React

<Ribbon text="bookmark" variant="bookmark" color="success"><p>…</p></Ribbon>
<Ribbon text="right" position="right" color="danger"><p>…</p></Ribbon>

Angular

<thl-ribbon text="bookmark" variant="bookmark" color="success"><p>…</p></thl-ribbon>
<thl-ribbon text="right" position="right" color="danger"><p>…</p></thl-ribbon>

API

Ribbon

<ThlRibbon> · import { ThlRibbon } from '@thl-ui/vue'

Prop	Type	Default
text*	string	—
color	string	"primary"
variant	string	"default"
position	string	"left"
placement	string	"top"

Slots: default