Text & Media (Source)

Default


<div class="text-media">
  <div class="text-media__text">
    <div></div>
  </div>

  <div class="text-media__image">
    <div></div>
  </div>
</div>
1

To align content, use one of the following classes on the .text-media__text and/or .text-media__image elements. Default is top/start.

Horizontal: .align-center, .align-right.

Vertical: .align-middle, .align-bottom.

Color options by CSS variables:


.text-media {
  --bg: #eee;
  --color: #333;
  --bg-dark-mode: #333;
  --color-dark-mode: #eee;
}

Themes: .theme-light, .theme-white, .theme-dark.

Optionally, padding can be specified by --padding.

Aspect ratio with .n-aspect and either --ratio or --width/--height.

1

Background image


<div class="text-media">
  <div class="text-media__background">
    <picture>
      <img src="" alt="" />
    </picture>
  </div>
  
  <div class="text-media__text">
    <div></div>
  </div>

  <div class="text-media__image">
    <div></div>
  </div>
</div>
1
1

Contained


<div class="text-media text-media--contain">
  <div class="text-media__text">
    <div></div>
  </div>

  <div class="text-media__image">
    <div></div>
  </div>
</div>
1

Container width specified by --page-width.

1

Limited


<div class="text-media text-media--limit">
    <div class="text-media__text">
      <div></div>
    </div>
  
    <div class="text-media__image">
      <div></div>
    </div>
</div>
1

Content width limit specified by --page-width.

1
Image

Fixed Background


<div class="text-media text-media--fixed-bg">
  <picture class="text-media__background">
    <img src="" alt="" />
  </picture>
  
    <div class="text-media__text">
      <div></div>
    </div>
  
    <div class="text-media__image">
      <div></div>
    </div>
</div>
Image

White box


<div class="text-media text-media--white-box">
  <div class="text-media__text">
    <div></div>
  </div>

  <div class="text-media__image">
    <div></div>
  </div>
</div>
Image

Multiple columns

Image

Multiple columns


<div class="text-media">
  <div class="text-media__image">
    <div></div>
  </div>

  <div class="text-media__text">
    <div></div>
  </div>

  <div class="text-media__image">
    <div></div>
  </div>
  
  <div class="text-media__text">
    <div></div>
  </div>
</div>

Next 3 have checkerboard pattern (.text-media--checkerboard)

Image

Small text


<div class="text-media text-media--small">
  <div class="text-media__text">
    <div></div>
  </div>
  
  <div class="text-media__image">
    <div></div>
  </div>
</div>
Image

Light


<div class="text-media theme-light">
  <div class="text-media__text">
    <div></div>
  </div>
  
  <div class="text-media__image">
    <div></div>
  </div>
</div>
Image

Dark


<div class="text-media theme-dark">
  <div class="text-media__text">
    <div></div>
  </div>
  
  <div class="text-media__image">
    <div></div>
  </div>
</div>

Stacked


<div class="text-media text-media--stacked">
  <div class="text-media__text">
    <div></div>
  </div>
  
  <div class="text-media__image">
    <div></div>
  </div>
</div>
Image

Stick image to top/right/bottom/left

.text-media--stick-to-top
.text-media--stick-to-right
.text-media--stick-to-bottom
.text-media--stick-to-left


<div class="text-media text-media--stick-to-bottom">
  <div class="text-media__text">
    <div></div>
  </div>
  
  <div class="text-media__image">
    <div></div>
  </div>
</div>
1

Video iframe embed


<div class="text-media">
  <div class="text-media__image">
    <div>
      <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/E9yrF-tZ6Ns" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
  </div>
  
  <div class="text-media__text">
    <div></div>
  </div>
</div>

Video embed

		<div class="text-media">
  <div class="text-media__image">
	<div>
	  <video src="demo/video.mov" controls></video>
	</div>
  </div>
  
  <div class="text-media__text">
	<div></div>
  </div>
</div>
1 

<div class="text-media">
  <div class="text-media__text">
    <div></div>
  </div>
  
  <div class="text-media__text">
    <div>
      <p>Text</p>
    </div>
    <div class="text-media__background">
      <picture>
        <img src="" alt="" />
      </picture>
    </div>
  </div>
</div>

Background per column

1
Image
1 

<div class="text-media">
  <div class="text-media__text">
	<div></div>
  </div>
  
  <div class="text-media__text text-media--fixed-bg">
	<div>
	  <p>Text</p>
	</div>
	<div class="text-media__background">
	  <picture>
		<img src="" alt="" />
	  </picture>
	</div>
  </div>
</div>

Fixed background per column

1
Image

Offset


<div class="text-media text-media--offset">
  <div class="text-media__text">
    <div></div>
  </div>

  <div class="text-media__image">
    <div>
      <div class="text-media__background">
        <picture>
          <img src="" alt="" />
        </picture>
      </div>
    </div>
  </div>
</div>
Image

Offset (wide text)


<div class="text-media text-media--offset text-media--offset-wide-text">
  <div class="text-media__text">
    <div></div>
  </div>

  <div class="text-media__image">
    <div>
      <div class="text-media__background">
        <picture>
          <img src="" alt="" />
        </picture>
      </div>
    </div>
  </div>
</div>
Image
Image

Offset (bottom text)


<div class="text-media text-media--offset text-media--offset-bottom">
  <div class="text-media__image">
    <div>
      <div class="text-media__background">
        <picture>
          <img src="" alt="" />
        </picture>
      </div>
    </div>
  </div>

  <div class="text-media__text">
    <div></div>
  </div>
</div>

Placeholder image

Blurred micro version of the image, displayed while it is loading. Requires text-media.js or text-media.min.js if the image has transparency.


<div class="text-media">
  <div class="text-media__text">
    <div></div>
  </div>
  
  <div class="text-media__image">
    <div>
      <picture class="n-aspect" style="--width: 423; --height: 597; --placeholder: url('images/mobile-app-iphone-1-placeholder.png')">
        <img src="images/mobile-app-iphone-1.webp" alt="1" />
      </picture>
    </div>
  </div>
</div>

Same <picture> class and inline style for background images with placeholder.

1



Resources

GitHub

npm i text-media

Usage: add text-media.min.css and text-media.min.js to your page or text-media.scss and text-media.js to your project.