Patterns
Pattern Utilities allow you to easily apply decorative background patterns using CSS gradients. These patterns are useful for adding visual texture, brand identity, or subtle separation between UI elements. All utilities are prefixed with .al-pattern-* and support Bootstrap color variables, including opacity control.
All classes use the al- prefix and follow utility-first conventions.
Overview
| Pattern Type | Class Format | Sizes Available | Description |
|---|---|---|---|
| Checks | .al-pattern-checks-{size} | sm, md, lg, xl | Cross-checkboard pattern |
| Grid | .al-pattern-grid-{size} | sm, md, lg, xl | Basic horizontal/vertical grid |
| Dots | .al-pattern-dots-{size} | sm, md, lg, xl | Simple dotted pattern |
| Cross Dots | .al-pattern-cross-dots-{size} | sm, md, lg, xl | Alternating cross dots |
| Diagonal Lines | .al-pattern-diagonal-lines-{size} | sm, md, lg, xl | Repeating 45° lines |
| Horizontal Lines | .al-pattern-horizontal-lines-{size} | sm, md, lg, xl | Horizontal line patterns |
| Vertical Lines | .al-pattern-vertical-lines-{size} | sm, md, lg, xl | Vertical line patterns |
| Diagonal Stripes | .al-pattern-diagonal-stripes-{size} | sm, md, lg, xl | Alternating diagonal stripes |
| Horizontal Stripes | .al-pattern-horizontal-stripes-{size} | sm, md, lg, xl | Horizontal stripe fill |
| Vertical Stripes | .al-pattern-vertical-stripes-{size} | sm, md, lg, xl | Vertical stripe fill |
| Triangles | .al-pattern-triangles-{size} | sm, md, lg, xl | Triangle tessellation |
| Zigzag | .al-pattern-zigzag-{size} | sm, md, lg, xl | Zigzag patterned diagonal fill |
| Pattern Type | Class Format | Description |
|---|---|---|
| Pattern color | .al-pattern-{color} | Pattern color outline |
| Pattern color with opacity | .al-pattern-{color}-{opacity} | RGBA color pattern |
| Text Patterns | .al-text-pattern | Cliping pattern text |
Sass Reference
assets/scss/_patterns.scss
Copy
Class Usage Reference
| Class | Effect |
|---|---|
| .al-pattern-grid-sm | Small grid |
| .al-pattern-dots-lg | Large dot |
| .al-pattern-triangles-md | Medium triangle |
| .al-pattern-cross-dots-xl | Extra-large cross dots |
| .al-pattern-primary | Sets pattern color to primary |
| .al-pattern-warning-10 | Primary pattern color with 10% opacity |
| .al-text-pattern | Applies pattern as text fill |
Examples
Patterns
Checks
Grid
Dots
Cross Dots
Diagonal Lines
Horizontal Lines
Vertical Lines
Diagonal Stripes
Horizontal Stripes
Vertical Stripes
Triangles
Zigzag
Grid Double
Copy
Checks
Grid
Dots
Cross dots
Diagonal lines
Horizontal lines
Vertical lines
Diagonal stripes
Horizontal stripes
Vertical stripes
Triangles
Zigzag
Grid double
Sizing
-sm
-md
-lg
-xl
Copy
sm
md
lg
xl
Colors
Primary
Secondary
Success
Warning
Danger
Info
black
White
RGBA color pattern
Opacity 2%
Opacity 3%
Opacity 4%
Opacity 25%
Opacity 10%
Opacity 25%
Opacity 50%
Opacity 75%
Copy
Primary
Secondary
Success
Warning
Danger
Info
Black
White
// RGBA color pattern
Opacity 2%
Opacity 3%
Opacity 4%
Opacity 25%
Opacity 10%
Opacity 25%
Opacity 50%
Opacity 75%
Text Pattern
alfuix
Copy
alfuix
Developer Notes
-
Uses only native CSS gradients and Bootstrap tokens
-
Extendable with more pattern types
-
Designed to match Bootstrap design tokens
-
Works with light/dark modes depending on --pattern-color
-
--pattern-color can be set using utility classes like .al-pattern-primary, .al-pattern-warning-50, etc.