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.

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