Basic
Ribbons have shared markup, starting with the default .ribbons class, as well as shared states. Swap modifier classes .vertical to switch ribbon direction. Add any of the below mentioned modifier classes (example, .ribbon-danger and .ribbon-warning) to change the appearance of a ribbon.
Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.
Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.
Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.
Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.
Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.
Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.
Reverse
Alternatively, you can align ribbons to the right by using .ribbon-reverse utility classes.
Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.
Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.
Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.
Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.
Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.
Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.
Bookmark
Use .ribbon-bookmark class to quickly switch a bookmark styled ribbons.
Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.
Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.
Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.
Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.
Clip
Use .ribbon-clip class to quickly switch a clip styled ribbons, add .ribbon-bottom to switch the ribbon direction.
Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.
Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.
Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.
Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.
Badge
Use .ribbon-badge class to quickly switch a badge styled ribbons, add .ribbon-bottom to switch the ribbon direction.
Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.
Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.
Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.
Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.
Corner
Use .ribbon-corner class to quickly switch a corner styled ribbons, add .ribbon-bottom to switch the ribbon direction. An icon used in an ribbon with additional .wb-heart class.
Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.
Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.
Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.
Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.