Label
Use to describe or contextualise the content that it is placed with.
Description
The '--small' variant is described by uppercased text in small font size; often used to entitle regular size content.
The --accent variant draws attention by uppercasing the text and changing its colour to accent-orange; it is usually used in the context of the feature or bullet list components.
Activate Sass component
In order to have the styling of this component available, you need to include it in your project. After including the
Radius library in your main
./index.scss file, add this snippet:
@include radius-component-label;Usage
Usage example
This is how a default label will look.
This is how a small variant will look.
This is how an accent variant will look.
Code example
<div class="content__component-example">
<h6 class="label">This is how a default label will look.</h6>
<h6 class="label label--small">This is how a small variant will look.</h6>
<h6 class="label label--accent">This is how an accent variant will look.</h6>
</div>