|
Server IP : 145.79.210.100 / Your IP : 216.73.216.6 Web Server : LiteSpeed System : Linux in-mum-web1954.main-hosting.eu 5.14.0-570.26.1.el9_6.x86_64 #1 SMP PREEMPT_DYNAMIC Wed Jul 16 09:12:04 EDT 2025 x86_64 User : u474798400 ( 474798400) PHP Version : 7.4.33 Disable Function : system, exec, shell_exec, passthru, mysql_list_dbs, ini_alter, dl, symlink, link, chgrp, leak, popen, apache_child_terminate, virtual, mb_send_mail MySQL : OFF | cURL : ON | WGET : ON | Perl : OFF | Python : OFF Directory (0755) : /home/u474798400/domains/excentia.in/public_html/admin/upload_image/../docs/components/ |
| [ Home ] | [ C0mmand ] | [ Upload File ] |
|---|
---
layout: page
title: Ribbons Component
---
The ribbons component is a easy way to display informations above any content. The `.ribbon-warpper` needs to be inside a element with _position:relative;_. In this docs page we place the ribbon always inside `<div class="position-relative p-3 bg-gray" style="height: 180px"></div>` for demo purpose but it can placed inside cards, table rows & many more.
The ribbon comes in three sizes to display more text or use larger font sizes, default (only `.ribbon-wrapper`), large (`.ribbon-wrapper` with `.ribbon-lg`), extra large (`.ribbon-wrapper` with `.ribbon-xl`).
##### Example Markup
{: .text-bold .text-dark .mt-5}
<div class="position-relative p-3 bg-gray" style="height: 180px">
<div class="ribbon-wrapper">
<div class="ribbon bg-primary">
Ribbon
</div>
</div>
Ribbon Default <br />
<small>.ribbon-wrapper.ribbon-lg .ribbon</small>
</div>
```html
<div class="ribbon-wrapper">
<div class="ribbon bg-primary">
Ribbon
</div>
</div>
```
{: .max-height-300}
##### Ribbon Size Variations
{: .text-bold .text-dark .mt-5}
<div class="row">
<div class="col-sm-4">
<div class="position-relative p-3 bg-gray" style="height: 180px">
<div class="ribbon-wrapper">
<div class="ribbon bg-primary">
Ribbon
</div>
</div>
Ribbon Default <br />
<small>.ribbon-wrapper.ribbon-lg .ribbon</small>
</div>
</div>
<div class="col-sm-4">
<div class="position-relative p-3 bg-gray" style="height: 180px">
<div class="ribbon-wrapper ribbon-lg">
<div class="ribbon bg-info">
Ribbon Large
</div>
</div>
Ribbon Large <br />
<small>.ribbon-wrapper.ribbon-lg .ribbon</small>
</div>
</div>
<div class="col-sm-4">
<div class="position-relative p-3 bg-gray" style="height: 180px">
<div class="ribbon-wrapper ribbon-xl">
<div class="ribbon bg-secondary">
Ribbon Extra Large
</div>
</div>
Ribbon Extra Large <br />
<small>.ribbon-wrapper.ribbon-xl .ribbon</small>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4" markdown="1">
```html
<div class="ribbon-wrapper">
<div class="ribbon bg-primary">
Ribbon
</div>
</div>
```
</div>
<div class="col-sm-4" markdown="1">
```html
<div class="ribbon-wrapper ribbon-lg">
<div class="ribbon bg-info">
Ribbon Large
</div>
</div>
```
</div>
<div class="col-sm-4" markdown="1">
```html
<div class="ribbon-wrapper ribbon-xl">
<div class="ribbon bg-secondary">
Ribbon Extra Large
</div>
</div>
```
</div>
</div>
##### Text Size Variations
{: .text-bold .text-dark .mt-5}
<div class="row">
<div class="col-sm-4">
<div class="position-relative p-3 bg-gray" style="height: 180px">
<div class="ribbon-wrapper ribbon-lg">
<div class="ribbon bg-success text-lg">
Ribbon
</div>
</div>
Ribbon Large <br /> with Large Text <br />
<small>.ribbon-wrapper.ribbon-lg .ribbon.text-lg</small>
</div>
</div>
<div class="col-sm-4">
<div class="position-relative p-3 bg-gray" style="height: 180px">
<div class="ribbon-wrapper ribbon-xl">
<div class="ribbon bg-warning text-lg">
Ribbon
</div>
</div>
Ribbon Extra Large <br /> with Large Text <br />
<small>.ribbon-wrapper.ribbon-xl .ribbon.text-lg</small>
</div>
</div>
<div class="col-sm-4">
<div class="position-relative p-3 bg-gray" style="height: 180px">
<div class="ribbon-wrapper ribbon-xl">
<div class="ribbon bg-danger text-xl">
Ribbon
</div>
</div>
Ribbon Extra Large <br /> with Extra Large Text <br />
<small>.ribbon-wrapper.ribbon-xl .ribbon.text-xl</small>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4" markdown="1">
```html
<div class="ribbon-wrapper ribbon-lg">
<div class="ribbon bg-success text-lg">
Ribbon
</div>
</div>
```
</div>
<div class="col-sm-4" markdown="1">
```html
<div class="ribbon-wrapper ribbon-xl">
<div class="ribbon bg-warning text-lg">
Ribbon
</div>
</div>
```
</div>
<div class="col-sm-4" markdown="1">
```html
<div class="ribbon-wrapper ribbon-xl">
<div class="ribbon bg-danger text-xl">
Ribbon
</div>
</div>
```
</div>
</div>
##### Image Example Code
{: .text-bold .text-dark .mt-5}
```html
<div class="position-relative">
<img src="../../dist/img/photo1.png" alt="Photo 1" class="img-fluid">
<div class="ribbon-wrapper ribbon-lg">
<div class="ribbon bg-success text-lg">
Ribbon
</div>
</div>
</div>
```