Background color
Similar to the contextual text color classes, set the background of an element to any contextual class. Background utilities do not set color, however, on light backgrounds we always use the dark variant of the regarding shade for the font-color. For these cases you’ll want to use .wui-color-* color utilities.
Theme background colors
.wui-bg-color--active
.wui-bg-color--active-10
.wui-bg-color--active-20
.wui-bg-color--active-30
.wui-bg-color--active-50
.wui-bg-color--active-60
.wui-bg-color--active-70
.wui-bg-color--success
.wui-bg-color--success-20
.wui-bg-color--success-30
.wui-bg-color--warning
.wui-bg-color--warning-20
.wui-bg-color--warning-30
.wui-bg-color--danger
.wui-bg-color--danger-20
.wui-bg-color--danger-30
.wui-bg-color--highlight
.wui-bg-color--highlight-10
.wui-bg-color--highlight-20
.wui-bg-color--highlight-30
.wui-bg-color--highlight-70
.wui-bg-color--inactive
.wui-bg-color--inactive-20
.wui-bg-color--inactive-30
.wui-bg-color--inactive-70
.wui-bg-color--primary
.wui-bg-color--black
.wui-bg-color--dove-alpha-9
.wui-bg-color--dove-alpha-7
.wui-bg-color--white
.wui-bg-color--white-alpha-7
.wui-bg-color--transparent
<div class="p-15 m-b-5 wui-bg-color--active wui-color--white">.wui-bg-color--active</div>
<div class="p-15 m-b-5 wui-bg-color--active-10 wui-color--active-70">.wui-bg-color--active-10</div>
<div class="p-15 m-b-5 wui-bg-color--active-20 wui-color--active-70">.wui-bg-color--active-20</div>
<div class="p-15 m-b-5 wui-bg-color--active-30 wui-color--active-70">.wui-bg-color--active-30</div>
<div class="p-15 m-b-5 wui-bg-color--active-50 wui-color--white">.wui-bg-color--active-50</div>
<div class="p-15 m-b-5 wui-bg-color--active-60 wui-color--white">.wui-bg-color--active-60</div>
<div class="p-15 m-b-5 wui-bg-color--active-70 wui-color--white">.wui-bg-color--active-70</div>
<div class="p-15 m-b-5 wui-bg-color--success wui-color--white">.wui-bg-color--success</div>
<div class="p-15 m-b-5 wui-bg-color--success-20 wui-color--success">.wui-bg-color--success-20</div>
<div class="p-15 m-b-5 wui-bg-color--success-30 wui-color--success">.wui-bg-color--success-30</div>
<div class="p-15 m-b-5 wui-bg-color--warning wui-color--warning-dark">.wui-bg-color--warning</div>
<div class="p-15 m-b-5 wui-bg-color--warning-20 wui-color--warning-dark">.wui-bg-color--warning-20</div>
<div class="p-15 m-b-5 wui-bg-color--warning-30 wui-color--warning-dark">.wui-bg-color--warning-30</div>
<div class="p-15 m-b-5 wui-bg-color--danger wui-color--white">.wui-bg-color--danger</div>
<div class="p-15 m-b-5 wui-bg-color--danger-20 wui-color--danger">.wui-bg-color--danger-20</div>
<div class="p-15 m-b-5 wui-bg-color--danger-30 wui-color--danger">.wui-bg-color--danger-30</div>
<div class="p-15 m-b-5 wui-bg-color--highlight wui-color--white">.wui-bg-color--highlight</div>
<div class="p-15 m-b-5 wui-bg-color--highlight-10 wui-color--highlight-70">.wui-bg-color--highlight-10</div>
<div class="p-15 m-b-5 wui-bg-color--highlight-20 wui-color--highlight-70">.wui-bg-color--highlight-20</div>
<div class="p-15 m-b-5 wui-bg-color--highlight-30 wui-color--highlight-70">.wui-bg-color--highlight-30</div>
<div class="p-15 m-b-5 wui-bg-color--highlight-70 wui-color--white">.wui-bg-color--highlight-70</div>
<div class="p-15 m-b-5 wui-bg-color--inactive wui-color--white">.wui-bg-color--inactive</div>
<div class="p-15 m-b-5 wui-bg-color--inactive-20">.wui-bg-color--inactive-20</div>
<div class="p-15 m-b-5 wui-bg-color--inactive-30">.wui-bg-color--inactive-30</div>
<div class="p-15 m-b-5 wui-bg-color--inactive-70 wui-color--white">.wui-bg-color--inactive-70</div>
<div class="p-15 m-b-5 wui-bg-color--primary wui-color--white">.wui-bg-color--primary</div>
<div class="p-15 m-b-5 wui-bg-color--black wui-color--white">.wui-bg-color--black</div>
<div class="p-15 m-b-5 wui-bg-color--dove-alpha-9 wui-color--white">.wui-bg-color--dove-alpha-9</div>
<div class="p-15 m-b-5 wui-bg-color--dove-alpha-7 wui-color--white">.wui-bg-color--dove-alpha-7</div>
<div class="p-15 m-b-5 wui-bg-color--white">.wui-bg-color--white</div>
<div class="p-15 m-b-5 wui-bg-color--white-alpha-7">.wui-bg-color--white-alpha-7</div>
<div class="p-15 m-b-5 wui-bg-color--transparent">.wui-bg-color--transparent</div>
Background color shades
.wui-bg-color--gray-20
.wui-bg-color--gray-33
.wui-bg-color--gray-46
.wui-bg-color--gray-60
.wui-bg-color--gray-80
.wui-bg-color--gray-87
.wui-bg-color--gray-90
.wui-bg-color--gray-95
.wui-bg-color--peach
.wui-bg-color--peach-10
.wui-bg-color--peach-20
.wui-bg-color--peach-30
.wui-bg-color--peach-40
.wui-bg-color--peach-50
.wui-bg-color--peach-60
.wui-bg-color--peach-70
.wui-bg-color--yangmei
.wui-bg-color--yangmei-10
.wui-bg-color--yangmei-20
.wui-bg-color--yangmei-30
.wui-bg-color--yangmei-40
.wui-bg-color--yangmei-50
.wui-bg-color--yangmei-60
.wui-bg-color--yangmei-70
.wui-bg-color--pitaya
.wui-bg-color--pitaya-10
.wui-bg-color--pitaya-20
.wui-bg-color--pitaya-30
.wui-bg-color--pitaya-40
.wui-bg-color--pitaya-50
.wui-bg-color--pitaya-60
.wui-bg-color--pitaya-70
.wui-bg-color--fig
.wui-bg-color--fig-10
.wui-bg-color--fig-20
.wui-bg-color--fig-30
.wui-bg-color--fig-40
.wui-bg-color--fig-50
.wui-bg-color--fig-60
.wui-bg-color--fig-70
.wui-bg-color--plum
.wui-bg-color--plum-10
.wui-bg-color--plum-20
.wui-bg-color--plum-30
.wui-bg-color--plum-40
.wui-bg-color--plum-50
.wui-bg-color--plum-60
.wui-bg-color--plum-70
.wui-bg-color--blueberry
.wui-bg-color--blueberry-10
.wui-bg-color--blueberry-20
.wui-bg-color--blueberry-30
.wui-bg-color--blueberry-40
.wui-bg-color--blueberry-50
.wui-bg-color--blueberry-60
.wui-bg-color--blueberry-70
.wui-bg-color--akebi
.wui-bg-color--akebi-10
.wui-bg-color--akebi-20
.wui-bg-color--akebi-30
.wui-bg-color--akebi-40
.wui-bg-color--akebi-50
.wui-bg-color--akebi-60
.wui-bg-color--akebi-70
.wui-bg-color--grapes
.wui-bg-color--grapes-10
.wui-bg-color--grapes-20
.wui-bg-color--grapes-30
.wui-bg-color--grapes-40
.wui-bg-color--grapes-50
.wui-bg-color--grapes-60
.wui-bg-color--grapes-70
.wui-bg-color--feijoa
.wui-bg-color--feijoa-10
.wui-bg-color--feijoa-20
.wui-bg-color--feijoa-30
.wui-bg-color--feijoa-40
.wui-bg-color--feijoa-50
.wui-bg-color--feijoa-60
.wui-bg-color--feijoa-70
.wui-bg-color--apple
.wui-bg-color--apple-10
.wui-bg-color--apple-20
.wui-bg-color--apple-30
.wui-bg-color--apple-40
.wui-bg-color--apple-50
.wui-bg-color--apple-60
.wui-bg-color--apple-70
.wui-bg-color--olive
.wui-bg-color--olive-10
.wui-bg-color--olive-20
.wui-bg-color--olive-30
.wui-bg-color--olive-40
.wui-bg-color--olive-50
.wui-bg-color--olive-60
.wui-bg-color--olive-70
.wui-bg-color--kiwano
.wui-bg-color--kiwano-10
.wui-bg-color--kiwano-20
.wui-bg-color--kiwano-30
.wui-bg-color--kiwano-40
.wui-bg-color--kiwano-50
.wui-bg-color--kiwano-60
.wui-bg-color--kiwano-70
.wui-bg-color--papaya
.wui-bg-color--papaya-10
.wui-bg-color--papaya-20
.wui-bg-color--papaya-30
.wui-bg-color--papaya-40
.wui-bg-color--papaya-50
.wui-bg-color--papaya-60
.wui-bg-color--papaya-70
.wui-bg-color--cherry
.wui-bg-color--cherry-10
.wui-bg-color--cherry-20
.wui-bg-color--cherry-30
.wui-bg-color--cherry-40
.wui-bg-color--cherry-50
.wui-bg-color--cherry-60
.wui-bg-color--cherry-70
<div class="display--flex flex-wrap" style="gap: 10px">
<div class="flex-grow-1 w-1/5">
<div class="p-15 m-b-5 wui-bg-color--gray-20 wui-color--white">.wui-bg-color--gray-20</div>
<div class="p-15 m-b-5 wui-bg-color--gray-33 wui-color--white">.wui-bg-color--gray-33</div>
<div class="p-15 m-b-5 wui-bg-color--gray-46 wui-color--white">.wui-bg-color--gray-46</div>
<div class="p-15 m-b-5 wui-bg-color--gray-60 wui-color--white">.wui-bg-color--gray-60</div>
<div class="p-15 m-b-5 wui-bg-color--gray-80">.wui-bg-color--gray-80</div>
<div class="p-15 m-b-5 wui-bg-color--gray-87">.wui-bg-color--gray-87</div>
<div class="p-15 m-b-5 wui-bg-color--gray-90">.wui-bg-color--gray-90</div>
<div class="p-15 m-b-5 wui-bg-color--gray-95">.wui-bg-color--gray-95</div>
</div>
<div class="flex-grow-1 w-1/5">
<div class="p-15 m-b-5 wui-bg-color--peach wui-color--white">.wui-bg-color--peach</div>
<div class="p-15 m-b-5 wui-bg-color--peach-10 wui-color--peach-60">.wui-bg-color--peach-10</div>
<div class="p-15 m-b-5 wui-bg-color--peach-20 wui-color--peach-60">.wui-bg-color--peach-20</div>
<div class="p-15 m-b-5 wui-bg-color--peach-30 wui-color--peach-60">.wui-bg-color--peach-30</div>
<div class="p-15 m-b-5 wui-bg-color--peach-40 wui-color--white">.wui-bg-color--peach-40</div>
<div class="p-15 m-b-5 wui-bg-color--peach-50 wui-color--white">.wui-bg-color--peach-50</div>
<div class="p-15 m-b-5 wui-bg-color--peach-60 wui-color--white">.wui-bg-color--peach-60</div>
<div class="p-15 m-b-5 wui-bg-color--peach-70 wui-color--white">.wui-bg-color--peach-70</div>
</div>
<div class="flex-grow-1 w-1/5">
<div class="p-15 m-b-5 wui-bg-color--yangmei wui-color--white">.wui-bg-color--yangmei</div>
<div class="p-15 m-b-5 wui-bg-color--yangmei-10 wui-color--yangmei-60">.wui-bg-color--yangmei-10</div>
<div class="p-15 m-b-5 wui-bg-color--yangmei-20 wui-color--yangmei-60">.wui-bg-color--yangmei-20</div>
<div class="p-15 m-b-5 wui-bg-color--yangmei-30 wui-color--yangmei-60">.wui-bg-color--yangmei-30</div>
<div class="p-15 m-b-5 wui-bg-color--yangmei-40 wui-color--white">.wui-bg-color--yangmei-40</div>
<div class="p-15 m-b-5 wui-bg-color--yangmei-50 wui-color--white">.wui-bg-color--yangmei-50</div>
<div class="p-15 m-b-5 wui-bg-color--yangmei-60 wui-color--white">.wui-bg-color--yangmei-60</div>
<div class="p-15 m-b-5 wui-bg-color--yangmei-70 wui-color--white">.wui-bg-color--yangmei-70</div>
</div>
<div class="flex-grow-1 w-1/5">
<div class="p-15 m-b-5 wui-bg-color--pitaya wui-color--white">.wui-bg-color--pitaya</div>
<div class="p-15 m-b-5 wui-bg-color--pitaya-10 wui-color--pitaya-60">.wui-bg-color--pitaya-10</div>
<div class="p-15 m-b-5 wui-bg-color--pitaya-20 wui-color--pitaya-60">.wui-bg-color--pitaya-20</div>
<div class="p-15 m-b-5 wui-bg-color--pitaya-30 wui-color--pitaya-60">.wui-bg-color--pitaya-30</div>
<div class="p-15 m-b-5 wui-bg-color--pitaya-40 wui-color--white">.wui-bg-color--pitaya-40</div>
<div class="p-15 m-b-5 wui-bg-color--pitaya-50 wui-color--white">.wui-bg-color--pitaya-50</div>
<div class="p-15 m-b-5 wui-bg-color--pitaya-60 wui-color--white">.wui-bg-color--pitaya-60</div>
<div class="p-15 m-b-5 wui-bg-color--pitaya-70 wui-color--white">.wui-bg-color--pitaya-70</div>
</div>
<div class="flex-grow-1 w-1/5">
<div class="p-15 m-b-5 wui-bg-color--fig wui-color--white">.wui-bg-color--fig</div>
<div class="p-15 m-b-5 wui-bg-color--fig-10 wui-color--fig-60">.wui-bg-color--fig-10</div>
<div class="p-15 m-b-5 wui-bg-color--fig-20 wui-color--fig-60">.wui-bg-color--fig-20</div>
<div class="p-15 m-b-5 wui-bg-color--fig-30 wui-color--fig-60">.wui-bg-color--fig-30</div>
<div class="p-15 m-b-5 wui-bg-color--fig-40 wui-color--white">.wui-bg-color--fig-40</div>
<div class="p-15 m-b-5 wui-bg-color--fig-50 wui-color--white">.wui-bg-color--fig-50</div>
<div class="p-15 m-b-5 wui-bg-color--fig-60 wui-color--white">.wui-bg-color--fig-60</div>
<div class="p-15 m-b-5 wui-bg-color--fig-70 wui-color--white">.wui-bg-color--fig-70</div>
</div>
<div class="flex-grow-1 w-1/5">
<div class="p-15 m-b-5 wui-bg-color--plum wui-color--white">.wui-bg-color--plum</div>
<div class="p-15 m-b-5 wui-bg-color--plum-10 wui-color--plum-60">.wui-bg-color--plum-10</div>
<div class="p-15 m-b-5 wui-bg-color--plum-20 wui-color--plum-60">.wui-bg-color--plum-20</div>
<div class="p-15 m-b-5 wui-bg-color--plum-30 wui-color--plum-60">.wui-bg-color--plum-30</div>
<div class="p-15 m-b-5 wui-bg-color--plum-40 wui-color--white">.wui-bg-color--plum-40</div>
<div class="p-15 m-b-5 wui-bg-color--plum-50 wui-color--white">.wui-bg-color--plum-50</div>
<div class="p-15 m-b-5 wui-bg-color--plum-60 wui-color--white">.wui-bg-color--plum-60</div>
<div class="p-15 m-b-5 wui-bg-color--plum-70 wui-color--white">.wui-bg-color--plum-70</div>
</div>
<div class="flex-grow-1 w-1/5">
<div class="p-15 m-b-5 wui-bg-color--blueberry wui-color--white">.wui-bg-color--blueberry</div>
<div class="p-15 m-b-5 wui-bg-color--blueberry-10 wui-color--blueberry-60">.wui-bg-color--blueberry-10</div>
<div class="p-15 m-b-5 wui-bg-color--blueberry-20 wui-color--blueberry-60">.wui-bg-color--blueberry-20</div>
<div class="p-15 m-b-5 wui-bg-color--blueberry-30 wui-color--blueberry-60">.wui-bg-color--blueberry-30</div>
<div class="p-15 m-b-5 wui-bg-color--blueberry-40 wui-color--white">.wui-bg-color--blueberry-40</div>
<div class="p-15 m-b-5 wui-bg-color--blueberry-50 wui-color--white">.wui-bg-color--blueberry-50</div>
<div class="p-15 m-b-5 wui-bg-color--blueberry-60 wui-color--white">.wui-bg-color--blueberry-60</div>
<div class="p-15 m-b-5 wui-bg-color--blueberry-70 wui-color--white">.wui-bg-color--blueberry-70</div>
</div>
<div class="flex-grow-1 w-1/5">
<div class="p-15 m-b-5 wui-bg-color--akebi wui-color--white">.wui-bg-color--akebi</div>
<div class="p-15 m-b-5 wui-bg-color--akebi-10 wui-color--akebi-60">.wui-bg-color--akebi-10</div>
<div class="p-15 m-b-5 wui-bg-color--akebi-20 wui-color--akebi-60">.wui-bg-color--akebi-20</div>
<div class="p-15 m-b-5 wui-bg-color--akebi-30 wui-color--akebi-60">.wui-bg-color--akebi-30</div>
<div class="p-15 m-b-5 wui-bg-color--akebi-40 wui-color--white">.wui-bg-color--akebi-40</div>
<div class="p-15 m-b-5 wui-bg-color--akebi-50 wui-color--white">.wui-bg-color--akebi-50</div>
<div class="p-15 m-b-5 wui-bg-color--akebi-60 wui-color--white">.wui-bg-color--akebi-60</div>
<div class="p-15 m-b-5 wui-bg-color--akebi-70 wui-color--white">.wui-bg-color--akebi-70</div>
</div>
<div class="flex-grow-1 w-1/5">
<div class="p-15 m-b-5 wui-bg-color--grapes wui-color--white">.wui-bg-color--grapes</div>
<div class="p-15 m-b-5 wui-bg-color--grapes-10 wui-color--grapes-60">.wui-bg-color--grapes-10</div>
<div class="p-15 m-b-5 wui-bg-color--grapes-20 wui-color--grapes-60">.wui-bg-color--grapes-20</div>
<div class="p-15 m-b-5 wui-bg-color--grapes-30 wui-color--grapes-60">.wui-bg-color--grapes-30</div>
<div class="p-15 m-b-5 wui-bg-color--grapes-40 wui-color--white">.wui-bg-color--grapes-40</div>
<div class="p-15 m-b-5 wui-bg-color--grapes-50 wui-color--white">.wui-bg-color--grapes-50</div>
<div class="p-15 m-b-5 wui-bg-color--grapes-60 wui-color--white">.wui-bg-color--grapes-60</div>
<div class="p-15 m-b-5 wui-bg-color--grapes-70 wui-color--white">.wui-bg-color--grapes-70</div>
</div>
<div class="flex-grow-1 w-1/5">
<div class="p-15 m-b-5 wui-bg-color--feijoa wui-color--white">.wui-bg-color--feijoa</div>
<div class="p-15 m-b-5 wui-bg-color--feijoa-10 wui-color--feijoa-60">.wui-bg-color--feijoa-10</div>
<div class="p-15 m-b-5 wui-bg-color--feijoa-20 wui-color--feijoa-60">.wui-bg-color--feijoa-20</div>
<div class="p-15 m-b-5 wui-bg-color--feijoa-30 wui-color--feijoa-60">.wui-bg-color--feijoa-30</div>
<div class="p-15 m-b-5 wui-bg-color--feijoa-40 wui-color--white">.wui-bg-color--feijoa-40</div>
<div class="p-15 m-b-5 wui-bg-color--feijoa-50 wui-color--white">.wui-bg-color--feijoa-50</div>
<div class="p-15 m-b-5 wui-bg-color--feijoa-60 wui-color--white">.wui-bg-color--feijoa-60</div>
<div class="p-15 m-b-5 wui-bg-color--feijoa-70 wui-color--white">.wui-bg-color--feijoa-70</div>
</div>
<div class="flex-grow-1 w-1/5">
<div class="p-15 m-b-5 wui-bg-color--apple wui-color--white">.wui-bg-color--apple</div>
<div class="p-15 m-b-5 wui-bg-color--apple-10 wui-color--apple-60">.wui-bg-color--apple-10</div>
<div class="p-15 m-b-5 wui-bg-color--apple-20 wui-color--apple-60">.wui-bg-color--apple-20</div>
<div class="p-15 m-b-5 wui-bg-color--apple-30 wui-color--apple-60">.wui-bg-color--apple-30</div>
<div class="p-15 m-b-5 wui-bg-color--apple-40 wui-color--white">.wui-bg-color--apple-40</div>
<div class="p-15 m-b-5 wui-bg-color--apple-50 wui-color--white">.wui-bg-color--apple-50</div>
<div class="p-15 m-b-5 wui-bg-color--apple-60 wui-color--white">.wui-bg-color--apple-60</div>
<div class="p-15 m-b-5 wui-bg-color--apple-70 wui-color--white">.wui-bg-color--apple-70</div>
</div>
<div class="flex-grow-1 w-1/5">
<div class="p-15 m-b-5 wui-bg-color--olive wui-color--white">.wui-bg-color--olive</div>
<div class="p-15 m-b-5 wui-bg-color--olive-10 wui-color--olive-60">.wui-bg-color--olive-10</div>
<div class="p-15 m-b-5 wui-bg-color--olive-20 wui-color--olive-60">.wui-bg-color--olive-20</div>
<div class="p-15 m-b-5 wui-bg-color--olive-30 wui-color--olive-60">.wui-bg-color--olive-30</div>
<div class="p-15 m-b-5 wui-bg-color--olive-40 wui-color--white">.wui-bg-color--olive-40</div>
<div class="p-15 m-b-5 wui-bg-color--olive-50 wui-color--white">.wui-bg-color--olive-50</div>
<div class="p-15 m-b-5 wui-bg-color--olive-60 wui-color--white">.wui-bg-color--olive-60</div>
<div class="p-15 m-b-5 wui-bg-color--olive-70 wui-color--white">.wui-bg-color--olive-70</div>
</div>
<div class="flex-grow-1 w-1/5">
<div class="p-15 m-b-5 wui-bg-color--kiwano wui-color--white">.wui-bg-color--kiwano</div>
<div class="p-15 m-b-5 wui-bg-color--kiwano-10 wui-color--kiwano-60">.wui-bg-color--kiwano-10</div>
<div class="p-15 m-b-5 wui-bg-color--kiwano-20 wui-color--kiwano-60">.wui-bg-color--kiwano-20</div>
<div class="p-15 m-b-5 wui-bg-color--kiwano-30 wui-color--kiwano-60">.wui-bg-color--kiwano-30</div>
<div class="p-15 m-b-5 wui-bg-color--kiwano-40 wui-color--white">.wui-bg-color--kiwano-40</div>
<div class="p-15 m-b-5 wui-bg-color--kiwano-50 wui-color--white">.wui-bg-color--kiwano-50</div>
<div class="p-15 m-b-5 wui-bg-color--kiwano-60 wui-color--white">.wui-bg-color--kiwano-60</div>
<div class="p-15 m-b-5 wui-bg-color--kiwano-70 wui-color--white">.wui-bg-color--kiwano-70</div>
</div>
<div class="flex-grow-1 w-1/5">
<div class="p-15 m-b-5 wui-bg-color--papaya wui-color--white">.wui-bg-color--papaya</div>
<div class="p-15 m-b-5 wui-bg-color--papaya-10 wui-color--papaya-60">.wui-bg-color--papaya-10</div>
<div class="p-15 m-b-5 wui-bg-color--papaya-20 wui-color--papaya-60">.wui-bg-color--papaya-20</div>
<div class="p-15 m-b-5 wui-bg-color--papaya-30 wui-color--papaya-60">.wui-bg-color--papaya-30</div>
<div class="p-15 m-b-5 wui-bg-color--papaya-40 wui-color--white">.wui-bg-color--papaya-40</div>
<div class="p-15 m-b-5 wui-bg-color--papaya-50 wui-color--white">.wui-bg-color--papaya-50</div>
<div class="p-15 m-b-5 wui-bg-color--papaya-60 wui-color--white">.wui-bg-color--papaya-60</div>
<div class="p-15 m-b-5 wui-bg-color--papaya-70 wui-color--white">.wui-bg-color--papaya-70</div>
</div>
<div class="flex-grow-1 w-1/5">
<div class="p-15 m-b-5 wui-bg-color--cherry wui-color--white">.wui-bg-color--cherry</div>
<div class="p-15 m-b-5 wui-bg-color--cherry-10 wui-color--cherry-60">.wui-bg-color--cherry-10</div>
<div class="p-15 m-b-5 wui-bg-color--cherry-20 wui-color--cherry-60">.wui-bg-color--cherry-20</div>
<div class="p-15 m-b-5 wui-bg-color--cherry-30 wui-color--cherry-60">.wui-bg-color--cherry-30</div>
<div class="p-15 m-b-5 wui-bg-color--cherry-40 wui-color--white">.wui-bg-color--cherry-40</div>
<div class="p-15 m-b-5 wui-bg-color--cherry-50 wui-color--white">.wui-bg-color--cherry-50</div>
<div class="p-15 m-b-5 wui-bg-color--cherry-60 wui-color--white">.wui-bg-color--cherry-60</div>
<div class="p-15 m-b-5 wui-bg-color--cherry-70 wui-color--white">.wui-bg-color--cherry-70</div>
</div>
</div>
