foundation-textmedia

Above, left (Heading above media)

Above, left (Heading above text)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,

CODE: (Show/Hide)

<div class="row column">
  <h2>Above, left <small>(Heading above media)</small></h2>
  <div class="textmedia">
    <div class="media media--above" data-media-columns="1">
      <div class="media__row">
        <div class="media__column">
          <figure class="media__item">
            <img src="images/dummy.png" title="Default Textmedia TITLE" alt="Default Textmedia ALT" />
          </figure>
        </div>
      </div>
    </div>
    <div class="text">
      <h2>Above, left <small>(Heading above text)</small></h2>
      <p>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
        Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
        mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
        quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo,
        rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
        Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend
        tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem
        ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius
        laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur
        ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget
        condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam
        nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt
        tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci
        eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales
        sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
      </p>
    </div>
  </div>
</div>

Above, center (Heading above media)

Above, center (Heading above text)

CODE: (Show/Hide)

<div class="row column">
  <h2>Above, center <small>(Heading above media)</small></h2>
  <div class="textmedia">
    <div class="media media--above media--center" data-media-columns="1">
      <div class="media__row">
        <div class="media__column">
          <figure class="media__item">
            <img src="images/dummy.png" title="Default Textmedia TITLE" alt="Default Textmedia ALT" />
          </figure>
        </div>
      </div>
    </div>
    <div class="text">
      <h2>Above, center <small>(Heading above text)</small></h2>
      <p>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
        Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
        mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
        quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo,
        rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
        Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend
        tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem
        ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius
        laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur
        ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget
        condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam
        nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt
        tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci
        eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales
        sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
      </p>
    </div>
  </div>
</div>

Above, right (Heading above media)

Above, right (Heading above text)

CODE: (Show/Hide)

<div class="row column">
  <h2>Above, right <small>(Heading above media)</small></h2>
  <div class="textmedia">
    <div class="media media--above media--right" data-media-columns="1">
      <div class="media__row">
        <div class="media__column">
          <figure class="media__item">
            <img src="images/dummy.png" title="Default Textmedia TITLE" alt="Default Textmedia ALT" />
          </figure>
        </div>
      </div>
    </div>
    <div class="text">
      <h2>Above, right <small>(Heading above text)</small></h2>
      <p>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
        Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
        mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
        quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo,
        rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
        Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend
        tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem
        ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius
        laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur
        ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget
        condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam
        nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt
        tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci
        eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales
        sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
      </p>
    </div>
  </div>
</div>

Below, left (Heading above media)

Below, left (Heading above text)

CODE: (Show/Hide)

<div class="row column">
  <h2>Below, left <small>(Heading above media)</small></h2>
  <div class="textmedia">
    <div class="text">
      <h2>Below, left <small>(Heading above text)</small></h2>
      <p>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
        Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
        mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
        quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo,
        rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
        Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend
        tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem
        ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius
        laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur
        ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget
        condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam
        nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt
        tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci
        eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales
        sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
      </p>
    </div>
    <div class="media media--below" data-media-columns="1">
      <div class="media__row">
        <div class="media__column">
          <figure class="media__item">
            <img src="images/dummy.png" title="Default Textmedia TITLE" alt="Default Textmedia ALT" />
          </figure>
        </div>
      </div>
    </div>
  </div>
</div>

Below, center (Heading above media)

Below, center (Heading above text)

CODE: (Show/Hide)

<div class="row column">
  <h2>Below, center <small>(Heading above media)</small></h2>
  <div class="textmedia">
    <div class="text">
      <h2>Below, center <small>(Heading above text)</small></h2>
      <p>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
        Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
        mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
        quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo,
        rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
        Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend
        tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem
        ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius
        laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur
        ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget
        condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam
        nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt
        tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci
        eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales
        sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
      </p>
    </div>
    <div class="media media--below media--center" data-media-columns="1">
      <div class="media__row">
        <div class="media__column">
          <figure class="media__item">
            <img src="images/dummy.png" title="Default Textmedia TITLE" alt="Default Textmedia ALT" />
          </figure>
        </div>
      </div>
    </div>
  </div>
</div>

