Ribbon

Highlight key information in the corner of elements

Use the Ribbon component to place small, decorative labels in the corner of your cards, images, or products, to highlight key information or special statuses. They are space efficient, and can improve user decision-making by highlighting special offers, discounts, or limited-time deals. You can also use them to indicate product statuses, such as “New” or “Out of Stock”, or use them as content tags like “Top Rated”.

---
import { Card, Ribbon } from 'webcoreui/astro'
---

<!-- The `overflow-hidden` class is not a part of Webcore -->
<Card compact={true} bodyClassName="overflow-hidden">
    <Ribbon>Ribbon</Ribbon>
</Card>

<script>
    import { Card, Ribbon } from 'webcoreui/svelte'
</script>

<Card compact={true} bodyClassName="overflow-hidden">
    <Ribbon>Ribbon</Ribbon>
</Card>

import React from 'react'
import { Card, Ribbon } from 'webcoreui/react'

const Component = () => (
    <Card compact={true} bodyClassName="overflow-hidden">
        <Ribbon>Ribbon</Ribbon>
    </Card>
)

export default Component

Note that in order to use the Ribbon component, you must place it inside a container where you want the ribbon to appear. When using the default rotated ribbon, the container must have its overflow set to hidden.

Offset

Depending on the length of the text, you may want to adjust the offset of the ribbon to fit it into its container. You can achieve this by setting the offset prop:

<Ribbon offset={30}>Longer text</Ribbon>
<Ribbon offset={35}>Offset set to 35</Ribbon>

By default, offset is set to 20 (20px from top-left).

Folded Ribbons

The type of the Ribbon component can be changed to folded. In this case, the ribbon will look like the following:

<Card>
    <Ribbon type="folded">Folded ribbon</Ribbon>
</Card>

Note that in this case, the ribbon will overflow its container. Therefore, you should avoid using overflow: hidden for folded ribbons. The offset of folded ribbons can also be changed using CSS variables. If you’re using both types of ribbons and you find yourself using the same offset values, prefer using this solution for the other type as well:

html body {
    --w-ribbon-offset: 20px;
    --w-ribbon-folded-offset: 10px;
}

Themes

The Ribbon component comes with 5 different themes; secondary, info, success, warning, and alert:

<Ribbon theme="secondary" offset={30}>Secondary</Ribbon>

<Ribbon theme="info">Info</Ribbon>
<Ribbon theme="success">Success</Ribbon>
<Ribbon theme="warning">Warning</Ribbon>
<Ribbon theme="alert">Alert</Ribbon>

You can also change the style in any way you like by specifying the className prop, passing a CSS class name, and adding your own CSS.

API

type RibbonProps = {
    offset?: number
    type?: 'folded'
    theme?: 'secondary'
        | 'info'
        | 'success'
        | 'warning'
        | 'alert'
    className?: string
}