codecalm
1.2 KiB
title, menu, new
| title | menu | new |
|---|---|---|
| Ribbons | docs.ribbons | true |
Default markup
{% example html columns=1 %} {% include cards/ribbon.html %} {% endexample %}
Ribbon position
You can easily change the position of a ribbon by adding a class to the element.
`ribbon-top` - moves it to the top
`ribbon-right` - moves it to the right
`ribbon-bottom` - moves it to the bottom
`ribbon-left` - moves it to the lefg
You can also use multiple classes at once for example: .ribbon.ribbon-top.ribbon-left moves the ribbon to the top left corner.
{% example html columns=1 %} {% include cards/ribbon.html top=true left=true %} {% endexample %}
Ribbon color
Customize the ribbon's background color. You can click [here]({% docs_url colors %}) to see the list of available colors.
{% example html columns=1 %} {% include cards/ribbon.html color="red" %} {% endexample %}
Ribbon text
Set your own text in a ribbon.
{% example html columns=1 %} {% include cards/ribbon.html color="green" text="-50%" %} {% endexample %}
Ribbon style
Change the style of a ribbon.
{% example html columns=1 %} {% include cards/ribbon.html bookmark=true color="orange" text="-50%" %} {% endexample %}