CSS utility classes
Utility classes gør det nemt at ændre specifikke dele af stylingen på elementer, så det stadig sker i overrensstemmelse med designguiden.
| CSS selector(s) | Beskrivelse | Anvender CSS property |
|---|---|---|
| a11y | ||
| .ds-sr-only | Hide an element visually, but have it available for screen readers | |
| container | ||
| .ds-container, .container | Turn a block element into a centered box with standard dimensions. | --gap-lg |
| grid | ||
| .ds-grid, .grid | Display child elements in a basic grid with fixed item widths. | |
| .ds-flexgrid | Display elements in a basic grid with flexible item widths. | |
| .ds-flex-row | Display elements in a neat row | |
| .ds-flex-column | Display elements in a neat column | |
| margin | ||
| .ds-m, .ds-margin | Utility classes for margins | --space |
| padding | ||
| .ds-p, .ds-padding | Set standard padding around an element. | |
| .ds-pt | Set padding top standard size. | --space |
| .ds-pt-xxs | Set padding top size extra extra small. | --space-xxs |
| .ds-pt-xs | Set padding top size extra small. | --space-xs |
| .ds-pt-sm | Set padding top size small. | |
| .ds-pt-md | Set padding top size medium. | --space-md |
| .ds-pt-lg | Set padding top size large. | --space-lg |
| .ds-pt-xl | Set padding top size extra large. | --space-xl |
| .ds-pt-xxl | Set padding top size extra extra large. | --space-xxl |
| .ds-pb | Set padding bottom standard size. | --space |
| .ds-pb-xxs | Set padding bottom size extra extra small. | --space-xxs |
| .ds-pb-xs | Set padding bottom size extra small. | --space-xs |
| .ds-pb-sm | Set padding bottom size small. | --space-sm |
| .ds-pb-md | Set padding bottom size medium. | --space-md |
| .ds-pb-lg | Set padding bottom size large. | --space-lg |
| .ds-pb-xl | Set padding bottom size extra large. | --space-xl |
| .ds-pb-xxl | Set padding bottom size extra extra large. | --space-xxl |
| .ds-pl | Set padding left standard size. | --space |
| .ds-pl-xxs | Set padding left size extra extra small. | --space-xxs |
| .ds-pl-xs | Set padding left size extra small. | --space-xs |
| .ds-pl-sm | Set padding left size small. | --space-sm |
| .ds-pl-md | Set padding left size medium. | --space-md |
| .ds-pl-lg | Set padding left size large. | --space-lg |
| .ds-pl-xl | Set padding left size extra large. | --space-xl |
| .ds-pl-xxl | Set padding left size extra extra large. | --space-xxl |
| .ds-pr | Set padding right standard size. | --space |
| .ds-pr-xxs | Set padding right size extra extra small. | --space-xxs |
| .ds-pr-xs | Set padding right size extra small. | --space-xs |
| .ds-pr-sm | Set padding right size small. | --space-sm |
| .ds-pr-md | Set padding right size medium. | --space-md |
| .ds-pr-lg | Set padding right size large. | --space-lg |
| .ds-pr-xl | Set padding right size extra large. | --space-xl |
| .ds-pr-xxl | Set padding right size extra extra large. | --space-xxl |
| footer | ||
| .ds-footer | Page footer style | |
| header | ||
| .ds-header | Page header style | |
| icons | ||
| .big | Change an icon to size big. | |
| .hero | ||
| .bg-primary | Change an icon's background to the primary color. | --primary |
| .bg-secondary | Change an icon's background to the secondary color. | --background-color |
| .border | Make an element's border more pronounced. | --color |
| .border-soft | Change an elements border to the standard border color. | --border-color |
| .square | Make a rounded element appear square. | |
| miscs | ||
| .ds-border-round | Adds rounded corners to an element | --border-radius |
| .ds-bg-0 | Paints an element's background with base color | --bg0 |
| .ds-bg-1 | Paints an element's background with slightly tinted color | --bg1 |
| .ds-bg-2 | Paints an element's background with heavily tinted color | --bg2 |
| .ds-w-max | Sets an element's width to maximum allowed value | --w-max |
| .ds-w-min | Sets an element's width to minimum allowed value | --w-min |
| typography | ||
| .h1, h1 | Make an element's text appear as a H1 heading. | |
| .h2, h2 | Make an element's text appear as a H2 heading. | |
| .h3, h3 | Make an element's text appear as a H3 heading. | |
| .h4, h4 | Make an element's text appear as a H4 heading. | |
| .h5, .h6, h5, h6 | Make an element's text appear as a H5 or H6 heading. | |
| .small, small | Make an element's text appear smaller. | |
| card | ||
| .ds-card | Make an element appear as a card. | |