Background Patterns

CSS background-image patterns to help make Department and Call Center color blocks more visibly distinct.

Usage

These patterns are to be used for Department and Call Centers. They were created to help visually distinguish Department and Call Center color blocks for individuals who suffer from color blindness or poor vision.

Unlike our icons which are inlined directly into the document, we apply these patterns within a ::after pseudo element using the CSS background-image property as base64 images.

Variables

Dialtone provides Less and CSS variables for each background-image pattern. These variables provide the full url declaration for each pattern (url("data:image/svg+xml;base64,…")). These variables are provided for reference. Since these patterns are applied via a pseduo ::after element, it is strongly recommended that you apply these patterns using a class attribute.

//  --  CSS Variable
.example-class::after
{
background-image: var(--bgg-pattern-[name]--[dark|light]);
}
// -- Less Variable
.example-class::after
{
background-image: @bgg-pattern-[name]--[dark|light];
}
Pattern CSS Var Less Var
Blob (Dark)
var(--bgg-pattern-blob--dark) @bgg-pattern-blob--dark
Chevrons (Dark)
var(--bgg-pattern-chevrons--dark) @bgg-pattern-chevrons--dark
Crosses (Dark)
var(--bgg-pattern-crosses--dark) @bgg-pattern-crosses--dark
Crosshatch (Dark)
var(--bgg-pattern-crosshatch--dark) @bgg-pattern-crosshatch--dark
Dot Dash (Dark)
var(--bgg-pattern-dot-dash--dark) @bgg-pattern-dot-dash--dark
Dots & Circles (Dark)
var(--bgg-pattern-dots-circles--dark) @bgg-pattern-dots-circles--dark
Horizontal Stripes (Dark)
var(--bgg-pattern-horz-stripes--dark) @bgg-pattern-horz-stripes--dark
Slanted Stripes (Dark)
var(--bgg-pattern-slanted-stripes--dark) @bgg-pattern-slanted-stripes--dark
Steps (Dark)
var(--bgg-pattern-steps--dark) @bgg-pattern-steps--dark
Stripe (Dark)
var(--bgg-pattern-stripe--dark) @bgg-pattern-stripe--dark
Blob (Light) var(--bgg-pattern-blob--light) @bgg-pattern-blob--light
Chevrons (Light) var(--bgg-pattern-chevrons--light) @bgg-pattern-chevrons--light
Crosses (Light) var(--bgg-pattern-crosses--light) @bgg-pattern-crosses--light
Crosshatch (Light) var(--bgg-pattern-crosshatch--light) @bgg-pattern-crosshatch--light
Dot Dash (Light) var(--bgg-pattern-dot-dash--light) @bgg-pattern-dot-dash--light
Dots & Circles (Light) var(--bgg-pattern-dots-circles--light) @bgg-pattern-dots-circles--light
Horizontal Stripes (Light) var(--bgg-pattern-horz-stripes--light) @bgg-pattern-horz-stripes--light
Slanted Stripes (Light) var(--bgg-pattern-slanted-stripes--light) @bgg-pattern-slanted-stripes--light
Steps (Light) var(--bgg-pattern-steps--light) @bgg-pattern-steps--light
Stripe (Light) var(--bgg-pattern-stripe--light) @bgg-pattern-stripe--light

Classes

Dark Light
.d-bgg-pattern-blob--dark .d-bgg-pattern-blob--light
.d-bgg-pattern-chevrons--dark .d-bgg-pattern-chevrons--light
.d-bgg-pattern-crosses--dark .d-bgg-pattern-crosses--light
.d-bgg-pattern-crosshatch--dark .d-bgg-pattern-crosshatch--light
.d-bgg-pattern-dot-dash--dark .d-bgg-pattern-dot-dash--light
.d-bgg-pattern-dots-circles--dark .d-bgg-pattern-dots-circles--light
.d-bgg-pattern-horz-stripes--dark .d-bgg-pattern-horz-stripes--light
.d-bgg-pattern-slanted-stripes--dark .d-bgg-pattern-slanted-stripes--light
.d-bgg-pattern-steps--dark .d-bgg-pattern-steps--light
.d-bgg-pattern-stripe--dark .d-bgg-pattern-stripe--light

Examples

Incoming Call
Sales Support
<div class="d-bgg-pattern d-bgg-pattern-crosshatch--light d-d-flex d-ai-center d-border-radius--sm d-border-bottom-radius--none d-fs12 d-lh8 d-fw-bold d-fc-white d-bgg-navy">
<div class="d-p2">Incoming Call</div>
</div>
<div class="d-bgg-pattern d-bgg-pattern-dot-dash--dark d-d-flex d-ai-center d-border-radius--sm d-border-bottom-radius--none d-fs12 d-lh8 d-fw-bold d-bgg-berry-light">
<div class="d-p2">Sales Support</div>
</div>