Sketch Design Framework

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>

Article Card – Hydrogen

  • Article Card
  • Plato
<div data-etch-element="flex-div" class="article-card–plato article-card–h article-card sketch focus-parent"> <img src="https://design.sketchframework.com/wp-content/uploads/2025/08/article-example-scaled.jpg" alt="" class="article-card__image" /> <div data-etch-element="flex-div" class="article-card__details"> <h3 class="article-card__title"><a href="#" class="clickable-parent">Article Title</a></h3> </div> </div>

Article Card – Helium

  • Article Card
  • Plato
<div data-etch-element="flex-div" class="article-card–plato article-card–h article-card sketch focus-parent"> <img src="https://design.sketchframework.com/wp-content/uploads/2025/08/article-example-scaled.jpg" alt="" class="article-card__image" /> <div data-etch-element="flex-div" class="article-card__details"> <h3 class="article-card__title"><a href="#" class="clickable-parent">Article Title</a></h3> <p class="article-card__excerpt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Id tenetur praesentium doloribus in ipsum obcaecati beatae modi. Accusamus quia beatae laboriosam ipsam, nobis eveniet nam iure dolorum, provident rem illum.</p> </div> </div>

Article Card – Lithium

  • Article Card
  • Plato
<div data-etch-element="flex-div" class="article-card–plato article-card–h article-card sketch focus-parent"> <img src="https://design.sketchframework.com/wp-content/uploads/2025/08/article-example-scaled.jpg" alt="" class="article-card__image" /> <div data-etch-element="flex-div" class="article-card__details"> <h3 class="article-card__title"><a href="#" class="clickable-parent">Article Title</a></h3> <div class="article-card__meta"> <p class="article-card__author">Author name</p> • <p class="article-card__date">1/1/70</p> </div> </div> </div>

Article Card – Beryllium

  • Article Card
  • Plato
<div data-etch-element="flex-div" class="article-card–plato article-card–h article-card sketch focus-parent"> <img src="https://design.sketchframework.com/wp-content/uploads/2025/08/article-example-scaled.jpg" alt="" class="article-card__image" /> <div data-etch-element="flex-div" class="article-card__details"> <div class="article-card__terms">Taxonomy Term</div> <h3 class="article-card__title"><a href="#" class="clickable-parent">Article Title</a></h3> </div> </div>

Article Card – Boron

  • Article Card
  • Plato
<div data-etch-element="flex-div" class="article-card–plato article-card–h article-card sketch focus-parent"> <img src="https://design.sketchframework.com/wp-content/uploads/2025/08/article-example-scaled.jpg" alt="" class="article-card__image" /> <div data-etch-element="flex-div" class="article-card__details"> <h3 class="article-card__title"><a href="#" class="clickable-parent">Article Title</a></h3> <div class="article-card__meta"> <p class="article-card__author">Author name</p> • <p class="article-card__date">1/1/70</p> </div> <p class="article-card__excerpt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Id tenetur praesentium doloribus in ipsum obcaecati beatae modi. Accusamus quia beatae laboriosam ipsam, nobis eveniet nam iure dolorum, provident rem illum.</p> </div> </div>

Article Card – Carbon

  • Article Card
  • Plato
<div data-etch-element="flex-div" class="article-card–plato article-card–h article-card sketch focus-parent"> <img src="https://design.sketchframework.com/wp-content/uploads/2025/08/article-example-scaled.jpg" alt="" class="article-card__image" /> <div data-etch-element="flex-div" class="article-card__details"> <div class="article-card__terms">Taxonomy Term</div> <h3 class="article-card__title"><a href="#" class="clickable-parent">Article Title</a></h3> <p class="article-card__excerpt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Id tenetur praesentium doloribus in ipsum obcaecati beatae modi. Accusamus quia beatae laboriosam ipsam, nobis eveniet nam iure dolorum, provident rem illum.</p> </div> </div>

Article Card – Nitrogen

  • Article Card
  • Plato
<div data-etch-element="flex-div" class="article-card–plato article-card–h article-card sketch focus-parent"> <img src="https://design.sketchframework.com/wp-content/uploads/2025/08/article-example-scaled.jpg" alt="" class="article-card__image" /> <div data-etch-element="flex-div" class="article-card__details"> <div class="article-card__terms">Taxonomy Term</div> <h3 class="article-card__title"><a href="#" class="clickable-parent">Article Title</a></h3> <div class="article-card__meta"> <p class="article-card__author">Author name</p> • <p class="article-card__date">1/1/70</p> </div> </div> </div>

Article Card – Oxygen

  • Article Card
  • Plato
<div data-etch-element="flex-div" class="article-card–plato article-card–h article-card sketch focus-parent"> <img src="https://design.sketchframework.com/wp-content/uploads/2025/08/article-example-scaled.jpg" alt="" class="article-card__image" /> <div data-etch-element="flex-div" class="article-card__details"> <div class="article-card__terms"><span class="article-card__term">Taxonomy Term</span></div> <h3 class="article-card__title"><a href="#" class="clickable-parent">Article Title</a></h3> <div class="article-card__meta"> <p class="article-card__author">Author name</p> • <p class="article-card__date">1/1/70</p> </div> <p class="article-card__excerpt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Id tenetur praesentium doloribus in ipsum obcaecati beatae modi. Accusamus quia beatae laboriosam ipsam, nobis eveniet nam iure dolorum, provident rem illum.</p> </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>

Brand Identity – Hydrogen

  • Brand Identity
  • Plato
<a href="{site.url}" class="brand-identity–plato brand-identity–h brand-identity sketch">{site.name}</a>

Brand Identity – Helium

  • Brand Identity
  • Plato
