Ribbons

  1. Custom UI
  2. Ribbons

Round Shape

Use round-shape class to show round-shaped ribbon.

Primary
Rounded Ribbon

Quisque nec turpis at urna dictum luctus. Suspendisse convallis dignissim eros at volutpat. In egestas mattis dui. Aliquam mattis dictum aliquet. Nulla sapien mauris, eleifend et sem ac, commodo dapibus odio.

Success
Rounded Ribbon

Quisque nec turpis at urna dictum luctus. Suspendisse convallis dignissim eros at volutpat. In egestas mattis dui. Aliquam mattis dictum aliquet. Nulla sapien mauris, eleifend et sem ac, commodo dapibus odio.

Info
Rounded Ribbon Right

Quisque nec turpis at urna dictum luctus. Suspendisse convallis dignissim eros at volutpat. In egestas mattis dui. Aliquam mattis dictum aliquet. Nulla sapien mauris, eleifend et sem ac, commodo dapibus odio.

HTML Preview
<!-- Rounded Ribbon -->
<div class="card ribbon-box border shadow-none mb-lg-0">
    <div class="card-body">
        <div class="ribbon ribbon-primary round-shape">Primary</div>
        <h5 class="fs-14 text-end">Rounded Ribbon</h5>
        <div class="ribbon-content mt-4 text-muted">
            <p class="mb-0">Quisque nec turpis at urna dictum luctus. Suspendisse convallis dignissim eros at volutpat. In egestas
                mattis dui. Aliquam mattis dictum aliquet. Nulla sapien mauris, eleifend et sem ac, commodo dapibus odio.</p>
        </div>
    </div>
</div>

<div class="card ribbon-box border shadow-none mb-lg-0">
    <div class="card-body">
        <div class="ribbon ribbon-success round-shape">Success</div>
        <h5 class="fs-14 text-end">Rounded Ribbon</h5>
        <div class="ribbon-content mt-4 text-muted">
            <p class="mb-0">Quisque nec turpis at urna dictum luctus. Suspendisse convallis dignissim eros at volutpat. In egestas
                mattis dui. Aliquam mattis dictum aliquet. Nulla sapien mauris, eleifend et sem ac, commodo dapibus odio.</p>
        </div>
    </div>
</div>

<!-- Right Ribbon -->
<div class="card ribbon-box border shadow-none right mb-lg-0">
    <div class="card-body">
        <div class="ribbon ribbon-info round-shape">Info</div>
        <h5 class="fs-14 text-start">Rounded Ribbon Right</h5>
        <div class="ribbon-content mt-4 text-muted">
            <p class="mb-0">Quisque nec turpis at urna dictum luctus. Suspendisse convallis dignissim eros at volutpat. In egestas
                mattis dui. Aliquam mattis dictum aliquet. Nulla sapien mauris, eleifend et sem ac, commodo dapibus odio.</p>
        </div>
    </div>
</div>

Vertical Shape

Use vertical-shape class to show round-shaped ribbon.

Primary
Rounded Ribbon

Quisque nec turpis at urna dictum luctus. Suspendisse convallis dignissim eros at volutpat. In egestas mattis dui. Aliquam mattis dictum aliquet. Nulla sapien mauris, eleifend et sem ac, commodo dapibus odio.

Success
Rounded Ribbon

Quisque nec turpis at urna dictum luctus. Suspendisse convallis dignissim eros at volutpat. In egestas mattis dui. Aliquam mattis dictum aliquet. Nulla sapien mauris, eleifend et sem ac, commodo dapibus odio.

Info
Rounded Ribbon Right

Quisque nec turpis at urna dictum luctus. Suspendisse convallis dignissim eros at volutpat. In egestas mattis dui. Aliquam mattis dictum aliquet. Nulla sapien mauris, eleifend et sem ac, commodo dapibus odio.

HTML Preview
<!-- Rounded Ribbon -->
<div class="card ribbon-box border shadow-none mb-lg-0">
    <div class="card-body">
      <div class="d-flex">
        <div class="ribbon ribbon-primary vertical-shape">Primary</div>
           <div class="flex-grow-1">
                <div class="ribbon-content text-muted ms-5">
                    <h5 class="fs-14 text-end">Rounded Ribbon</h5>
                    <p class="mb-0">Quisque nec turpis at urna dictum luctus. Suspendisse convallis dignissim eros at volutpat. In egestas
                        mattis dui. Aliquam mattis dictum aliquet. Nulla sapien mauris, eleifend et sem ac, commodo dapibus odio.</p>
                </div>
           </div>
        </div>
    </div>
</div>

<div class="card ribbon-box border shadow-none mb-lg-0">
    <div class="card-body">
    <div class="d-flex">
        <div class="ribbon ribbon-success vertical-shape">Success</div>
        <div class="flex-grow-1">
        <div class="ribbon-content text-muted ms-5">
            <h5 class="fs-14 text-end">Rounded Ribbon</h5>
            <p class="mb-0">Quisque nec turpis at urna dictum luctus. Suspendisse convallis dignissim eros at volutpat. In egestas
                mattis dui. Aliquam mattis dictum aliquet. Nulla sapien mauris, eleifend et sem ac, commodo dapibus odio.</p>
            </div>
            </div>
        </div>
    </div>