Below, right (Heading above media)

Below, right (Heading above text)

CODE: (Show/Hide)

<div class="row column">
  <h2>Below, right <small>(Heading above media)</small></h2>
  <div class="textmedia">
    <div class="text">
      <h2>Below, right <small>(Heading above text)</small></h2>
      <p>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
        Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
        mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
        quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo,
        rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
        Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend
        tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem
        ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius
        laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur
        ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget
        condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam
        nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt
        tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci
        eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales
        sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
      </p>
    </div>
    <div class="media media--below media--right" data-media-columns="1">
      <div class="media__row">
        <div class="media__column">
          <figure class="media__item">
            <img src="images/dummy.png" title="Default Textmedia TITLE" alt="Default Textmedia ALT" />
          </figure>
        </div>
      </div>
    </div>
  </div>
</div>

Beside, left (Heading above media)

Beside, left (Heading above text)

CODE: (Show/Hide)

<div class="row column">
  <h2>Beside, left <small>(Heading above media)</small></h2>
  <div class="textmedia">
    <div class="media media--beside" data-media-columns="1">
      <div class="media__row">
        <div class="media__column">
          <figure class="media__item">
            <img src="images/dummy.png" title="Default Textmedia TITLE" alt="Default Textmedia ALT" />
          </figure>
        </div>
      </div>
    </div>
    <div class="text">
      <h2>Beside, left <small>(Heading above text)</small></h2>
      <p>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
        Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
        mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
        quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo,
        rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
        Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend
        tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem
        ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius
        laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur
        ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget
        condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam
        nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt
        tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci
        eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales
        sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
      </p>
    </div>
  </div>
</div>

Beside, right (Heading above media)

Beside, right (Heading above text)

CODE: (Show/Hide)

<div class="row column">
  <h2>Beside, right <small>(Heading above media)</small></h2>
  <div class="textmedia">
    <div class="media media--beside media--right" data-media-columns="1">
      <div class="media__row">
        <div class="media__column">
          <figure class="media__item">
            <img src="images/dummy.png" title="Default Textmedia TITLE" alt="Default Textmedia ALT" />
          </figure>
        </div>
      </div>
    </div>
    <div class="text">
      <h2>Beside, right <small>(Heading above text)</small></h2>
      <p>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
        Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
        mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
        quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo,
        rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
        Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend
        tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem
        ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius
        laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur
        ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget
        condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam
        nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt
        tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci
        eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales
        sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
      </p>
    </div>
  </div>
</div>

Intext, left (Heading above media)

Intext, left (Heading above text)

CODE: (Show/Hide)

<div class="row column">
  <h2>Intext, left <small>(Heading above media)</small></h2>
  <div class="textmedia">
    <div class="media media--intext" data-media-columns="1">
      <div class="media__row">
        <div class="media__column">
          <figure class="media__item">
            <img src="images/dummy.png" title="Default Textmedia TITLE" alt="Default Textmedia ALT" />
          </figure>
        </div>
      </div>
    </div>
    <div class="text">
      <h2>Intext, left <small>(Heading above text)</small></h2>
      <p>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
        Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
        mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
        quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo,
        rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
        Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend
        tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem
        ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius
        laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur
        ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget
        condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam
        nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt
        tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci
        eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales
        sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
      </p>
    </div>
  </div>
</div>

Intext, right (Heading above media)

Intext, right (Heading above text)

CODE: (Show/Hide)

<div class="row column">
  <h2>Intext, right <small>(Heading above media)</small></h2>
  <div class="textmedia">
    <div class="media media--intext media--right" data-media-columns="1">
      <div class="media__row">
        <div class="media__column">
          <figure class="media__item">
            <img src="images/dummy.png" title="Default Textmedia TITLE" alt="Default Textmedia ALT" />
          </figure>
        </div>
      </div>
    </div>
    <div class="text">
      <h2>Intext, right <small>(Heading above text)</small></h2>
      <p>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
        Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
        mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
        quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo,
        rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
        Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend
        tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem
        ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius
        laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur
        ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget
        condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam
        nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt
        tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci
        eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales
        sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
      </p>
    </div>
  </div>
