Labels

Labels are pieces of content displayed in a more visual way than just plain text. Labels come in different sizes and colours depending on the use cases.

Sizes

Labels can come in different sizes. Smaller layouts or devices ask for a more dense labels, whereas in larger layouts or in the webinterface more bolder labels can be required.

Default label

{% include '@leviy-templates/components/label.html.twig' with {
    'text': 'Default label'
} %}

Small label

{% include '@leviy-templates/components/label.html.twig' with {
    'text': 'Small label',
    'small': true
} %}

Colours

Labels can come in various colours to communicate level of importance or status.

Default Success Warning Danger Info

{% include '@leviy-templates/components/label.html.twig' with {
    'text': 'Default'
} %}

{% include '@leviy-templates/components/label.html.twig' with {
    'text': 'Success',
    'style': 'success'
} %}

{% include '@leviy-templates/components/label.html.twig' with {
    'text': 'Warning',
    'style': 'warning'
} %}

{% include '@leviy-templates/components/label.html.twig' with {
    'text': 'Danger',
    'style': 'danger'
} %}

{% include '@leviy-templates/components/label.html.twig' with {
    'text': 'Info',
    'style': 'info'
} %}

Sizes
Colours