</div>

<!-- Right Ribbon -->
<div class="card ribbon-box border shadow-none right mb-lg-0">
    <div class="card-body">
    <div class="d-flex">
        <div class="ribbon ribbon-info vertical-shape">Info</div>
        <div class="flex-grow-1">
        <div class="ribbon-content text-muted me-5">
        <h5 class="fs-14 text-start">Rounded Ribbon Right</h5>
            <p class="mb-0">Quisque nec turpis at urna dictum luctus. Suspendisse convallis dignissim eros at volutpat. In egestas
                mattis dui. Aliquam mattis dictum aliquet. Nulla sapien mauris, eleifend et sem ac, commodo dapibus odio.</p>
                </div>
            </div>
        </div>
    </div>
</div>

Ribbon Shape

Use ribbon-shape class to show ribbon shaped ribbon.

Primary
Ribbon Shape

Quisque nec turpis at urna dictum luctus. Suspendisse convallis dignissim eros at volutpat. In egestas mattis dui. Aliquam mattis dictum aliquet. Nulla sapien mauris, eleifend et sem ac, commodo dapibus odio.

Success
Ribbon Shape

Quisque nec turpis at urna dictum luctus. Suspendisse convallis dignissim eros at volutpat. In egestas mattis dui. Aliquam mattis dictum aliquet. Nulla sapien mauris, eleifend et sem ac, commodo dapibus odio.

Info
Ribbon Shape Right

Quisque nec turpis at urna dictum luctus. Suspendisse convallis dignissim eros at volutpat. In egestas mattis dui. Aliquam mattis dictum aliquet. Nulla sapien mauris, eleifend et sem ac, commodo dapibus odio.

HTML Preview
<!-- Ribbon Shape -->
<div class="card ribbon-box border shadow-none mb-lg-0">
    <div class="card-body">
        <div class="ribbon ribbon-primary ribbon-shape">Primary</div>
        <h5 class="fs-14 text-end">Ribbon Shape</h5>
        <div class="ribbon-content text-muted mt-4">
            <p class="mb-0">Quisque nec turpis at urna dictum luctus. Suspendisse convallis dignissim eros at volutpat. In egestas
                mattis dui. Aliquam mattis dictum aliquet. Nulla sapien mauris, eleifend et sem ac, commodo dapibus odio.</p>
        </div>
    </div>
</div>

<div class="card ribbon-box border shadow-none mb-lg-0">
    <div class="card-body">
        <div class="ribbon ribbon-success ribbon-shape">Success</div>
        <h5 class="fs-14 text-end">Ribbon Shape</h5>
        <div class="ribbon-content text-muted mt-4">
            <p class="mb-0">Quisque nec turpis at urna dictum luctus. Suspendisse convallis dignissim eros at volutpat. In egestas
                mattis dui. Aliquam mattis dictum aliquet. Nulla sapien mauris, eleifend et sem ac, commodo dapibus odio.</p>
        </div>
    </div>
</div>

<div class="card ribbon-box border shadow-none mb-lg-0 right">
    <div class="card-body">
        <div class="ribbon ribbon-info ribbon-shape">Info</div>
        <h5 class="fs-14 text-start">Ribbon Shape Right</h5>
        <div class="ribbon-content text-muted mt-4">
            <p class="mb-0">Quisque nec turpis at urna dictum luctus. Suspendisse convallis dignissim eros at volutpat. In egestas
                mattis dui. Aliquam mattis dictum aliquet. Nulla sapien mauris, eleifend et sem ac, commodo dapibus odio.</p>
        </div>
    </div>
</div>

Filled Ribbons

Use ribbon-fill class to show fill-shaped ribbon.

New
Fill Ribbon

Quisque nec turpis at urna dictum luctus. Suspendisse convallis dignissim eros at volutpat. In egestas mattis dui. Aliquam mattis dictum aliquet. Nulla sapien mauris, eleifend et sem ac, commodo dapibus odio.

Sale
Fill Ribbon

Quisque nec turpis at urna dictum luctus. Suspendisse convallis dignissim eros at volutpat. In egestas mattis dui. Aliquam mattis dictum aliquet. Nulla sapien mauris, eleifend et sem ac, commodo dapibus odio.

New
Fill Ribbon Right

Quisque nec turpis at urna dictum luctus. Suspendisse convallis dignissim eros at volutpat. In egestas mattis dui. Aliquam mattis dictum aliquet. Nulla sapien mauris, eleifend et sem ac, commodo dapibus odio.

