Overview

A component to display a group of related media elements.

Summarise it!

✨ This is an auto-generated AI summary of the ns-media-group's documentation. It may not be accurate. ✨

Examples

Bento

To visually narrate a story use bento type.

Configure

Guidance

Do

• Use media that are connected together to show the process of the story.
• Place the media in the correct order.
• Add appropriate ratio for each of the media.
• Use alt to narrate the story textually.

Don't

• Use bento type for other purpose than to narrate a story.

Implementation

Placement

The ns-media-group component can only be used as a child of the <ns-lockup> element.

Specification

Attributes

media

Property

media

Description

The list of media elements that needs to be displayed as a group.

Type

Array

alt

Property

alt

Description

The alternate text of the media group and needs to be related to the visual content in the media elements.

Type

string

Default

type

Property

type

Description

The type of the media group.

Type

bento

Default

standard

Specification notes

media attribute

The structure of the each of media object.

Key	Options	Description
type	image	The type of the media that needs to be displayed.
src	Refer Assets for choice of image sizes.	The link to the media.
ratio	1 / 1 4 / 3 4 / 5 16 / 9	The aspect ratio of the media.

[
  {
    "type": "image",
    "src": "/placeholder-4x5-360x450px.webp",
    "ratio": "4 / 5"
  },
  {
    "type": "image",
    "src": "/placeholder-4x3-480x360px.webp",
    "ratio": "4 / 3"
  },
  ...
]

Figma

Please note: The ns-media-group Figma component configuration instructions are available only to members of the British Gas workspace who have access to the Nucleus Figma UI Kit.

Configuration instructions

(Opens in Figma).