O3 World Component Library

Media Object 

<section class="media-object media-object--image-bottom" role="group" aria-labelledby="media-object-title">
    <div class="media-object__image-container">
        <img src="https://picsum.photos/500/500" class="media-object__image" alt="Random image">
    </div>
    <div class="media-object__content-container">
        <h2 class="media-object__title" id="media-object-title">This is the title</h2>
        <p class="media-object__body">This object uses the image-bottom modifier and has the image on the bottom on small screen sizes.</p>
        <a href="#" class="media-object__cta" aria-label="this is a link" target="_blank">Click me</a> </div>
</section>
<section class="media-object media-object--image-right" role="group" aria-labelledby="media-object-title">
    <div class="media-object__image-container">
        <img src="https://picsum.photos/500/500" class="media-object__image" alt="Random image">
    </div>
    <div class="media-object__content-container">
        <h2 class="media-object__title" id="media-object-title">This is the title</h2>
        <p class="media-object__body">This object uses the default layout and has the image on the right side</p>
        <a href="#" class="media-object__cta" aria-label="this is a link" target="_blank">Click me</a> </div>
</section>
<section class="media-object" role="group" aria-labelledby="media-object-title">
    <div class="media-object__image-container">
        <img src="https://picsum.photos/500/500" class="media-object__image" alt="Random image">
    </div>
    <div class="media-object__content-container">
        <h2 class="media-object__title" id="media-object-title">This is the title</h2>
        <p class="media-object__body">This object uses the image-bottom modifier and has the image on the bottom on small screen sizes.</p>
        <a href="#" class="media-object__cta" aria-label="this is a link" target="_blank">Click me</a> </div>
</section>
<section class="media-object media-object--image-right" role="group" aria-labelledby="media-object-title">
    <div class="media-object__image-container">
        <img src="https://picsum.photos/500/500" class="media-object__image" alt="Random image">
    </div>
    <div class="media-object__content-container">
        <h2 class="media-object__title" id="media-object-title">This is the title</h2>
        <p class="media-object__body">This object uses the image-bottom modifier and has the image on the bottom on small screen sizes.</p>
        <a href="#" class="media-object__cta" aria-label="this is a link" target="_blank">Click me</a> </div>
</section>
<section class="media-object media-object--image-bottom" role="group" aria-labelledby="media-object-title">
    <div class="media-object__image-container">
        <img src="https://picsum.photos/500/500" class="media-object__image" alt="Random image">
    </div>
    <div class="media-object__content-container">
        <h2 class="media-object__title" id="media-object-title">This is the title</h2>
        <p class="media-object__body">This object uses the image-bottom modifier and has the image on the bottom on small screen sizes.</p>
        <a href="#" class="media-object__cta" aria-label="this is a link" target="_blank">Click me</a> </div>
</section>
 
{% set layouts = {
  top: ' media-object--image-top',
  bottom: ' media-object--image-bottom',
  left: ' media-object--image-left',
  right: ' media-object--image-right',
} %}

{% for object in mediaObjects %}
	<section
    class="media-object
      {%- if object.layouts -%}
        {%- for layout in object.layouts -%}
          {{- layouts[layout] -}}
        {%- endfor -%}
      {%- endif -%}"
    role="group"
    aria-labelledby="media-object-title"
  >
		<div class="media-object__image-container">
			<img
        src="{{ object.image.src }}"
        class="media-object__image"
        alt="{{ object.image.alt }}"
      >
		</div>
		<div class="media-object__content-container">
			<h2
        class="media-object__title"
        id="media-object-title"
      >
				{{- object.title -}}
			</h2>
			<p class="media-object__body">{{ object.text }}</p>
			{% if object.cta %}
				<a
          href="{{ object.cta.href }}"
          class="media-object__cta"
          aria-label="{{ object.cta.label }}"
          target="_blank"
        >
					{{- object.cta.text -}}
				</a>
			{% endif %}
		</div>
	</section>
{% endfor %}
 