HTML Preview
<div class="card ribbon-box border ribbon-fill shadow-none mb-lg-0">
    <div class="card-body">
        <div class="ribbon ribbon-primary">- 10 %</div>
        <h5 class="fs-14 text-end">Fill Ribbon</h5>
        <div class="ribbon-content mt-5 text-muted">
            <p class="mb-0">Quisque nec turpis at urna dictum luctus. Suspendisse convallis dignissim eros at volutpat. In egestas
                mattis dui. Aliquam mattis dictum aliquet. Nulla sapien mauris, eleifend et sem ac, commodo dapibus odio.</p>
        </div>
    </div>
</div>

<div class="card ribbon-box border ribbon-fill shadow-none mb-lg-0">
    <div class="card-body">
        <div class="ribbon ribbon-success">- 20 %</div>
        <h5 class="fs-14 text-end">Fill Ribbon</h5>
        <div class="ribbon-content mt-5 text-muted">
            <p class="mb-0">Quisque nec turpis at urna dictum luctus. Suspendisse convallis dignissim eros at volutpat. In egestas
                mattis dui. Aliquam mattis dictum aliquet. Nulla sapien mauris, eleifend et sem ac, commodo dapibus odio.</p>
        </div>
    </div>
</div>

<!-- Right Ribbon -->
<div class="card ribbon-box border ribbon-fill shadow-none right mb-lg-0">
    <div class="card-body">
        <div class="ribbon ribbon-info">- 30 %</div>
        <h5 class="fs-14 text-start">Fill Ribbon Right</h5>
        <div class="ribbon-content mt-5 text-muted">
            <p class="mb-0">Quisque nec turpis at urna dictum luctus. Suspendisse convallis dignissim eros at volutpat. In egestas
                mattis dui. Aliquam mattis dictum aliquet. Nulla sapien mauris, eleifend et sem ac, commodo dapibus odio.</p>
        </div>
    </div>
</div>

Ribbons Hover

Use trending-ribbon class to show ribbon with hovering effect.

Trending
Ribbon Shape

Quisque nec turpis at urna dictum luctus. Suspendisse convallis dignissim eros at volutpat. In egestas mattis dui. Aliquam mattis dictum aliquet. Nulla sapien mauris, eleifend et sem ac, commodo dapibus odio. Vivamus pretium nec odio cursus.

Trending
Ribbon Shape

Quisque nec turpis at urna dictum luctus. Suspendisse convallis dignissim eros at volutpat. In egestas mattis dui. Aliquam mattis dictum aliquet. Nulla sapien mauris, eleifend et sem ac, commodo dapibus odio. Vivamus pretium nec odio cursus.

Trending
Ribbon Right Shape

Quisque nec turpis at urna dictum luctus. Suspendisse convallis dignissim eros at volutpat. In egestas mattis dui. Aliquam mattis dictum aliquet. Nulla sapien mauris, eleifend et sem ac, commodo dapibus odio. Vivamus pretium nec odio cursus.

HTML Preview
<div class="card ribbon-box border shadow-none overflow-hidden">
    <div class="card-body text-muted">
        <div class="ribbon ribbon-info ribbon-shape trending-ribbon">
            <span class="trending-ribbon-text">Trending</span> <i class="ri-flashlight-fill text-white align-bottom float-end ms-1"></i>
        </div>
        <h5 class="fs-14 text-end mb-3">Ribbon Shape</h5>
        <p class="mb-0">Quisque nec turpis at urna dictum luctus. Suspendisse convallis dignissim eros at volutpat. In egestas mattis dui. Aliquam mattis dictum aliquet. Nulla sapien mauris, eleifend et sem ac, commodo dapibus odio. Vivamus pretium nec odio cursus.</p>
    </div>
</div>

<div class="card ribbon-box border shadow-none overflow-hidden">
    <div class="card-body text-muted">
        <div class="ribbon ribbon-info ribbon-shape trending-ribbon">
            <span class="trending-ribbon-text">Trending</span> <i class="ri-flashlight-fill text-white align-bottom float-end ms-1"></i>
        </div>
        <h5 class="fs-14 text-end mb-3">Ribbon Shape</h5>
        <p class="mb-0">Quisque nec turpis at urna dictum luctus. Suspendisse convallis dignissim eros at volutpat. In egestas mattis dui. Aliquam mattis dictum aliquet. Nulla sapien mauris, eleifend et sem ac, commodo dapibus odio. Vivamus pretium nec odio cursus.</p>
    </div>
</div>

<div class="card ribbon-box right border shadow-none overflow-hidden">
    <div class="card-body text-muted">
        <div class="ribbon ribbon-info ribbon-shape trending-ribbon">
            <i class="ri-flashlight-fill text-white align-bottom float-start me-1"></i> <span class="trending-ribbon-text">Trending</span>
        </div>
        <h5 class="fs-14 mb-3">Ribbon Right Shape</h5>
        <p class="mb-0">Quisque nec turpis at urna dictum luctus. Suspendisse convallis dignissim eros at volutpat. In egestas mattis dui. Aliquam mattis dictum aliquet. Nulla sapien mauris, eleifend et sem ac, commodo dapibus odio. Vivamus pretium nec odio cursus.</p>
    </div>
</div>
© Toner.
Design & Develop by Themesbrand