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.

UsageAPI

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

ReactVanilla

<>
  <H1>H1 heading</H1>
  <H2>H2 heading</H2>
  <H3>H3 heading</H3>
  <H4>H4 heading</H4>
  <H5>H5 heading</H5>
  <H6>H6 heading</H6>
</>

<>
  <H1>H1 heading</H1>
  <H2>H2 heading</H2>
  <H3>H3 heading</H3>
  <H4>H4 heading</H4>
  <H5>H5 heading</H5>
  <H6>H6 heading</H6>
</>

<div>
  <h1 class="swan-heading swan-text-x4large swan-font-weight-bold">
    H1 heading
  </h1>
  <h2 class="swan-heading swan-text-x3large swan-font-weight-bold">
    H2 heading
  </h2>
  <h3 class="swan-heading swan-text-x2large swan-font-weight-bold">
    H3 heading
  </h3>
  <h4 class="swan-heading swan-text-large swan-font-weight-bold">H4 heading</h4>
  <h5 class="swan-heading swan-text-standard swan-font-weight-bold">
    H5 heading
  </h5>
  <h6 class="swan-heading swan-text-standard swan-font-weight-bold">
    H6 heading
  </h6>
</div>

<div>
  <h1 class="swan-heading swan-text-x4large swan-font-weight-bold">
    H1 heading
  </h1>
  <h2 class="swan-heading swan-text-x3large swan-font-weight-bold">
    H2 heading
  </h2>
  <h3 class="swan-heading swan-text-x2large swan-font-weight-bold">
    H3 heading
  </h3>
  <h4 class="swan-heading swan-text-large swan-font-weight-bold">H4 heading</h4>
  <h5 class="swan-heading swan-text-standard swan-font-weight-bold">
    H5 heading
  </h5>
  <h6 class="swan-heading swan-text-standard swan-font-weight-bold">
    H6 heading
  </h6>
</div>

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

ReactVanilla

<GridContainer>
  <Row>
    <Column span={6}>
      <Img src="/example-images/16x9.webp" alt="img-default" />
    </Column>
  </Row>
</GridContainer>

<GridContainer>
  <Row>
    <Column span={6}>
      <Img src="/example-images/16x9.webp" alt="img-default" />
    </Column>
  </Row>
</GridContainer>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-6">
      <img
        src="/example-images/16x9.webp"
        alt="img-default"
        class="swan-fluid-image"
      />
    </div>
  </div>
</div>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-6">
      <img
        src="/example-images/16x9.webp"
        alt="img-default"
        class="swan-fluid-image"
      />
    </div>
  </div>
</div>

As Responsive Image

More details can be found at Responsive Image

ReactVanilla

<GridContainer>
  <Row>
    <Column span={6}>
      <p>Responsive image with aspect ratio 0.5625</p>
      <Img
        variant="responsive"
        aspectRatio={0.5625}
        src="/example-images/16x9.webp"
        alt="sample"
      />
    </Column>
  </Row>
</GridContainer>

<GridContainer>
  <Row>
    <Column span={6}>
      <p>Responsive image with aspect ratio 0.5625</p>
      <Img
        variant="responsive"
        aspectRatio={0.5625}
        src="/example-images/16x9.webp"
        alt="sample"
      />
    </Column>
  </Row>
</GridContainer>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-6">
      <p>Resposive image with aspect ratio 0.5</p>
      <div
        class="swan-responsive-image-wrapper swan-aspect-ratio-container"
        style="padding-bottom: 56.25%;"
      >
        <div class="swan-aspect-ratio-content">
          <img
            src="/example-images/16x9.webp"
            alt="sample"
            class="swan-responsive-image"
          />
        </div>
      </div>
    </div>
  </div>
</div>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-6">
      <p>Resposive image with aspect ratio 0.5</p>
      <div
        class="swan-responsive-image-wrapper swan-aspect-ratio-container"
        style="padding-bottom: 56.25%;"
      >
        <div class="swan-aspect-ratio-content">
          <img
            src="/example-images/16x9.webp"
            alt="sample"
            class="swan-responsive-image"
          />
        </div>
      </div>
    </div>
  </div>
</div>

As Progressive Image

More details can be found at Progressive Image

ReactVanilla

<GridContainer>
  <Row>
    <Column span={6}>
      <p>Image will load only once its in viewport</p>
      <Img
        variant="progressive"
        placeholder="/example-images/16x9.webp"
        src="/example-images/16x9-2.webp"
        trigger="inView"
        intersectionOptions={{ threshold: 1 }}
      >
        {(image, isLoading) => (
          <FluidImage
            style={{ opacity: isLoading ? 0.25 : 1 }}
            src={image.src}
            alt="Image with loading effect"
          />
        )}
      </Img>
    </Column>
  </Row>
</GridContainer>

<GridContainer>
  <Row>
    <Column span={6}>
      <p>Image will load only once its in viewport</p>
      <Img
        variant="progressive"
        placeholder="/example-images/16x9.webp"
        src="/example-images/16x9-2.webp"
        trigger="inView"
        intersectionOptions={{ threshold: 1 }}
      >
        {(image, isLoading) => (
          <FluidImage
            style={{ opacity: isLoading ? 0.25 : 1 }}
            src={image.src}
            alt="Image with loading effect"
          />
        )}
      </Img>
    </Column>
  </Row>
