Components/text-media

components.text-media.hbs

{{!--
  text-media--var-1
  text-media--var-2
  text-media--var-3
  text-media--right
  text-media--left
  --}}


<div class="text-media text-media--var-1 text-media--left">
  <div class="text-media__layout">
    <div class="text-media__media">
      {{> image-circle class="image-circle--yellow" size="465"}}
    </div>
    <div class="text-media__content">
      <h2 class="text-media__title">
        Text Media 1
      </h2>
      <div class="text-media__content">
        <p>
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officia fuga rem rerum voluptatum corrupti laudantium libero atque eos eaque, repudiandae illum dolorem ducimus aperiam assumenda iusto nesciunt amet culpa corporis.
        </p>
      </div>
    </div>
  </div>
</div>

<div class="text-media text-media--var-2 text-media--left">
  <div class="text-media__layout">
    <div class="text-media__media">
      {{> image-circle class="image-circle--green" size="465"}}
    </div>
    <div class="text-media__content">
      <h2 class="text-media__title">
        Text Media 1
      </h2>
      <div class="text-media__content">
        <p>
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officia fuga rem rerum voluptatum corrupti laudantium libero atque eos eaque, repudiandae illum dolorem ducimus aperiam assumenda iusto nesciunt amet culpa corporis.
        </p>
      </div>
    </div>
  </div>
</div>

<div class="text-media text-media--var-3 text-media--left">
  <div class="text-media__layout">
    <div class="text-media__media">
      {{> image-circle class="image-circle--red" size="465"}}
    </div>
    <div class="text-media__content">
      <h2 class="text-media__title">
        Text Media 1
      </h2>
      <div class="text-media__content">
        <p>
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officia fuga rem rerum voluptatum corrupti laudantium libero atque eos eaque, repudiandae illum dolorem ducimus aperiam assumenda iusto nesciunt amet culpa corporis.
        </p>
      </div>
    </div>
  </div>
</div>

<div class="text-media text-media--var-1 text-media--right">
  <div class="text-media__layout">
    <div class="text-media__media">
      {{> image-circle class="image-circle--yellow" size="465"}}
    </div>
    <div class="text-media__content">
      <h2 class="text-media__title">
        Text Media 1
      </h2>
      <div class="text-media__content">
        <p>
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officia fuga rem rerum voluptatum corrupti laudantium libero atque eos eaque, repudiandae illum dolorem ducimus aperiam assumenda iusto nesciunt amet culpa corporis.
        </p>
      </div>
    </div>
  </div>
</div>

<div class="text-media text-media--var-2 text-media--right">
  <div class="text-media__layout">
    <div class="text-media__media">
      {{> image-circle class="image-circle--green" size="465"}}
    </div>
    <div class="text-media__content">
      <h2 class="text-media__title">
        Text Media 1
      </h2>
      <div class="text-media__content">
        <p>
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officia fuga rem rerum voluptatum corrupti laudantium libero atque eos eaque, repudiandae illum dolorem ducimus aperiam assumenda iusto nesciunt amet culpa corporis.
        </p>
      </div>
    </div>
  </div>
</div>

<div class="text-media text-media--var-3 text-media--right">
  <div class="text-media__layout">
    <div class="text-media__media">
      {{> image-circle class="image-circle--red" size="465"}}
    </div>
    <div class="text-media__content">
      <h2 class="text-media__title">
        Text Media 1
      </h2>
      <div class="text-media__content">
        <p>
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officia fuga rem rerum voluptatum corrupti laudantium libero atque eos eaque, repudiandae illum dolorem ducimus aperiam assumenda iusto nesciunt amet culpa corporis.
        </p>
      </div>
    </div>
  </div>
</div>