Ribbons

Rounded Ribbon

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.

<!-- Rounded Ribbon -->
<div class="card ribbon-box border shadow-none mb-lg-0 material-shadow">
    <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 material-shadow">
    <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 material-shadow">
    <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>

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.

<!-- Ribbon Shape -->
<div class="card ribbon-box border shadow-none mb-lg-0 material-shadow">
    <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 material-shadow">
    <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 material-shadow">
    <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.

<div class="card ribbon-box border ribbon-fill shadow-none mb-lg-0 material-shadow">
    <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 material-shadow">
    <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 material-shadow">
    <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>

Boxed Ribbons

Use ribbon-box class with ribbon-two class at child element to show below-mentioned shaped ribbon.

Basic
Box 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. Vivamus pretium nec odio cursus.

Standard
Box 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. Vivamus pretium nec odio cursus.

Premium
Box 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. Vivamus pretium nec odio cursus elementum ornare.

<div class="card ribbon-box border shadow-none mb-lg-0 material-shadow">
    <div class="card-body text-muted">
        <div class="ribbon-two ribbon-two-primary"><span>Primary</span></div>
        <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 mb-lg-0 material-shadow">
    <div class="card-body text-muted">
        <div class="ribbon-two ribbon-two-success"><span>Success</span></div>
        <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 mb-lg-0 material-shadow">
    <div class="card-body text-muted">
        <div class="ribbon-two ribbon-two-success"><span>Success</span></div>
        <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>

Ribbons

Use ribbon-box class with ribbon-three class at child element to show below-mentioned shaped ribbon.

Featured
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.

Featured
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.

Featured
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.

<div class="card ribbon-box border shadow-none mb-lg-0">
    <div class="card-body text-muted">
        <span class="ribbon-three ribbon-three-primary material-shadow"><span>Primary</span></span>
        <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 mb-lg-0 material-shadow">
    <div class="card-body text-muted">
        <div class="ribbon-three ribbon-three-success"><span>Success</span></div>
        <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 mb-lg-0 material-shadow">
    <div class="card-body text-muted">
        <div class="ribbon-three ribbon-three-info"><span>Success</span></div>
        <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>

Ribbons Hover

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

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.

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.

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.

<div class="card ribbon-box border shadow-none overflow-hidden material-shadow">
    <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 material-shadow">
    <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 material-shadow">
    <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>
© Velzon.
Design & Develop by Themesbrand