Element Templates

Use code icon (</>) to grab the code

Style:

Avatar Card – Hydrogen

  • Avatar Card
  • Aristotle
  • Plato
<div data-etch-element="flex-div" class="avatar-card–plato avatar-card–h avatar-card sketch"> <img src="https://design.sketchframework.com/wp-content/uploads/2025/08/avatar-example.jpg" alt="" decoding="async" class="avatar-card__avatar" /> <div class="avatar-card__details"> <h3 class="avatar-card__name">Jonathan Doughnut</h3> </div> </div>

Avatar Card – Helium

  • Avatar Card
  • Aristotle
  • Plato
<div data-etch-element="flex-div" class="avatar-card–plato avatar-card–he avatar-card sketch"> <img src="https://design.sketchframework.com/wp-content/uploads/2025/08/avatar-example.jpg" alt="" decoding="async" class="avatar-card__avatar" /> <div class="avatar-card__details"> <h3 class="avatar-card__name">Jonathan Doughnut</h3> <p class="avatar-card__title">Title</p> </div> </div>

Avatar Card – Lithium

  • Avatar Card
  • Aristotle
  • Plato
<div data-etch-element="flex-div" class="avatar-card–plato avatar-card–li avatar-card sketch"> <img src="https://design.sketchframework.com/wp-content/uploads/2025/08/avatar-example.jpg" alt="" decoding="async" class="avatar-card__avatar" /> <div class="avatar-card__details"> <h3 class="avatar-card__name">Jonathan Doughnut</h3> <div class="avatar-card__text"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error dolor consequatur, minima provident iure saepe blanditiis aliquam magni fuga.</p> </div> </div> </div>

Avatar Card – Beryllium

  • Avatar Card
  • Aristotle
  • Plato
<div data-etch-element="flex-div" class="avatar-card–plato avatar-card–be avatar-card sketch"> <img src="https://design.sketchframework.com/wp-content/uploads/2025/08/avatar-example.jpg" alt="" decoding="async" class="avatar-card__avatar" /> <div class="avatar-card__details"> <h3 class="avatar-card__name">Jonathan Doughnut</h3> <a href="#" class="avatar-card__link">Read Bio</a> </div> </div>

Avatar Card – Carbon

  • Avatar Card
  • Aristotle
  • Plato
<div data-etch-element="flex-div" class="avatar-card–plato avatar-card–c avatar-card sketch"> <img src="https://design.sketchframework.com/wp-content/uploads/2025/08/avatar-example.jpg" alt="" decoding="async" class="avatar-card__avatar" /> <div class="avatar-card__details"> <h3 class="avatar-card__name">Jonathan Doughnut</h3> <p class="avatar-card__title">Job Title</p> <div class="avatar-card__text"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error dolor consequatur, minima provident iure saepe blanditiis aliquam magni fuga.</p> </div> </div> </div>

Avatar Card – Nitrogen

  • Avatar Card
  • Aristotle
  • Plato
<div data-etch-element="flex-div" class="avatar-card–plato avatar-card–n avatar-card sketch"> <img src="https://design.sketchframework.com/wp-content/uploads/2025/08/avatar-example.jpg" alt="" decoding="async" class="avatar-card__avatar" /> <div class="avatar-card__details"> <h3 class="avatar-card__name">Jonathan Doughnut</h3> <p class="avatar-card__title">Job Title</p> <a href="#" class="avatar-card__link">Read Bio</a> </div> </div>

Avatar Card – Oxygen

  • Avatar Card
  • Aristotle
  • Plato
<div data-etch-element="flex-div" class="avatar-card–plato avatar-card–f avatar-card sketch"> <img src="https://design.sketchframework.com/wp-content/uploads/2025/08/avatar-example.jpg" alt="" decoding="async" class="avatar-card__avatar" /> <div class="avatar-card__details"> <h3 class="avatar-card__name">Jonathan Doughnut</h3> <p class="avatar-card__title">Job Title</p> <div class="avatar-card__text"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error dolor consequatur, minima provident iure saepe blanditiis aliquam magni fuga.</p> </div> <a href="#" class="avatar-card__link">Read Bio</a> </div> </div>

Image Card – Hydrogen

  • Image Card
  • Aristotle
  • Plato
<div data-etch-element="flex-div" class="image-card–plato image-card–h image-card sketch"> <img src="https://design.sketchframework.com/wp-content/uploads/2025/08/example-image.jpg" alt="" decoding="async" class="image-card__image"> <div class="image-card__details"> <h3 class="image-card__heading">Image Heading</h3> </div> </div>

Image Card – Helium

  • Image Card
  • Aristotle
  • Plato
