Skip to main content

Embedded

Example 1

Lorem ipsum

Bacon ipsum dolor amet beef cupim brisket pork turducken salami pig drumstick chuck ball tip biltong shoulder 

<div class="env-embedded" style="width:20em">
   <div class="env-embedded__img-container">
      <img
         class="env-embedded__img"
         alt=""
         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">
         Bacon ipsum dolor amet beef cupim brisket pork turducken salami pig
         drumstick chuck ball tip biltong shoulder
      </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.

Lorem ipsum

Bacon ipsum dolor amet beef cupim brisket pork turducken salami pig drumstick chuck ball tip biltong shoulder porchetta tenderloin short loin.


Lorem ipsum

Bacon ipsum dolor amet beef cupim brisket pork turducken salami pig drumstick chuck ball tip biltong shoulder porchetta tenderloin short loin. 

<div class="env-embedded env-embedded--horizontal">
   <div class="env-embedded__img-container">
      <img
         class="env-embedded__img"
         alt=""
         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">
         Bacon ipsum dolor amet beef cupim brisket pork turducken salami pig
         drumstick chuck ball tip biltong shoulder porchetta tenderloin short
         loin.
      </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=""
         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">
         Bacon ipsum dolor amet beef cupim brisket pork turducken salami pig
         drumstick chuck ball tip biltong shoulder porchetta tenderloin short
         loin.
      </p>
   </div>
</div>

Example 3

Lorem ipsum

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. 

<div class="env-embedded">
   <div class="env-embedded__img-container">
      <img
         class="env-embedded__img"
         alt=""
         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">
         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.
      </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

Lorem ipsum

Bacon ipsum dolor amet beef cupim brisket pork turducken salami pig drumstick chuck ball tip biltong shoulder porchetta tenderloin short loin. 

<div class="env-embedded env-embedded--cover">
   <div class="env-embedded__img-container">
      <img
         class="env-embedded__img"
         alt=""
         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">
         Bacon ipsum dolor amet beef cupim brisket pork turducken salami pig
         drumstick chuck ball tip biltong shoulder porchetta tenderloin short
         loin.
      </p>
   </div>
</div>

Envision documentation