Ribbons

The ribbon UI component is a great way to present additional information or even highlight important content.

Bookmark ribbons

Fluid mark that spans
across multiple lines

Floating Bookmark ribbon

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusamus aut consectetur consequatur cum cupiditate debitis doloribus, error ex explicabo harum illum minima mollitia nisi nostrum officiis omnis optio qui quisquam saepe sit sunt totam vel velit voluptatibus? Adipisci ducimus expedita id nostrum quas quia!

Left
Mark
image

Absolute Bookmark

In certain cases, ribbons will have to be positioned on top of the content instead of floating besides it.

Heading ribbons

Important headings

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusamus aut consectetur consequatur cum cupiditate debitis doloribus, error ex explicabo harum illum minima mollitia nisi nostrum officiis omnis optio qui quisquam saepe sit sunt totam vel velit voluptatibus? Adipisci ducimus expedita id nostrum quas quia!

Top left inline ribbon

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur debitis dignissimos maiores nisi optio quas, quod? Animi fuga inventore laborum nemo quaerat quis quod? Alias, architecto consequuntur corporis deleniti dolor facilis id minima necessitatibus nihil perspiciatis quo repellendus saepe, sunt suscipit velit. Deleniti dolorum id maxime omnis perspiciatis sed, veniam?

Bottom right inline ribbon

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur debitis dignissimos maiores nisi optio quas, quod? Animi fuga inventore laborum nemo quaerat quis quod? Alias, architecto consequuntur corporis deleniti dolor facilis id minima necessitatibus nihil perspiciatis quo repellendus saepe, sunt suscipit velit. Deleniti dolorum id maxime omnis perspiciatis sed, veniam?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusamus aut consectetur consequatur cum cupiditate debitis doloribus, error ex explicabo harum illum minima mollitia nisi nostrum officiis omnis optio qui quisquam saepe sit sunt totam vel velit voluptatibus? Adipisci ducimus expedita id nostrum quas quia!

Various styles included

Corner ribbons

Absolute Corner ribbon

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusamus aut consectetur consequatur cum cupiditate debitis doloribus, error ex explicabo harum illum minima mollitia nisi nostrum officiis omnis optio qui quisquam saepe sit sunt totam vel velit voluptatibus? Adipisci ducimus expedita id nostrum quas quia!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusamus aut consectetur consequatur cum cupiditate debitis doloribus, error ex explicabo harum illum minima mollitia nisi nostrum officiis omnis optio qui quisquam saepe sit sunt totam vel velit voluptatibus? Adipisci ducimus expedita id nostrum quas quia!

Right Corner ribbon

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusamus aut consectetur consequatur cum cupiditate debitis doloribus, error ex explicabo harum illum minima mollitia nisi nostrum officiis omnis optio qui quisquam saepe sit sunt totam vel velit voluptatibus? Adipisci ducimus expedita id nostrum quas quia!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusamus aut consectetur consequatur cum cupiditate debitis doloribus, error ex explicabo harum illum minima mollitia nisi nostrum officiis omnis optio qui quisquam saepe sit sunt totam vel velit voluptatibus? Adipisci ducimus expedita id nostrum quas quia!