<div data-etch-element="flex-div" class="image-card–plato image-card–he image-card sketch"> <img src="https://design.sketchframework.com/wp-content/uploads/2025/08/example-image.jpg" alt="" decoding="async" class="image-card__image"> <div class="image-card__details"> <p class="image-card__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error dolor consequatur, minima provident iure saepe blanditiis aliquam magni fuga.</p> </div> </div>

Image Card – Lithium

  • Image Card
  • Aristotle
  • Plato
<div data-etch-element="flex-div" class="image-card–plato image-card–li image-card sketch"> <img src="https://design.sketchframework.com/wp-content/uploads/2025/08/example-image.jpg" alt="" decoding="async" class="image-card__image"> <div class="image-card__details"> <a href="#" class="image-card__link">Read more</a> </div> </div>

Image Card – Beryllium

  • Image Card
  • Aristotle
  • Plato
<div data-etch-element="flex-div" class="image-card–plato image-card–li image-card sketch"> <img src="https://design.sketchframework.com/wp-content/uploads/2025/08/example-image.jpg" alt="" decoding="async" class="image-card__image"> <div class="image-card__details"> <h3 class="image-card__heading">Image Heading</h3> <p class="image-card__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error dolor consequatur, minima provident iure saepe blanditiis aliquam magni fuga.</p> </div> </div>

Image Card – Carbon

  • Image Card
  • Aristotle
  • Plato
<div data-etch-element="flex-div" class="image-card–plato image-card–c image-card sketch"> <img src="https://design.sketchframework.com/wp-content/uploads/2025/08/example-image.jpg" alt="" decoding="async" class="image-card__image"> <div class="image-card__details"> <h3 class="image-card__heading">Image Heading</h3> <a href="#" class="image-card__link">Read more</a> </div> </div>

Image Card – Nitrogen

  • Image Card
  • Aristotle
  • Plato
<div data-etch-element="flex-div" class="image-card–plato image-card–n image-card sketch"> <img src="https://design.sketchframework.com/wp-content/uploads/2025/08/example-image.jpg" alt="" decoding="async" class="image-card__image"> <div class="image-card__details"> <h3 class="image-card__heading">Image Heading</h3> <p class="image-card__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error dolor consequatur, minima provident iure saepe blanditiis aliquam magni fuga.</p> <a href="#" class="image-card__link">Read more</a> </div> </div>

Icon Card – Hydrogen

  • Icon Card
  • Aristotle
  • Plato
<div data-etch-element="flex-div" class="icon-card–plato icon-card–h icon-card sketch"> <img src="https://design.sketchframework.com/wp-content/uploads/2025/08/check-mark.svg" alt="" class="icon-card__icon" /> <div data-etch-element="flex-div" class="icon-card__details"> <h3 class="icon-card__heading">Icon Heading</h3> </div> </div>

Icon Card – Helium

  • Icon Card
  • Aristotle
  • Plato
<div data-etch-element="flex-div" class="icon-card–plato icon-card–h icon-card sketch"> <img src="http://localhost/etch/wp-content/uploads/2025/08/check-fat.svg" alt="" class="icon-card__icon" /> <div data-etch-element="flex-div" class="icon-card__details"> <h3 class="icon-card__heading">Icon Heading</h3> <p class="icon-card__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta eligendi rerum officiis dolorum, explicabo eius illo fugit?</p> </div> </div>

Icon Card – Lithium

  • Icon Card
  • Aristotle
  • Plato
<div data-etch-element="flex-div" class="icon-card–plato icon-card–h icon-card sketch"> <img src="http://localhost/etch/wp-content/uploads/2025/08/check-fat.svg" alt="" class="icon-card__icon" /> <div data-etch-element="flex-div" class="icon-card__details"> <h3 class="icon-card__heading">Icon Heading</h3> <a href="#" class="icon-card__link">Link</a> </div> </div>

Icon Card – Beryllium

  • Icon Card
  • Aristotle
  • Plato
<div data-etch-element="flex-div" class="icon-card–plato icon-card–h icon-card sketch"> <img src="http://localhost/etch/wp-content/uploads/2025/08/check-fat.svg" alt="" class="icon-card__icon" /> <div data-etch-element="flex-div" class="icon-card__details"> <h3 class="icon-card__heading">Icon Heading</h3> <p class="icon-card__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta eligendi rerum officiis dolorum, explicabo eius illo fugit?</p> <a href="#" class="icon-card__link">Link</a> </div> </div>

Search Form – Hydrogen

  • Search
  • Aristotle
  • Plato
<form method="get" action="{site.url}/" class="search-form–plato search-form sketch"> <label for="s" class="screen-reader-text">Search</label> <input name="s" id="s" type="search" placeholder="Search…" class="search-form__input" /> <button type="submit" class="search-form__button">⌕ </button> </form>