@gemeente-denhaag/image NPM

Image

Four image variants: image only, image with caption, image, image with download, image with caption and download.

When to use

Use images where content may benefit from a supporting example to clarify information.

Alternatives and related components

None.

Anatomy

The image consists of:

Picture
Caption text (optional): gives the image additional context or provides source attribution
Download link (optional): shows the download option
Divider: line under the caption text and navigational link

(Interactive) states

None.

Design properties

Typography

Caption text: TheSans/sm/400
Download link see: navigational-links

Colors

Caption text: text color Grey/4

Structure

Desktop

Picture: padding-bottom 16px
Download link: padding-left 24px
Divider see: divider
Image: margin-bottom 32px

Mobile

Image: padding-bottom 16px
Download icon: size 24px, padding-left 16px
Divider see: divider
Image: margin-bottom 24px

Aspect ratio

The aspect ratio that is being used for images, is 16:9.

Use of images

Header image

The header image appears above the content. It will always take space on 1 column.

Standard images

Standard images appear after the text or below it. There can be multiple images below each other. It will always take space on 1 column.

Left or right aligned image

Standard, news and event templates allow images that are aligned left or right in the page. They will always take space on 1 of the two columns.

Image gallery

The gallery is a bundle of images, where there are at least 2 images next to or below each other. The images are always left aligned in a gallery. They will always take space on 1, 2 or 3 columns.

Accessibility

Images must always be supported with text alternatives which are descriptive of the information they present. Alternative text is read out by screen readers for users with visual impairments and where an image does not load. Text should never be included as part of the image as this will not be read out by screen readers or translated by automated translators.

W3C gives guidance on how to make images accessible.

Content guidelines

None.

Best practices

Do's

Images should:

Illustrate concrete things (for example, animals, I.D. cards, plate stickers), not abstract concepts (for example, light, holistic, synergy)
Be optimized for the web to reduce the file size as much as possible while maintaining a reasonable quality

Don'ts

Images should:

Not be unrelated to the page’s subject matter
Not be too small to show important details, especially if viewed on mobile devices
Not have text on it

References

https://designsystem.ontario.ca/docs/basics/images.html

@infinitebrahmanuniverse/nolb-_gem @everything-registry/sub-chunk-355 @gemeente-denhaag/storybook

10 days ago

17 days ago

16 days ago

23 days ago

30 days ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

5 months ago

5 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

6 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

8 months ago

8 months ago

10 months ago

10 months ago

10 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

9 months ago

10 months ago

8 months ago

8 months ago

11 months ago

11 months ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago