A flag is used to display meta-informations about a product or a service. It must be displayed at the top of the content, and used as an indicator of a content main category.
Please use a tag if you need to display additional information.
There is different usages, depending on a color scheme.
For display meta-informations on Leroy Merlin related content. It's used to indicate which products or services are exclusive to Leroy Merlin.
Light & Dark
Used to indicate when a product is new.
Used for sales content, to display meta-informations about a discount on a article or a product page.
Two styles to make what's important stand out
The styles are useful to create hierarchy, depending on your need and the constrast of the background.
Do's and Don'ts
Use a flag to categorize a card or a content.
Never use it inside a paragraph.
Never use a sentence or many words inside a flag.
Never use a flag as a clickable element, to trigger an action or as a link.
Never stretch a flag. Flag is never fluid, its width is depending on its content.