</div>

Multiple media items (Heading above media)

Multiple media items (Heading above text)

CODE: (Show/Hide)

<div class="row column">
  <h2>Multiple media items <small>(Heading above media)</small></h2>
  <div class="textmedia">
    <div class="media media--beside" data-media-columns="1">
      <div class="media__row">
        <div class="media__column">
          <figure class="media__item">
            <img src="images/dummy.png" title="Default Textmedia TITLE" alt="Default Textmedia ALT" />
          </figure>
        </div>
        <div class="media__column">
          <figure class="media__item">
            <img src="images/dummy.png" title="Default Textmedia TITLE" alt="Default Textmedia ALT" />
          </figure>
        </div>
      </div>
    </div>
    <div class="text">
      <h2>Multiple media items <small>(Heading above text)</small></h2>
      <p>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
        Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
        mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
        quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo,
        rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
        Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend
        tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem
        ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius
        laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur
        ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget
        condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam
        nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt
        tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci
        eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales
        sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
      </p>
    </div>
  </div>
</div>

Multiple columns (Heading above media)

Multiple columns (Heading above text)

CODE: (Show/Hide)

<div class="row column">
  <h2>Multiple columns <small>(Heading above media)</small></h2>
  <div class="textmedia">
    <div class="media media--beside" data-media-columns="2">
      <div class="media__row">
        <div class="media__column">
          <figure class="media__item">
            <img src="images/dummy.png" title="Default Textmedia TITLE" alt="Default Textmedia ALT" />
          </figure>
        </div>
        <div class="media__column">
          <figure class="media__item">
            <img src="images/dummy.png" title="Default Textmedia TITLE" alt="Default Textmedia ALT" />
          </figure>
        </div>
        <div class="media__column">
          <figure class="media__item">
            <img src="images/dummy.png" title="Default Textmedia TITLE" alt="Default Textmedia ALT" />
          </figure>
        </div>
        <div class="media__column">
          <figure class="media__item">
            <img src="images/dummy.png" title="Default Textmedia TITLE" alt="Default Textmedia ALT" />
          </figure>
        </div>
      </div>
    </div>
    <div class="text">
      <h2>Multiple columns <small>(Heading above text)</small></h2>
      <p>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
        Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
        mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
        quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo,
        rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
        Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend
        tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem
        ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius
        laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur
        ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget
        condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam
        nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt
        tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci
        eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales
        sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
      </p>
    </div>
  </div>
</div>

Override (first) (Heading above media)

Override (first) (Heading above text)

CODE: (Show/Hide)

<div class="row column">
  <h2>Override (first) <small>(Heading above media)</small></h2>
  <div class="textmedia">
    <div class="media media--beside" data-media-columns="2">
      <div class="media__row">
        <div class="media__column" data-media-columns-override="1">
          <figure class="media__item">
            <img src="images/dummy.png" title="Default Textmedia TITLE" alt="Default Textmedia ALT" />
          </figure>
        </div>
        <div class="media__column">
          <figure class="media__item">
            <img src="images/dummy.png" title="Default Textmedia TITLE" alt="Default Textmedia ALT" />
          </figure>
        </div>
        <div class="media__column">
          <figure class="media__item">
            <img src="images/dummy.png" title="Default Textmedia TITLE" alt="Default Textmedia ALT" />
          </figure>
        </div>
      </div>
    </div>
    <div class="text">
      <h2>Override (first) <small>(Heading above text)</small></h2>
      <p>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
        Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
        mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
        quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo,
        rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
        Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend
        tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem
        ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius
        laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur
        ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget
        condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam
        nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt
        tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci
        eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales
        sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
      </p>
    </div>
  </div>
</div>

Override (last) (Heading above media)

Override (last) (Heading above text)

CODE: (Show/Hide)

