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

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

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

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

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