<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5HGSQD2L" height="0" width="0" style="display:none;visibility:hidden" title="GTM"></iframe>

Convenience Elements

Convenience Elements provide a wrapper component for many commonly used HTML tags like p, h1-h6, img, section and span. These convenience elements enable use of the system's core props (`margin`, `padding`, `fontWeight`, etc), and are optional.

Convenience Elements provide a wrapper component for many commonly used HTML tags (like p, h1-h6, img, section, and span), enabling convenience props like `margin`, `padding`, and `fontWeight`.

Components like Img are wrappers around other components, letting you specify which of a number of related components you want to use.

For example, if you want to render an image as a progressive or a responsive image, you don't need to use the specific component ProgressiveImage or ResponsiveImage. Instead, you can simply use Img with a variant prop that indicates either progressive or responsive.

These convenience components enable SWAN standards and functionality, and are built for extensibility.

Headings

The preview has been updated.

Img

The Img component provides an image, in one of these types:

As Fluid Image (the default behaviour)

More details can be found at Fluid Image

The preview has been updated.

As Responsive Image

More details can be found at Responsive Image

The preview has been updated.

As Progressive Image

More details can be found at Progressive Image

The preview has been updated.

Paragraph

This component is a wrapper for Typography, but outputting a <p> tag by default.

The preview has been updated.

Section

This component is a wrapper for Typography, but outputting a <section> tag by default.

The preview has been updated.

Span

This component is a wrapper for Typography, but outputting a <span> tag by default.

The preview has been updated.

Props

Img
This component is implemented using the <img /> as the root element. You can utilize the native attributes supported by <img /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
proptyperequireddescriptiondefault
variant"responsive" | "progressive" | "fluid"false
-
null
aspectRationumbertrue
The height / width ratio expressed as the result of dividing the content's height by its width Examples: 16:9 => 9 / 16 => 0.5625, 1:1 => 1 / 1 => 1.0
null
intersectionOptionsIntersectionOptionsfalse
Options for configuring the intersection observer behavior.
{ threshold: 0 }
placeholderstring | nullfalse
-
null
triggerNonNullable<number | "immediate" | "inView" | null> | nullfalse
Specifies when to trigger the image loading. Can be one of 'immediate', 'inView', or a number (delay in milliseconds). Available options: immediate, inView, number
inView
H1
This component is implemented using the <h1 /> as the root element. You can utilize the native attributes supported by <h1 /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
H2
This component is implemented using the <h2 /> as the root element. You can utilize the native attributes supported by <h2 /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
H3
This component is implemented using the <h3 /> as the root element. You can utilize the native attributes supported by <h3 /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
H4
This component is implemented using the <h4 /> as the root element. You can utilize the native attributes supported by <h4 /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
H5
This component is implemented using the <h5 /> as the root element. You can utilize the native attributes supported by <h5 /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
H6
This component is implemented using the <h6 /> as the root element. You can utilize the native attributes supported by <h6 /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
Section
This component is implemented using the <section /> as the root element. You can utilize the native attributes supported by <section /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
Span
This component is implemented using the <span /> as the root element. You can utilize the native attributes supported by <span /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
P
This component is implemented using the <p /> as the root element. You can utilize the native attributes supported by <p /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.

Related