<div class="row column">
  <h2>Override (last) <small>(Heading above media)</small></h2>
  <div class="textmedia">
    <div class="media media--beside" data-media-columns="2">
      <div class="media__row">
        <div class="media__column">
          <figure class="media__item">
            <img src="images/dummy.png" title="Default Textmedia TITLE" alt="Default Textmedia ALT" />
          </figure>
        </div>
        <div class="media__column">
          <figure class="media__item">
            <img src="images/dummy.png" title="Default Textmedia TITLE" alt="Default Textmedia ALT" />
          </figure>
        </div>
        <div class="media__column" data-media-columns-override="1">
          <figure class="media__item">
            <img src="images/dummy.png" title="Default Textmedia TITLE" alt="Default Textmedia ALT" />
          </figure>
        </div>
      </div>
    </div>
    <div class="text">
      <h2>Override (last) <small>(Heading above text)</small></h2>
      <p>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
        Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
        mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
        quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo,
        rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
        Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend
        tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem
        ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius
        laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur
        ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget
        condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam
        nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt
        tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci
        eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales
        sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
      </p>
    </div>
  </div>
</div>

Media caption (Heading above media)

Media caption (Heading above text)

CODE: (Show/Hide)

<div class="row column">
  <h2>Media caption <small>(Heading above media)</small></h2>
  <div class="textmedia">
    <div class="media media--beside" data-media-columns="1">
      <div class="media__row">
        <div class="media__column">
          <figure class="media__item">
            <img src="images/dummy.png" title="Default Textmedia TITLE" alt="Default Textmedia ALT" />
            <figcaption class="media__caption">This is the media caption for media 1</figcaption>
          </figure>
        </div>
        <div class="media__column">
          <figure class="media__item">
            <img src="images/dummy.png" title="Default Textmedia TITLE" alt="Default Textmedia ALT" />
            <figcaption class="media__caption">This is the media caption for media 2</figcaption>
          </figure>
        </div>
      </div>
    </div>
    <div class="text">
      <h2>Media caption <small>(Heading above text)</small></h2>
      <p>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
        Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
        mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
        quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo,
        rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
        Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend
        tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem
        ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius
        laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur
        ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget
        condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam
        nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt
        tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci
        eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales
        sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
      </p>
    </div>
  </div>
</div>

Media border (Heading above media)

This is the media caption outside the media border

Media border (Heading above text)

CODE: (Show/Hide)

<div class="row column">
  <h2>Media border <small>(Heading above media)</small></h2>
  <div class="textmedia">
    <div class="media media--beside" data-media-columns="1">
      <div class="media__row">
        <div class="media__column">
          <figure class="media__item media__item--border">
            <img src="images/dummy.png" title="Default Textmedia TITLE" alt="Default Textmedia ALT" />
            <figcaption class="media__caption">This is the media caption inside the media border</figcaption>
          </figure>
        </div>
        <div class="media__column">
          <figure class="media__item media__item--border">
            <img src="images/dummy.png" title="Default Textmedia TITLE" alt="Default Textmedia ALT" />
          </figure>
          <figcaption class="media__caption">This is the media caption outside the media border</figcaption>
        </div>
      </div>
    </div>
    <div class="text">
      <h2>Media border <small>(Heading above text)</small></h2>
      <p>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
        Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
        mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
        quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo,
        rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
        Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend
        tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem
        ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius
        laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur
        ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget
        condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam
        nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt
        tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci
        eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales
        sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
      </p>
    </div>
  </div>
</div>

Video items (Heading above media)

This is an inline vimeo video (Widescreen)

This is an inline vimeo video

This is an inline YouTube video

Video items (Heading above text)

CODE: (Show/Hide)