{
  "mediaObjects": [
    {
      "layouts": [
        "bottom"
      ],
      "image": {
        "src": "https://picsum.photos/500/500",
        "alt": "Random image"
      },
      "title": "This is the title",
      "text": "This object uses the image-bottom modifier and has the image on the bottom on small screen sizes.",
      "cta": {
        "href": "#",
        "label": "this is a link",
        "text": "Click me"
      }
    },
    {
      "layouts": [
        "right"
      ],
      "image": {
        "src": "https://picsum.photos/500/500",
        "alt": "Random image"
      },
      "title": "This is the title",
      "text": "This object uses the default layout and has the image on the right side",
      "cta": {
        "href": "#",
        "label": "this is a link",
        "text": "Click me"
      }
    },
    {
      "image": {
        "src": "https://picsum.photos/500/500",
        "alt": "Random image"
      },
      "title": "This is the title",
      "text": "This object uses the image-bottom modifier and has the image on the bottom on small screen sizes.",
      "cta": {
        "href": "#",
        "label": "this is a link",
        "text": "Click me"
      }
    },
    {
      "layouts": [
        "right"
      ],
      "image": {
        "src": "https://picsum.photos/500/500",
        "alt": "Random image"
      },
      "title": "This is the title",
      "text": "This object uses the image-bottom modifier and has the image on the bottom on small screen sizes.",
      "cta": {
        "href": "#",
        "label": "this is a link",
        "text": "Click me"
      }
    },
    {
      "layouts": [
        "bottom"
      ],
      "image": {
        "src": "https://picsum.photos/500/500",
        "alt": "Random image"
      },
      "title": "This is the title",
      "text": "This object uses the image-bottom modifier and has the image on the bottom on small screen sizes.",
      "cta": {
        "href": "#",
        "label": "this is a link",
        "text": "Click me"
      }
    }
  ]
}
  • Content: 
    .media-object {
  display: flex;
  flex-direction: column;
  margin-top: $base-spacing;
  height: auto;

  @media (min-width: breakpoint(medium)) {
    flex-direction: row;
  }

  &--image-right {

    @media (min-width: breakpoint(medium)) {

      .media-object__image-container {
        order: 1;
      }
    }
  }

  &--image-bottom {

    @media (max-width: breakpoint(medium)) {

      .media-object__image-container {
        order: 1;
      }
    }
  }

  &__image-container {
    position: relative;
    order: 0;
    width: 100%;
    min-height: 250px;
    overflow: hidden;

    @media (min-width: breakpoint(medium)) {
      width: 50%;
      min-height: 350px;
    }

    img {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100%;
      min-height: 100%;
      transform: translate(-50%, -50%);
    }
  }

  &__content-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 35px 20px;
    width: 100%;
    background-color: color(neutral, lighter);
    text-align: center;

    @media (min-width: breakpoint(medium)) {
      padding: 35px 90px;
      width: 50%;
    }
  }

  &__body {
    width: 100%;
  }
}
  • URL: /components/raw/media-object/_media-object.scss
  • Filesystem Path: components/media-object/_media-object.scss
  • Size: 1.2 KB

Usage

A media object is a component with options for combining and relaying out content.

This media object uses modifier classes to change the layout and orientation of the media in comparison to supporting content. The default layout positions images to the left of their supporting content on desktop, and above their supporting content on mobile. Add the media-object--image-right modifier to position images to the right of their supporting content on desktop, and the media-object--image-bottom modifier to position images below their supporting content on mobile.

Labelling Expectations

  • Each media object should include the role="group" attribute on the outer container.
  • Each media object should include an aria-labelledby="name" attribute on the outer container. This should link to a unique id on the media-object__title element.
  • If the media object has a link, ensure that there is an aria-label attribute describing the context of the link.

Focus Expectations

  • All links should have visible keyboard focus state

Keyboard Expectations

  • Tab = Move to next focusable element