123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151 |
- ---
- title: Ribbons
- description: Ribbons are graphical elements which attract users' attention to a given element of an interface and make it stand out.
- ---
- ## Default markup
- Use the `ribbon` class to add the default ribbon to any section of your interface.
- ```html example columns={1} centered
- <div class="card">
- <div class="card-body" style="height: 5rem">
- </div>
- <div class="ribbon">
- <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
- <path stroke="none" d="M0 0h24v24H0z" fill="none" />
- <path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" />
- </svg>
- </div>
- </div>
- ```
- ```html
- <div class="card">
- <div class="card-body">
- </div>
- <div class="ribbon">
- <!-- SVG icon from http://tabler-icons.io/i/star -->
- <svg>...</svg>
- </div>
- </div>
- ```
- ## Ribbon position
- You can change the position of a ribbon by adding one of the following classes to the element:
- - `ribbon-top` - moves it to the top
- - `ribbon-end` - moves it to the right
- - `ribbon-bottom` - moves it to the bottom
- - `ribbon-start` - moves it to the left
- Using multiple classes at once will give you more position options. For example, the following class: `.ribbon.ribbon-top.ribbon-left` will move the ribbon to the top left corner.
- ```html example columns={1} centered
- <div class="card">
- <div class="card-body" style="height: 5rem">
- </div>
- <div class="ribbon ribbon-top ribbon-start">
- <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
- <path stroke="none" d="M0 0h24v24H0z" fill="none" />
- <path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" />
- </svg>
- </div>
- </div>
- ```
- ```html
- <div class="card">
- <div class="card-body">
- </div>
- <div class="ribbon ribbon-top ribbon-start">
- <!-- SVG icon from http://tabler-icons.io/i/star -->
- <svg>...</svg>
- </div>
- </div>
- ```
- ## Ribbon color
- Customize the ribbon's background color. You can click [here](colors) to see the list of available colors.
- ```html example columns={1} centered
- <div class="card">
- <div class="card-body" style="height: 5rem">
- </div>
- <div class="ribbon bg-red">
- <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
- <path stroke="none" d="M0 0h24v24H0z" fill="none" />
- <path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" />
- </svg>
- </div>
- </div>
- ```
- ```html
- <div class="card">
- <div class="card-body">
- </div>
- <div class="ribbon bg-red">
- <!-- SVG icon from http://tabler-icons.io/i/star -->
- <svg>...</svg>
- </div>
- </div>
- ```
- ## Ribbon text
- Add your own text to a ribbon to display any additional information and make it easy to spot for users.
- ```html example columns={1} centered
- <div class="card">
- <div class="card-body" style="height: 5rem">
- </div>
- <div class="ribbon bg-green">
- <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
- <path stroke="none" d="M0 0h24v24H0z" fill="none" />
- <path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" />
- </svg>
- </div>
- </div>
- ```
- ```html
- <div class="card">
- <div class="card-body">
- </div>
- <div class="ribbon bg-green">
- <!-- SVG icon from http://tabler-icons.io/i/star -->
- <svg>...</svg>
- </div>
- </div>
- ```
- ## Ribbon style
- Change the style of a ribbon to make it go well with your interface design.
- ```html example columns={1} centered
- <div class="card w-100">
- <div class="card-body" style="height: 5rem">
- </div>
- <div class="ribbon ribbon-bookmark bg-orange">
- <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
- <path stroke="none" d="M0 0h24v24H0z" fill="none" />
- <path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" />
- </svg>
- </div>
- </div>
- ```
- ```html
- <div class="card">
- <div class="card-body">
- </div>
- <div class="ribbon ribbon-bookmark bg-orange">
- <!-- SVG icon from http://tabler-icons.io/i/star -->
- <svg>...</svg>
- </div>
- </div>
- ```
|