</GridContainer>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-6">
      <p>Image will load only once its in viewport</p>
      <div
        placeholder="/example-images/16x9.webp"
        src="/example-images/16x9-2.webp"
        class="swan-progressive-image-wrapper"
      >
        <img
          src="/example-images/16x9-2.webp"
          alt="Image with loading effect"
          class="swan-fluid-image"
          style="opacity: 1;"
        />
      </div>
    </div>
  </div>
</div>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-6">
      <p>Image will load only once its in viewport</p>
      <div
        placeholder="/example-images/16x9.webp"
        src="/example-images/16x9-2.webp"
        class="swan-progressive-image-wrapper"
      >
        <img
          src="/example-images/16x9-2.webp"
          alt="Image with loading effect"
          class="swan-fluid-image"
          style="opacity: 1;"
        />
      </div>
    </div>
  </div>
</div>

Paragraph

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

ReactVanilla

<>
  <h4>Some heading</h4>
  <P>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo quis
    voluptatibus fuga deserunt ea odio dolorum eligendi blanditiis non animi?
    Quis odit ipsam quidem autem voluptatibus repellendus praesentium sapiente
    doloremque!
  </P>
</>

<>
  <h4>Some heading</h4>
  <P>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo quis
    voluptatibus fuga deserunt ea odio dolorum eligendi blanditiis non animi?
    Quis odit ipsam quidem autem voluptatibus repellendus praesentium sapiente
    doloremque!
  </P>
</>

<div>
  <h4>Some heading</h4>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo quis
    voluptatibus fuga deserunt ea odio dolorum eligendi blanditiis non animi?
    Quis odit ipsam quidem autem voluptatibus repellendus praesentium sapiente
    doloremque!
  </p>
</div>

<div>
  <h4>Some heading</h4>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo quis
    voluptatibus fuga deserunt ea odio dolorum eligendi blanditiis non animi?
    Quis odit ipsam quidem autem voluptatibus repellendus praesentium sapiente
    doloremque!
  </p>
</div>

Section

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

ReactVanilla

<>
  <h2>Page with a section</h2>

  <Section>
    <h3>Section heading</h3>
    <P>
      Section tag defines the section of documents such as chapters, headers,
      footers or any other sections. The section tag divides the content into
      section and subsections. ... Section tag grouped the generic block of
      related contents.
    </P>
  </Section>
</>

<>
  <h2>Page with a section</h2>

  <Section>
    <h3>Section heading</h3>
    <P>
      Section tag defines the section of documents such as chapters, headers,
      footers or any other sections. The section tag divides the content into
      section and subsections. ... Section tag grouped the generic block of
      related contents.
    </P>
  </Section>
</>

<div>
  <h2>Page with a section</h2>
  <section>
    <h3>Section heading</h3>
    <p>
      Section tag defines the section of documents such as chapters, headers,
      footers or any other sections. The section tag divides the content into
      section and subsections. ... Section tag grouped the generic block of
      related contents.
    </p>
  </section>
</div>

<div>
  <h2>Page with a section</h2>
  <section>
    <h3>Section heading</h3>
    <p>
      Section tag defines the section of documents such as chapters, headers,
      footers or any other sections. The section tag divides the content into
      section and subsections. ... Section tag grouped the generic block of
      related contents.
    </p>
  </section>
</div>

Span

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

ReactVanilla

<>
  <P>
    Small kids have <Span textColor="error">red</Span> cheeks.
  </P>
  <P>`red` above is wrapped with a `&lt;Span&gt;` component.</P>
</>

<>
  <P>
    Small kids have <Span textColor="error">red</Span> cheeks.
  </P>
  <P>`red` above is wrapped with a `&lt;Span&gt;` component.</P>
</>

<div>
  <p>Small kids have <span class="swan-text-color-error">red</span> cheeks.</p>
  <p>`red` above is wrapped under `&lt;Span&gt;`</p>
</div>

<div>
  <p>Small kids have <span class="swan-text-color-error">red</span> cheeks.</p>
  <p>`red` above is wrapped under `&lt;Span&gt;`</p>
</div>

Props

Img

See core props for additional props that can be applied to this component.

prop	type	required	default
`variant` Type of image to use.	`"responsive""progressive""fluid"`	false	fluid
`onError` Callback function to handle error events.	`ReactEventHandler<HTMLImageElement>((evt: Event) => void)null`	false	null
`aspectRatio` 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	`number`	true	null
`intersectionOptions` Options for configuring the intersection observer behavior.	`IntersectionOptions`	false	{ threshold: 0 }
`trigger` Specifies when to trigger the image loading. Can be one of 'immediate', 'inView', or a number (delay in milliseconds).	`number"immediate""inView"null`	false	inView
`placeholder`	`stringnull`	false	null

Convenience Elements

Headings

Img

As Fluid Image (the default behaviour)

As Responsive Image

As Progressive Image

Paragraph

Section

Span

Props

Related