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>