UNPKG

@amsterdam/design-system-css

Version:

Stylesheets for all components from the Amsterdam Design System and some general utilities. Use it to apply the visual design of the City of Amsterdam to your HTML elements or non-React components.

designsystem.amsterdam

Amsterdam/design-system

22 lines (15 loc) • 955 B
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!-- @license CC0-1.0 --> # Grid Divides the screen into columns to align the elements of a page. ## Guidelines - Every page should use the grid as the foundation for its layout. It is placed directly within the [Screen](/docs/components-layout-screen--docs). - A [Footer](/docs/components-containers-footer--docs) and a [Spotlight](/docs/components-containers-spotlight--docs) are slightly wider than the grid. You close one instance of the grid before these components. Inside and optionally after them, you start a new one. Multiple instances of the grid component are possible on a page, but the columns of all grids must align precisely. - Within the grid, you create cells containing the desired content. A cell often spans multiple columns of the grid. - The Gap utility classes must not be used on the Grid component. ## Design The [design choices](/docs/brand-design-tokens-grid--docs) are described in the general documentation.