Embedded

Example 1

<div class="env-embedded" style="width:20em">
   <div class="env-embedded__img-container">
      <img
         class="env-embedded__img"
         alt="Image alternative"
         src="https://envisionui.io/placeholders/text/640x480.png"
      />
   </div>
   <div class="env-embedded__block">
      <h4 class="env-text">Lorem ipsum</h4>
      <p class="env-text">
         <span class="env-text--muted">
            Bacon ipsum dolor amet beef cupim brisket pork turducken salami pig
            drumstick chuck ball tip biltong shoulder
         </span>
      </p>
      <button type="button" class="env-button env-button--primary">
         Lorem ipsum
      </button>
   </div>
</div>

Example 2

Uses env-embedded--horizontal and env-embedded__img. Use env-embedded__img-container--right to align image to the right.

<div class="env-embedded env-embedded--horizontal">
   <div class="env-embedded__img-container">
      <img
         class="env-embedded__img"
         alt="Image alternative"
         src="https://envisionui.io/placeholders/text/270x180.png"
      />
   </div>
   <div class="env-embedded__block">
      <h4 class="env-text">Lorem ipsum</h4>
      <p class="env-text">
         <span class="env-text--muted">
            Bacon ipsum dolor amet beef cupim brisket pork turducken salami pig
            drumstick chuck ball tip biltong shoulder porchetta tenderloin short
            loin.
         </span>
      </p>
   </div>
</div>

<br />

<div class="env-embedded env-embedded--horizontal">
   <div class="env-embedded__img-container env-embedded__img-container--right">
      <img
         class="env-embedded__img"
         alt="Image alternative"
         src="https://envisionui.io/placeholders/text/270x180.png"
      />
   </div>
   <div class="env-embedded__block">
      <h4 class="env-text">Lorem ipsum</h4>
      <p class="env-text">
         <span class="env-text--muted">
            Bacon ipsum dolor amet beef cupim brisket pork turducken salami pig
            drumstick chuck ball tip biltong shoulder porchetta tenderloin short
            loin.
         </span>
      </p>
   </div>
</div>

Example 3

<div class="env-embedded">
   <div class="env-embedded__img-container">
      <img
         class="env-embedded__img"
         alt="Image alternative"
         src="https://envisionui.io/placeholders/text/769x180.png"
      />
   </div>
   <div class="env-embedded__block">
      <h4 class="env-text">Lorem ipsum</h4>
      <p class="env-text">
         <span class="env-text--muted">
            Bacon ipsum dolor amet beef cupim brisket pork turducken salami pig
            drumstick chuck ball tip biltong shoulder porchetta tenderloin short
            loin. Jowl pastrami drumstick pig, beef jerky chicken ham hock
            salami.
         </span>
      </p>
   </div>
</div>

Example 4

Uses env-embedded__block--overlay to position text on top of image. You can align text to left or right with env-embedded__block--overlay--left or *--right

<div class="env-embedded env-embedded--cover">
   <div class="env-embedded__img-container">
      <img
         class="env-embedded__img"
         alt="Image alternative"
         src="https://envisionui.io/placeholders/text/769x180.png"
      />
   </div>
   <div class="env-embedded__block--overlay">
      <h4 class="env-text">Lorem ipsum</h4>
      <p class="env-text">
         <span class="env-text--muted">
            Bacon ipsum dolor amet beef cupim brisket pork turducken salami pig
            drumstick chuck ball tip biltong shoulder porchetta tenderloin short
            loin.
         </span>
      </p>
   </div>
</div>