You can set any element to one of the 9 colors or 9 shades of grey:
--- title: Color helpers layout: documentation doc-tab: modifiers doc-subtab: color-helpers breadcrumb: - home - documentation - modifiers - modifiers-color-helpers --- {% include elements/anchor.html name="Text color" %}
You can set any element to one of the 9 colors or 9 shades of grey:
Class | Color |
---|---|
has-text-white | {% include color/white.html %} |
has-text-black | {% include color/black.html %} |
has-text-light | {% include color/white-ter.html %} |
has-text-dark | {% include color/grey-darker.html %} |
has-text-primary | {% include color/turquoise.html %} |
has-text-info | {% include color/cyan.html %} |
has-text-link | {% include color/blue.html %} |
has-text-success | {% include color/green.html %} |
has-text-warning | {% include color/yellow.html %} |
has-text-danger | {% include color/red.html %} |
has-text-black-bis | {% include color/black-bis.html %} |
has-text-black-ter | {% include color/black-ter.html %} |
has-text-grey-darker | {% include color/grey-darker.html %} |
has-text-grey-dark | {% include color/grey-dark.html %} |
has-text-grey | {% include color/grey.html %} |
has-text-grey-light | {% include color/grey-light.html %} |
has-text-grey-lighter | {% include color/grey-lighter.html %} |
has-text-white-ter | {% include color/white-ter.html %} |
has-text-white-bis | {% include color/white-bis.html %} |
You can set any element to one of the 9 colors or 9 shades of grey:
Class | Background color |
---|---|
has-background-white | {% include color/white.html %} |
has-background-black | {% include color/black.html %} |
has-background-light | {% include color/white-ter.html %} |
has-background-dark | {% include color/grey-darker.html %} |
has-background-primary | {% include color/turquoise.html %} |
has-background-info | {% include color/cyan.html %} |
has-background-link | {% include color/blue.html %} |
has-background-success | {% include color/green.html %} |
has-background-warning | {% include color/yellow.html %} |
has-background-danger | {% include color/red.html %} |
has-background-black-bis | {% include color/black-bis.html %} |
has-background-black-ter | {% include color/black-ter.html %} |
has-background-grey-darker | {% include color/grey-darker.html %} |
has-background-grey-dark | {% include color/grey-dark.html %} |
has-background-grey | {% include color/grey.html %} |
has-background-grey-light | {% include color/grey-light.html %} |
has-background-grey-lighter | {% include color/grey-lighter.html %} |
has-background-white-ter | {% include color/white-ter.html %} |
has-background-white-bis | {% include color/white-bis.html %} |