CDN
Hintergrundmuster sind im Haupt-Bundle enthalten.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ak-hosting/ak-systems-css@v2.0.2/dist/ak-design-system.min.css">
Muster-Typen
Punkte
ak-bg-pattern-dots
<div class="ak-bg-surface ak-bg-pattern ak-bg-pattern-dots ak-bg-pattern-subtle">...</div>
Raster
ak-bg-pattern-grid
<div class="ak-bg-surface ak-bg-pattern ak-bg-pattern-grid ak-bg-pattern-subtle">...</div>
Streifen
ak-bg-pattern-stripes
<div class="ak-bg-surface ak-bg-pattern ak-bg-pattern-stripes ak-bg-pattern-subtle">...</div>
Schachbrett
ak-bg-pattern-checker
<div class="ak-bg-surface ak-bg-pattern ak-bg-pattern-checker ak-bg-pattern-subtle">...</div>
Wellen
ak-bg-pattern-waves
<div class="ak-bg-surface ak-bg-pattern ak-bg-pattern-waves ak-bg-pattern-primary">...</div>
Farben & Größen
Accent + Large
ak-bg-pattern-accent ak-bg-pattern-lg
<div class="ak-bg-surface ak-bg-pattern ak-bg-pattern-grid ak-bg-pattern-accent ak-bg-pattern-lg">...</div>
Muted + Small
ak-bg-pattern-muted ak-bg-pattern-sm
<div class="ak-bg-surface ak-bg-pattern ak-bg-pattern-dots ak-bg-pattern-muted ak-bg-pattern-sm">...</div>
Art-Hintergründe
Hero
ak-bg-art-hero
<div class="ak-bg-background ak-bg-art ak-bg-art-hero">...</div>
Mesh
ak-bg-art-mesh
<div class="ak-bg-background ak-bg-art ak-bg-art-mesh">...</div>
Eigene Variablen
Muster können über CSS-Variablen feinjustiert werden.
--ak-bg-pattern-size / --ak-bg-pattern-thickness / --ak-bg-pattern-ink
<div class="ak-bg-surface ak-bg-pattern ak-bg-pattern-stripes" style="--ak-bg-pattern-size:32px;--ak-bg-pattern-thickness:2px;--ak-bg-pattern-ink:var(--ak-color-primary);">...</div>