Media & Text - BreakthroughT1D Design

Overview & Usage

The Media and Text component provides a flexible layout that combines media (such as images) with text-based content. The content inside the bt1d-media-text__content container can include a variety of HTML elements such as headings, paragraphs, lists, buttons, or other elements, making this component highly adaptable to different needs.

By default, the media is placed on the left and the text on the right, but this order can be reversed using the bt1d-media-text--reverse modifier class, positioning the media on the right and the text on the left. Additionally, the component can be customized to span the full width of its container or the entire page using the bt1d-alignfull utility class, allowing for greater design flexibility.

1. Example & HTML Structure

The following example shows the default structure of the Media and Text component:

The leading global type 1 diabetes research and advocacy organization

Learn More

<div class="bt1d-media-text">
  <figure class="bt1d-media-text__media">
    <img loading="lazy" decoding="async" width="960" height="720" src="https://placehold.co/960x720" alt="">
  </figure>
  <div class="bt1d-media-text__content">
    <h2>The leading global type 1 diabetes research and advocacy organization</h2>
    <div class="buttons">
      <a role="button" href="#" class="bt1d-button">Learn more</a>
    </div>
  </div>
</div>

Reverse example:

The leading global type 1 diabetes research and advocacy organization

Learn More

<div class="bt1d-media-text bt1d-media-text--reverse">
  <figure class="bt1d-media-text__media">
    <img loading="lazy" decoding="async" width="960" height="720" src="https://placehold.co/960x720" alt="">
  </figure>
  <div class="bt1d-media-text__content">
    <h2>The leading global type 1 diabetes research and advocacy organization</h2>
    <div class="buttons">
      <a role="button" href="#" class="bt1d-button">Learn more</a>
    </div>
  </div>
</div>

2. Customization with Utility Classes

The Media and Text component can be customized with utility classes for background and text colors, and can also extend beyond its parent container to go full width using the bt1d-alignfull class.

Example with Utility Classes:

The leading global type 1 diabetes research and advocacy organization

Learn More

<div class="bt1d-media-text bt1d-alignfull bt1d-media-text--reverse bt1d-navy-background-color bt1d-text-color--light">
  <figure class="bt1d-media-text__media">
    <img loading="lazy" decoding="async" width="960" height="720" src="https://placehold.co/960x720" alt="">
  </figure>
  <div class="bt1d-media-text__content">
    <h2>The leading global type 1 diabetes research and advocacy organization</h2>
    <div class="buttons">
      <a role="button" href="#" class="bt1d-button">Learn more</a>
    </div>
  </div>
</div>

3. Key Classes

bt1d-media-text: The main wrapper for the Media and Text component, containing both the media and the text content.
bt1d-media-text__media: Wraps the media (such as an image) within the component.
bt1d-media-text__content: The wrapper for the text content, which can include any HTML elements, such as headings, paragraphs, lists, and buttons.
bt1d-media-text--reverse: Modifier class that reverses the order of the media and text, positioning the media on the right and the text on the left.
bt1d-alignfull: Utility class that allows the Media and Text component to span the full width of its container or parent element.

Need Help?

If you’re stuck or need assistance, don’t hesitate to reach out to our support team for guidance.

get in touch