Components
Author Box
An author card: avatar, name, bio, social links and a posts link.
Live demo
See it in action
Jane Rivera
Lead Product Designer
Jane writes about design systems, accessible interfaces and shipping polished UI with the UnysonPlus page builder.
The markup
Clean, lean code
This is the exact HTML the element outputs, straight from the page builder. No wrapper soup, no inline-style bloat.
<section class="fw-flexbox fw-flex fw-contained fw-collapse">
<div class="author-box ab-5cf89910 fw-ab fw-ab--design-card design-card fw-ab--avatar-circle" style="--ab-avatar:84px;">
<div class="fw-ab__avatar">
<img src="https://demos.unysonplus.com/wp-content/uploads/2026/06/demo-10ad2f5c7992.jpg" alt="Jane Rivera" loading="lazy" decoding="async" />
</div>
<div class="fw-ab__body">
<div class="fw-ab__name">
Jane Rivera
</div>
<div class="fw-ab__role">
Lead Product Designer
</div>
<div class="fw-ab__bio">
<p>Jane writes about design systems, accessible interfaces and shipping polished UI with the UnysonPlus page builder.</p>
</div>
<div class="fw-ab__footer">
<div class="fw-ab__socials">
<a class="fw-ab__social fw-ab__social--website" href="#" target="_blank" rel="noopener noreferrer" aria-label="Website"><svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true"><path fill="currentColor" d="M12 2a10 10 0 100 20 10 10 0 000-20zm6.9 6h-2.5a15.6 15.6 0 00-1.3-3.6A8 8 0 0118.9 8zM12 4c.8 1 1.5 2.4 1.9 4h-3.8c.4-1.6 1.1-3 1.9-4zM4.3 14a7.9 7.9 0 010-4h2.9a17.6 17.6 0 000 4zm.8 2h2.5a15.6 15.6 0 001.3 3.6A8 8 0 015.1 16zm2.5-8H5.1a8 8 0 013.8-3.6A15.6 15.6 0 007.6 8zM12 20c-.8-1-1.5-2.4-1.9-4h3.8c-.4 1.6-1.1 3-1.9 4zm2.3-6H9.7a15.4 15.4 0 010-4h4.6a15.4 15.4 0 010 4zm.8 5.6a15.6 15.6 0 001.3-3.6h2.5a8 8 0 01-3.8 3.6zM16.8 14a17.6 17.6 0 000-4h2.9a7.9 7.9 0 010 4z"/></svg></a>
</div>
</div>
</div>
</div>
</section>To learn more about the Author Box shortcode, please check out the online manual here.