2 #Media Media

Displays an image alongside content, with responsive behavior for different screen sizes. Accessible and semantic for all users, optimized for performance across devices.

Modifiers: .media--reverse - Image on the right, content on the left .media--multiple - Multiple images in the media object .media--small - Smaller version for compact layouts (100x100px image) .media__image--large - Larger image for desktop (300x300px max)

Example

Strength

Strength training is an important part of injury prevention. Focus on your core— especially your abs and glutes.

Strength

Strength training is an important part of injury prevention. Focus on your core— especially your abs and glutes.

Strength

Strength training is an important part of injury prevention. Focus on your core— especially your abs and glutes.

Small Media

Compact media for tight spaces.

Strength (Large)

Larger media for spacious layouts on desktop.

Markup

<article class="media" role="article">
    <img class="media__image"
      srcset="https://placehold.co/150x150 150w, https://placehold.co/300x300 300w"
      sizes="(max-width: 768px) 100vw, 150px"
      src="https://placehold.co/150x150" alt="Strength training illustration" />
    <div class="media__body">
        <h4>Strength</h4>
        <p>
            Strength training is an important part of
            injury prevention. Focus on your core—
            especially your abs and glutes.
        </p>
    </div>
</article>
<article class="media media--reverse" role="article">
    <img class="media__image"
      srcset="https://placehold.co/150x150 150w, https://placehold.co/300x300 300w"
      sizes="(max-width: 768px) 100vw, 150px"
      src="https://placehold.co/150x150" alt="Strength training illustration" />
    <div class="media__body">
        <h4>Strength</h4>
        <p>
            Strength training is an important part of
            injury prevention. Focus on your core—
            especially your abs and glutes.
        </p>
    </div>
</article>
<article class="media media--multiple" role="article">
    <img class="media__image"
      srcset="https://placehold.co/150x150 150w, https://placehold.co/300x300 300w"
      sizes="(max-width: 768px) 100vw, 150px"
      src="https://placehold.co/150x150" alt="First strength training illustration" />
    <div class="media__body">
        <h4>Strength</h4>
        <p>
            Strength training is an important part of
            injury prevention. Focus on your core—
            especially your abs and glutes.
        </p>
    </div>
    <img class="media__image"
      srcset="https://placehold.co/150x150 150w, https://placehold.co/300x300 300w"
      sizes="(max-width: 768px) 100vw, 150px"
      src="https://placehold.co/150x150" alt="Second strength training illustration" />
</article>
<article class="media media--small" role="article">
    <img class="media__image"
      srcset="https://placehold.co/100x100 100w, https://placehold.co/200x200 200w"
      sizes="(max-width: 768px) 100vw, 100px"
      src="https://placehold.co/100x100" alt="Compact strength training illustration" />
    <div class="media__body">
        <h4>Small Media</h4>
        <p>Compact media for tight spaces.</p>
    </div>
</article>
<article class="media">
    <img class="media__image media__image--large"
      srcset="https://placehold.co/300x300 300w, https://placehold.co/600x600 600w"
      sizes="(max-width: 768px) 100vw, 300px"
      src="https://placehold.co/300x300" alt="Large strength training illustration" />
    <div class="media__body">
        <h4>Strength (Large)</h4>
        <p>Larger media for spacious layouts on desktop.</p>
    </div>
</article>

Source: css/components/media.scss, line 1