SA Element Registry
Catalog
Admin
+ Add
Edit element
sa-byline
Name (slug)
Version
Category
Heroes & Top-of-Page
Social Proof
Differentiators
Content Blocks
Sidebar
CTA / Footer
Office Anchoring
Status
Live
Beta
Deprecated
Description
Minimal author byline for blog and practice-area pages: an orange-ringed circular headshot (verified live Media Library URL), a bold navy 'By Sam Aguiar' name that links to the bio, and a last-updated date underneath. Surfaces the author + date E-E-A-T signal that previously lived only in JSON-LD schema.
When to use
On blog posts and practice-area pages, placed directly above the On This Page TOC (under the breadcrumb). Not for location heros.
Source skill
Rules (one per line, leading dash optional)
1. Avatar is a circular headshot (Attorney-Headshots-22.jpg) with a 2px Foundry-orange #D97706 ring and small white padding gap. 2. Name reads "By Sam Aguiar" in bold SA navy #0B212D, 17px Poppins 700; the name links to /our-team/sam-aguiar/. 3. Date sits directly under the name in muted gray #6B7785, 14px, normal weight. 4. Minimal by design — NO role kicker ("Founder"), NO "Reviewed for accuracy" line. Sam approved stripping these June 6, 2026. 5. Subtle top hairline border (1px #E5E9ED) separates it from the element above. 6. Place on practice-area and blog content only, NOT on the location hero. Natural home is directly above the On This Page TOC, under the breadcrumb. 7. Pairs with existing Author + dateModified JSON-LD schema on the back end so the E-E-A-T signal stays intact while the visible tag is minimal. 8. No emojis. No em or en dashes.
Live reference URL
Deployment notes
Visible byline that surfaces author + date for E-E-A-T. The firm already ships Author/dateModified in JSON-LD; this exposes it to humans. Lives above the On This Page TOC on blog/practice-area pages. Headshot is the real Media Library bio photo Attorney-Headshots-22.jpg (earlier mock used a placeholder navy circle that 404d). Update the visible date to the page last-updated date per page. Finalized in the 2026-06-06 hero/byline session (Sam: "Just the image. By Sam Aguiar/Date").
HTML
<div class="sa-byline" role="contentinfo" aria-label="Article author and date"> <a class="sa-byline__avatar" href="https://aguiarinjurylawyers.com/our-team/sam-aguiar/" aria-label="Sam Aguiar, attorney bio"> <img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/03/Sam-Aguiar-3.jpg" alt="Sam Aguiar, Kentucky personal injury attorney" width="56" height="56" loading="lazy"> </a> <div class="sa-byline__text"> <p class="sa-byline__name">By <a href="https://aguiarinjurylawyers.com/our-team/sam-aguiar/">Sam Aguiar</a></p> <p class="sa-byline__date">June 6, 2026</p> </div> </div>
CSS
.sa-byline{ display:flex; align-items:center; gap:16px; padding:18px 0; border-top:1px solid #E5E9ED; font-family:'Poppins',system-ui,-apple-system,sans-serif; box-sizing:border-box; } .sa-byline *{box-sizing:border-box;} .sa-byline__avatar{ flex:0 0 auto; display:block; width:56px; height:56px; border-radius:50%; overflow:hidden; border:2px solid #D97706; /* Foundry orange ring */ padding:2px; background:#fff; line-height:0; } .sa-byline__avatar img{ display:block; width:100%; height:100%; border-radius:50%; object-fit:cover; } .sa-byline__text{ display:flex; flex-direction:column; gap:2px; min-width:0; } .sa-byline__name{ margin:0; font-size:17px; font-weight:700; line-height:1.25; color:#0B212D; /* SA navy */ } .sa-byline__name a{ color:#0B212D; text-decoration:none; } .sa-byline__name a:hover, .sa-byline__name a:focus-visible{ color:#D97706; text-decoration:underline; } .sa-byline__date{ margin:0; font-size:14px; font-weight:400; line-height:1.3; color:#6B7785; /* muted gray */ } @media (max-width:480px){ .sa-byline{gap:12px;padding:14px 0;} .sa-byline__avatar{width:48px;height:48px;} .sa-byline__name{font-size:16px;} .sa-byline__date{font-size:13px;} }
Save changes
Cancel