Ribbons

Primary
Primary Header

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

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

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.

Warning
Warning Header

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.

Danger
Danger Header

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.

Dark
Dark Header

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.

Secondary
Secondary Header

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.

Primary

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. Suspendisse molestie ullamcorper ornare.

Success

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. Suspendisse molestie ullamcorper ornare.

Info

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. Suspendisse molestie ullamcorper ornare.

Warning

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. Suspendisse molestie ullamcorper ornare.

Dark

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. Suspendisse molestie ullamcorper ornare.

Danger

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. Suspendisse molestie ullamcorper ornare.

Secondary

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. Suspendisse molestie ullamcorper ornare.

                                                
                                                    <!-- Ribbons style 1 -->

                                                    <!-- Left -->
                                                    <div class="card ribbon-box">
                                                        <div class="card-body">
                                                            <div class="ribbon ribbon-primary float-start"><i class="mdi mdi-access-point me-1"></i> Primary</div>
                                                            <h5 class="text-primary float-end mt-0">Primary Header</h5>
                                                            <div class="ribbon-content">
                                                                ...
                                                            </div>
                                                        </div> <!-- end card-body -->
                                                    </div> <!-- end card-->
                                                    
                                                    <!-- Right -->
                                                    <div class="card ribbon-box">
                                                        <div class="card-body">
                                                            <div class="ribbon ribbon-success float-end"><i class="mdi mdi-access-point me-1"></i> Success</div>
                                                            <h5 class="text-success float-start mt-0">Success Header</h5>
                                                            <div class="ribbon-content">
                                                                ...
                                                            </div>
                                                        </div> <!-- end card-body -->
                                                    </div> <!-- end card-->
                                                    
                                                    
                                                    <!-- Ribbons style 2 -->
                                                    
                                                    <div class="card ribbon-box">
                                                        <div class="card-body">
                                                            <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. </p>
                                                        </div> <!-- end card-body -->
                                                    </div> <!-- end card-->
                                                
                                            
Settings
Color Scheme

Width

Purchase Now