Ribbon

ERibbon Ribbon is a custom micro-element that can be applied to specific elements such as cards or images to provide fixed information. Demo Here

Import

import ERibbon from "@components/Elements/ERibbon";

Usage

<ERibbon content="Out of Stock" position="top-right">
    <img src="/shoes.jpg" alt="Nike Air Max 270 Men's Shoes"/>
</ERibbon>

Props

For ERibbon component, the following props are available:

Prop	Type	Default	Note
content	node	-	The ribbon's content.
rounded	Boolean	false	Applies full rounded style.
square	Boolean	false	Removes rounded corners of the element.
className	String	-	Overrides or extends the component's wrapper styles.
variant	String	"default"	The ERibbon element can be displayed in many ways: default, slide, folded ,header,footer, gradient, bookmark ,vertical.
color	String	"primary"	The given color is applied to the ribbon - utility colors are supported (e.g primary or danger). you'll find a list of built-in classes on the src/styles/_vars.scsspage.
icon	Object	-	By using icon prop the slide ribbon element will be visualized with an Icon.More Info about icons here.
position	String	top-right	The position prop allows the ribbon to be position relative to the activator.The element can appear from the top-right, bottom-right,top-left or bottom-left edge of the parent.

Children

The ERibbon component provides a children props that enable you to indicate a ribbon on a certain element.

Children	Description
✔️	Ribbon's element.