Ribbons | Velzon - Admin & Dashboard Template

#### Are you sure ?

Are you sure you want to remove this Notification ?

#### Ribbons

#### Rounded Ribbon

Show Code

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">
        <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>

#### Ribbon Shape

Show Code

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">
        <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

Show Code

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">
        <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>

#### Boxed Ribbons

Show Code

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">
        <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">
        <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">
        <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

Show Code

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"><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">
        <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">
        <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

Show Code

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.

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

Loading...

##### Theme Customizer

###### Layout

Choose your layout

##### Vertical

##### Horizontal

##### Two Column

##### Semi Box

###### Color Scheme

Choose Light or Dark Scheme.

##### Light

##### Dark

###### Layout Width

Choose Fluid or Boxed layout.

##### Fluid

##### Boxed

###### Layout Position

Choose Fixed or Scrollable Layout Position.

Fixed Scrollable

###### Topbar Color

Choose Light or Dark Topbar Color.

##### Light

##### Dark

###### Background Image

Choose a body background image.

##### None

##### One

##### Two

##### Three