<div class="row column">
  <h2>Video items <small>(Heading above media)</small></h2>
  <div class="textmedia">
    <div class="media media--beside" data-media-columns="1">
      <div class="media__row">
        <div class="media__column">
          <figure class="media__item">
            <div class="media__video media__video--widescreen">
              <iframe src="//player.vimeo.com/video/46926279" title="Dummy video" width="640" height="360" frameborder="0" allowfullscreen=""></iframe>
            </div>
            <figcaption class="media__caption">This is an inline vimeo video (Widescreen)</figcaption>
          </figure>
        </div>
        <div class="media__column">
          <figure class="media__item">
            <div class="media__video">
              <iframe src="//player.vimeo.com/video/46926279" title="Dummy video" width="640" height="360" frameborder="0" allowfullscreen=""></iframe>
            </div>
          </figure>
          <figcaption class="media__caption">This is an inline vimeo video</figcaption>
        </div>
        <div class="media__column">
          <figure class="media__item">
            <div class="media__video">
              <iframe src="//www.youtube.com/embed/XQu8TTBmGhA" title="The video placeholder" width="420" height="315" frameborder="0" allowfullscreen=""></iframe>
            </div>
          </figure>
          <figcaption class="media__caption">This is an inline YouTube video</figcaption>
        </div>
      </div>
    </div>
    <div class="text">
      <h2>Video items <small>(Heading above text)</small></h2>
      <p>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
        Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
        mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
        quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo,
        rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
        Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend
        tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem
        ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius
        laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur
        ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget
        condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam
        nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt
        tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci
        eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales
        sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
      </p>
    </div>
  </div>
</div>

fancyBox (Heading above media)

Dummy video poster ALT — Click to enlarge YouTube video

fancyBox (Heading above text)

CODE: (Show/Hide)

<div class="row column">
  <h2>fancyBox <small>(Heading above media)</small></h2>
  <div class="textmedia">
    <div class="media media--beside" data-media-columns="1">
      <div class="media__row">
        <div class="media__column">
          <figure class="media__item">
            <a href="images/dummy.png" class="media__link" rel="lightbox[gallery_1]" data-fancybox data-fancybox-type="image">
              <img src="images/dummy.png" title="Default Textmedia TITLE" alt="Default Textmedia ALT" />
            </a>
            <figcaption class="media__caption">Click to enlarge</figcaption>
          </figure>
        </div>
        <div class="media__column">
          <figure class="media__item">
            <a href="//www.youtube.com/embed/XQu8TTBmGhA" class="media__link" rel="lightbox[gallery_1]" data-fancybox data-fancybox-type="iframe">
              <button class="media__button">Play</button>
              <img src="images/dummy-video-placeholder.png" title="Dummy video poster TITLE" alt="Dummy video poster ALT" />
            </a>
            <figcaption class="media__caption">Click to enlarge YouTube video</figcaption>
          </figure>
        </div>
        <div class="media__column">
          <figure class="media__item">
            <a href="//player.vimeo.com/video/46926279" class="media__link" rel="lightbox[gallery_1]" data-fancybox data-fancybox-type="iframe">
              <button class="media__button">Play</button>
              <img src="images/dummy-video.png" title="Dummy video poster TITLE" alt="Dummy video poster ALT" />
            </a>
            <figcaption class="media__caption">Click to enlarge vimeo video</figcaption>
          </figure>
        </div>
      </div>
    </div>
    <div class="text">
      <h2>fancyBox <small>(Heading above text)</small></h2>
      <p>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
        Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
        mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
        quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo,
        rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
        Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend
        tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem
        ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius
        laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur
        ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget
        condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam
        nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt
        tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci
        eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales
        sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
      </p>
    </div>
</div>

Text & Media Foundation for Sites

Media position

Media items

Heading position

Above, left (Heading above media)

Above, left (Heading above text)

Above, center (Heading above media)

Above, center (Heading above text)

Above, right (Heading above media)

Above, right (Heading above text)

Below, left (Heading above media)

Below, left (Heading above text)

Below, center (Heading above media)

Below, center (Heading above text)

Below, right (Heading above media)

Below, right (Heading above text)

Beside, left (Heading above media)

Beside, left (Heading above text)

Beside, right (Heading above media)

Beside, right (Heading above text)

Intext, left (Heading above media)

Intext, left (Heading above text)

Intext, right (Heading above media)

Intext, right (Heading above text)

Multiple media items (Heading above media)

Multiple media items (Heading above text)

Multiple columns (Heading above media)

Multiple columns (Heading above text)

Override (first) (Heading above media)

Override (first) (Heading above text)

Override (last) (Heading above media)

Override (last) (Heading above text)

Media caption (Heading above media)

Media caption (Heading above text)

Media border (Heading above media)

Media border (Heading above text)

Video items (Heading above media)

Video items (Heading above text)

fancyBox (Heading above media)

fancyBox (Heading above text)