Colors

We are using Bootstrap classes for colors and in rare occasions, the Bootstrap classes from the Alert component whenever the content is purely informative and should not be the center of attention. We use only a subset of what they offer to not have multiple tones of a color. Be sure to check if the contrast is passing WebAIM recommendations for text or link.

Example

  • .bg-primary
    .alert-primary

    .text-primary

  • .bg-secondary
    .alert-secondary

    .text-secondary

  • .bg-danger
    .alert-danger

    .text-danger

  • .bg-warning
    .alert-warning

    .text-warning

  • .bg-dark
    .alert-dark

    .text-dark

  • .bg-light
    .alert-light

    .text-light

Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

%ul.colors.d-flex.flex-wrap.list-unstyled.m-0.p-0
  %li.border.mr-1.mb-1
    .color.text-center.bg-primary .bg-primary
    .color.text-center.alert-primary .alert-primary
    %p.m-0.text-center.text-primary .text-primary
  %li.border.mr-1.mb-1
    .color.text-center.bg-secondary .bg-secondary
    .color.text-center.alert-secondary .alert-secondary
    %p.m-0.text-center.text-secondary .text-secondary
  %li.border.mr-1.mb-1
    .color.text-center.bg-danger .bg-danger
    .color.text-center.alert-danger .alert-danger
    %p.m-0.text-center.text-danger .text-danger
  %li.border.mr-1.mb-1
    .color.text-center.bg-warning .bg-warning
    .color.text-center.alert-warning .alert-warning
    %p.m-0.text-center.text-warning .text-warning
  %li.border.mr-1.mb-1
    .color.text-center.bg-dark.text-light .bg-dark
    .color.text-center.alert-dark .alert-dark
    %p.m-0.text-center.text-dark .text-dark
  %li.border.mr-1.mb-1
    .color.text-center.bg-light .bg-light
    .color.text-center.alert-light .alert-light
    %p.m-0.text-center.bg-dark.text-light .text-light