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

25 lines (17 loc) • 1.23 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!-- @license CC0-1.0 --> # Aspect Ratio Constrains media content to a supported aspect ratio. ## Class names Each available aspect ratio has an associated class name. The class can be applied to any component or element. | Class name | Example | | :---------------------- | :---------------------------------------------------------------------- | | `ams-aspect-ratio-9-16` | <div className="ams-docs-token-example--space ams-aspect-ratio-9-16" /> | | `ams-aspect-ratio-3-4` | <div className="ams-docs-token-example--space ams-aspect-ratio-3-4" /> | | `ams-aspect-ratio-1-1` | <div className="ams-docs-token-example--space ams-aspect-ratio-1-1" /> | | `ams-aspect-ratio-4-3` | <div className="ams-docs-token-example--space ams-aspect-ratio-4-3" /> | | `ams-aspect-ratio-16-9` | <div className="ams-docs-token-example--space ams-aspect-ratio-16-9" /> | | `ams-aspect-ratio-16-5` | <div className="ams-docs-token-example--space ams-aspect-ratio-16-5" /> | ## Guidelines - Apply one of these classes to an image, video or other media content to constrain its dimensions to one of the available aspect ratios. - The default aspect ratio is 16:9.