<a href="{site.url}" class="brand-identity–plato brand-identity–he brand-identity sketch"> <img class="brand-identity__logo" src="https://design.sketchframework.com/wp-content/uploads/2025/08/logoipsum-280.svg" alt="{site.name} logo, go to home page" /> </a>

Brand Identity – Lithium

  • Brand Identity
  • Plato
<a href="{site.url}" class="brand-identity–plato brand-identity–li brand-identity sketch"> <img class="brand-identity__logo" src="https://design.sketchframework.com/wp-content/uploads/2025/08/logoipsum-280.svg" alt="" /> {site.name} </a>

Text Card – Hydrogen

  • Text Card
  • Plato
<div data-etch-element="flex-div" class="text-card–plato text-card–h text-card sketch"> <h3 class="text-card__heading">Heading text</h3> <p class="text-card__text">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p> </div>

Text Card – Helium

  • Text Card
  • Plato
<div data-etch-element="flex-div" class="text-card–plato text-card–he text-card sketch"> <h3 class="text-card__heading">Heading text</h3> <a href="#" class="text-card__link">Link/button</a> </div>

Text Card – Lithium

  • Text Card
  • Plato
<div data-etch-element="flex-div" class="text-card–plato text-card–li text-card sketch"> <p class="text-card__eyebrow">Eyebrow</p> <h3 class="text-card__heading">Heading text</h3> </div>

Text Card – Beryllium

  • Text Card
  • Plato
<div data-etch-element="flex-div" class="text-card–plato text-card–be text-card sketch"> <h3 class="text-card__heading">Heading text</h3> <p class="text-card__text">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p> <a href="#" class="text-card__link">Link/button</a> </div>

Text Card – Boron

  • Text Card
  • Plato
<div data-etch-element="flex-div" class="text-card–plato text-card–b text-card sketch"> <p class="text-card__eyebrow">Eyebrow</p> <h3 class="text-card__heading">Heading text</h3> <p class="text-card__text">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p> </div>

Text Card – Carbon

  • Text Card
  • Plato
<div data-etch-element="flex-div" class="text-card–plato text-card–c text-card sketch"> <p class="text-card__eyebrow">Eyebrow</p> <h3 class="text-card__heading">Heading text</h3> <a href="#" class="text-card__link">Link/button</a> </div>

Text Card – Nitrogen

  • Text Card
  • Plato
<div data-etch-element="flex-div" class="text-card–plato text-card–n text-card sketch"> <p class="text-card__eyebrow">Eyebrow</p> <h3 class="text-card__heading">Heading text</h3> <p class="text-card__text">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p> <a href="#" class="text-card__link">Link/button</a> </div>

Star Rating

  • Star Rating
  • Plato
<div class="star-rating–plato star-rating-h star-rating sketch"> <div class="empty-stars"> <svg viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><path d="M128,189.09l54.72,33.65a8.4,8.4,0,0,0,12.52-9.17l-14.88-62.79,48.7-42A8.46,8.46,0,0,0,224.27,94L160.36,88.8,135.74,29.2a8.36,8.36,0,0,0-15.48,0L95.64,88.8,31.73,94a8.46,8.46,0,0,0-4.79,14.83l48.7,42L60.76,213.57a8.4,8.4,0,0,0,12.52,9.17Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path></svg><svg viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><path d="M128,189.09l54.72,33.65a8.4,8.4,0,0,0,12.52-9.17l-14.88-62.79,48.7-42A8.46,8.46,0,0,0,224.27,94L160.36,88.8,135.74,29.2a8.36,8.36,0,0,0-15.48,0L95.64,88.8,31.73,94a8.46,8.46,0,0,0-4.79,14.83l48.7,42L60.76,213.57a8.4,8.4,0,0,0,12.52,9.17Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path></svg><svg viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><path d="M128,189.09l54.72,33.65a8.4,8.4,0,0,0,12.52-9.17l-14.88-62.79,48.7-42A8.46,8.46,0,0,0,224.27,94L160.36,88.8,135.74,29.2a8.36,8.36,0,0,0-15.48,0L95.64,88.8,31.73,94a8.46,8.46,0,0,0-4.79,14.83l48.7,42L60.76,213.57a8.4,8.4,0,0,0,12.52,9.17Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path></svg><svg viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><path d="M128,189.09l54.72,33.65a8.4,8.4,0,0,0,12.52-9.17l-14.88-62.79,48.7-42A8.46,8.46,0,0,0,224.27,94L160.36,88.8,135.74,29.2a8.36,8.36,0,0,0-15.48,0L95.64,88.8,31.73,94a8.46,8.46,0,0,0-4.79,14.83l48.7,42L60.76,213.57a8.4,8.4,0,0,0,12.52,9.17Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path></svg><svg viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><path d="M128,189.09l54.72,33.65a8.4,8.4,0,0,0,12.52-9.17l-14.88-62.79,48.7-42A8.46,8.46,0,0,0,224.27,94L160.36,88.8,135.74,29.2a8.36,8.36,0,0,0-15.48,0L95.64,88.8,31.73,94a8.46,8.46,0,0,0-4.79,14.83l48.7,42L60.76,213.57a8.4,8.4,0,0,0,12.52,9.17Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path></svg> </div> <div class="filled-stars" style="width: 4.3em;"> <svg fill="currentColor" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><path d="M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z"></path></svg><svg fill="currentColor" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><path d="M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z"></path></svg><svg fill="currentColor" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><path d="M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z"></path></svg><svg fill="currentColor" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><path d="M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z"></path></svg><svg fill="currentColor" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><path d="M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z"></path></svg> </div> </div>
© Sketch