DSMU Design System for Mauritius

Media (images & video)

DSMU is text-first. The system provides accessible containers and rules for media — it does not ship images or video. Those are content, supplied by each service.

Use media sparingly

Following the GOV.UK approach: services usually work best without images. Write clear content first; images and video are visual aids, and the written content must carry all the information a user needs. In particular:

  • Do not use images for decoration, to convey emotion, or to show text.
  • Use a photo only when a lifelike representation matters (e.g. a preview of an upload).
  • Every meaningful image needs short alt text; decorative images use alt="".
  • Media is the heaviest thing on a page — mind the mobile data and performance budget.

Figure

An image with required alt text and an optional caption. Set width and height to avoid layout shift.

Figure with caption
Preview of the document you uploaded
Figure 1: your uploaded document
Show code
<DsmuFigure
  src="/uploads/preview.png"
  alt="Preview of the document you uploaded"
  caption="Figure 1: your uploaded document"
  :width="800"
  :height="450"
/>

Video

Video uses a click-to-load facade: nothing loads until the user activates it. For third-party embeds (e.g. YouTube via youtube-nocookie.com) this means no third-party requests or cookies fire until consent — better for performance and for DPA-2017. Provide captions and a transcript, real controls, and never autoplay with sound.

Click-to-load video
Show code
<DsmuVideo
  title="How to apply for a permit"
  poster="/media/video-poster.jpg"
  src="https://www.youtube-nocookie.com/embed/VIDEO_ID"
  href="https://www.youtube.com/watch?v=VIDEO_ID"
/>

The demo above plays a small public sample so you can see the facade load on click. In production, pass a youtube-nocookie.com/embed/… URL (or your own file).