Cant Stop Houston Component Library

Media Context: Reverse With Red Background 

<div id="" class="media-context background--red media-context--reversed">
    <div class="media-context__inner grid">
        <div class="media-context__media">
            <a href="https://welcometruth.com/">
                <picture>
                    <source media="(min-width:768px)" srcset="https://placehold.co/800x800">
                    <img class="w-full" src="https://placehold.co/800x800" alt="Test alt" />
                </picture>

            </a>
        </div>
        <div class="media-context__context">

            <div class="context context--medium context--align-left context--default">
                <div class="context__subheading">Pioneering the future of power</div>
                <h2 class="context__heading">REIMAGINING A POWER GRID TEXANS CAN COUNT ON</h2>
                <p>The state’s ability to reliably light homes, businesses and communities has made the power grid a source of profound worryfor Texans. Economists and engineers at the University of Houstonare working to develop long-term solutions that would help putpeople’s minds at ease. Innovations in market design, utility-scale battery systems and Artificial Intelligence-driven networks ofmicrogrids highlight how researchers at UH, the Energy University,are laying sustainable foundations for the power grid of the future.</p>

                <div class="button-group">
                    <a class="btn btn--black" href="https://welcometruth.com/" target="" aria-label=""><span>Keep Reading <svg class="" viewBox="0 0 11.2 11.2">
                                <path d="M5.6 11.2 0 6l1.2-1.3L4.7 8V0h1.8v8L10 4.7 11.2 6l-5.6 5.2z" />
                            </svg>
                        </span></a>
                </div>
            </div>
        </div>
    </div>
</div>
 
{% import 'macros.twig' as macros %}
{% import "icons.twig" as icons %}

{% if in_component_library %}
  {% set context = '@context' %}
  {% set videoComponent = '@video' %}
{% else %}
  {% set context = 'context.twig' %}
  {% set videoComponent = 'video.twig' %}
{% endif %}

<div id="{{ id }}" class="media-context background--{{ background|default('default') }}{% if reverse %} media-context--reversed{% endif %}">
  <div class="media-context__inner grid">
    <div class="media-context__media">
      {% if video %}
        <component is="modal-btn">
          <div class="video__overlay">
            <div class="video__btn">
              {{ icons.icon('play', 'video__svg') }}
            </div>
          </div>
          {{ macros.picture(
            'w-full',
            image.srcset,
            image.src,
            image.sizes.Rectangle,
            image.sizes.Rectangle_mobile,
            image.alt,
            in_component_library
          ) }}
        </component>
        <component is="modal">
          {% include videoComponent with video %}
        </component>
      {% else %}
        {% if buttons %}
          {% set firstBtn = buttons|first %}
          <a href="{{ firstBtn.button.url }}">
        {% endif %}
          {{ macros.picture(
            'w-full',
            image.srcset,
            image.src,
            image.sizes.Rectangle,
            image.sizes.Rectangle_mobile,
            image.alt,
            in_component_library
          ) }}
        {% if buttons %}</a>{% endif %}
      {% endif %}
    </div>
    <div class="media-context__context">
      {% include context with {
        subheading: subheading,
        heading: heading,
        paragraphs: paragraphs,
        buttons: {
          color: background == 'red' ? 'black' : 'red',
          items: buttons,
        }
      } %}
    </div>
  </div>
</div>
 
{
  "in_component_library": true,
  "image": {
    "srcset": "https://placehold.co/800x800",
    "src": "https://placehold.co/800x800",
    "alt": "Test alt"
  },
  "heading": "REIMAGINING A POWER GRID TEXANS CAN COUNT ON",
  "subheading": "Pioneering the future of power",
  "paragraphs": "<p>The state’s ability to reliably light homes, businesses and communities has made the power grid a source of profound worry\u0003for Texans. Economists and engineers at the University of Houston\u0003are working to develop long-term solutions that would help put\u0003people’s minds at ease. Innovations in market design, utility-scale battery systems and Artificial Intelligence-driven networks of\u0003microgrids highlight how researchers at UH, the Energy University,\u0003are laying sustainable foundations for the power grid of the future.</p>",
  "buttons": [
    {
      "button": {
        "title": "Keep Reading",
        "url": "https://welcometruth.com/"
      }
    }
  ],
  "reverse": true,
  "background": "red"
}
  • Content: 
    .media-context {
  &__inner {
    max-width: 100%;
    padding: 0;

    @include breakpoint(900px) {
      column-gap: 0;
    }
  }

  &__media,
  &__context {
    grid-column: span 12 / span 12;
  }

  &__media {
    font-size: 0;

    @include breakpoint(900px) {
      grid-column: span 6 / span 6;
    }
  }

  &__context {
    padding: 40px 20px;

    @include breakpoint(900px) {
      grid-column: span 6 / span 6;

      display: flex;
      align-items: center;
      padding: 0 20px;
      margin-top: 0;
    }

    @include breakpoint(large) {
      padding: 0 60px;
    }

    .media-context--reversed & {
      @include breakpoint(900px) {
        order: -1;
      }
    }
  }

  .btn svg {
    display: none;
  }
}
  • URL: /components/raw/media-context/_media-context.scss
  • Filesystem Path: src/twig/components/media-context/_media-context.scss
  • Size: 728 Bytes

No notes defined.

©