ba-media-object

Used to show some media and content side by side

Figma

GitHub

Storybook

Live Demo

Anim excepteur aliqua excepteur ullamco ullamco voluptate laboris commodo nisi veniam aliquip ut.

<ba-media-object>
  <ba-icon name="paper-plane" slot="media"></ba-icon>
  <ba-content>
    <p>Anim excepteur aliqua excepteur ullamco ullamco voluptate laboris commodo nisi veniam aliquip ut.</p>
  </ba-content>
</ba-media-object>

Guidelines

If ba-image is being used for the media slot, a width is required to be set on ba-image to make it show in ba-media-object. This is because the way the aspect ratio gets set within ba-image results in the main component not having a width.

Code

Properties & Attributes

Property	Attribute	Description	Type	Default
`alignMediaTo`	`align-media-to`	Allows setting the media slot to match the height of the first line of text in the content slot. This is useful for aligning media with text in the content slot.	`"body" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "heading-micro-xs" \| "heading-micro-xxs" \| "heading-primary" \| "heading-secondary" \| "heading-tertiary" \| "p" \| "small-print" \| "summary" \| undefined`	`undefined`
`gutter`	`gutter`	Set's the gutter between the media slot and the content	`"16" \| "24" \| "32" \| "40" \| "48" \| "8" \| undefined`	`'16'`

Slots

Slot	Description	Permitted elements
Unnamed slot	Elements will render in the body of the component	`<ba‑content>`
`"media"`	Elements will render in the body of the component	`<ba‑icon>`, `<ba‑image>`, `<ba‑logo>`, `<svg>`

Permitted ARIA roles

None

Parent components

ba-media-object can be slotted into:

Usage

Using with ba-icon

Basic example using an icon and some content

<ba-media-object>
  <ba-icon name="paper-plane" slot="media"></ba-icon>
  <ba-content>
    Anim excepteur aliqua excepteur ullamco ullamco voluptate laboris commodo nisi veniam aliquip ut.
  </ba-content>
</ba-media-object>

Aligning ba-icon with first line of content

Basic example using an icon and aligning it to the first line of content

<ba-media-object align-media-to="h4">
  <ba-icon name="paper-plane" slot="media" size="16"></ba-icon>
  <ba-content>
    <h4>Anim excepteur aliqua excepteur ullamco ullamco voluptate laboris commodo nisi veniam aliquip ut.</h4>
  </ba-content>
</ba-media-object>

Using with ba-image

When using ba-media-object with ba-image a width must be set on the ba-image component using css, otherwise the image will not show. This prevents layout shifts when the browser loads the image.

An example of ba-media-object being used with an image in the media block


<style>
  .your-media-object-image-class {
    width: 10rem;
  }
</style>


<ba-media-object>
  <ba-image
    class="your-media-object-image-class"
    slot="media"
    alt="Description of image"
    src="https://www.britishairways.com/assets/images/MediaHub/Media-Database/Royalty-free-RF/Destinations/USA/Florida/Orlando-MCO/524927017_1920x1080.jpg"
    aspect-ratio="16-9"
  ></ba-image>
  <ba-content>
    Anim excepteur aliqua excepteur ullamco ullamco voluptate laboris commodo nisi veniam aliquip ut.
  </ba-content>
</ba-media-object>