Team Profile Frame
A staff profile gently emphasizes the portrait frame and specialty tags.
A staff profile gently emphasizes the portrait frame and specialty tags.
Live Demo
Hover over the element or use Tab to focus.
Source Code
Copy the HTML, CSS or JavaScript you need for your project.
HTML
<article class="tbx-1053" tabindex="0" aria-label="Designer Ryoko Matsumoto, web and UI design">
<div class="tbx-1053__visual" aria-hidden="true"><svg viewBox="0 0 160 118" role="presentation"><rect width="160" height="118" fill="#e1e9e7"/><circle cx="80" cy="42" r="24" fill="#dbab85"/><path d="M55 38Q58 8 82 15Q111 18 104 56Q100 41 94 31Q78 47 59 42Z" fill="#34465b"/><path d="M38 118Q42 75 80 75Q120 75 123 118Z" fill="#668c92"/><path d="M70 76L80 89L91 76" fill="#f1d9c3"/></svg><span class="tbx-1053__stamp">PROFILE</span></div>
<div class="tbx-1053__info"><span>DESIGNER</span><b>Ryoko Matsumoto</b><small>Web Design / UI Planning</small><em>#UI Design #Design</em></div>
</article>
CSS
.tbx-1053{width:min(224px,100%);background:#fff;border:1px solid #dce5e2;border-radius:9px;overflow:hidden;color:#294458;font-family:system-ui;transition:box-shadow .3s,border-color .3s;cursor:default}
.tbx-1053__visual{height:128px;position:relative;overflow:hidden;background:#e1e9e7}.tbx-1053 svg{height:100%;width:100%;display:block;transition:transform .45s}.tbx-1053__stamp{position:absolute;right:10px;top:10px;color:white;background:#244f60c9;border-radius:3px;padding:5px 7px;font-size:9px;letter-spacing:.11em;transform:translateY(-14px);opacity:0;transition:opacity .3s,transform .3s}
.tbx-1053__info{display:grid;gap:4px;padding:11px 14px 14px}.tbx-1053__info>span{font-size:9px;letter-spacing:.11em;color:#709094}.tbx-1053__info>b{font-size:14px}.tbx-1053__info>small{font-size:10px;color:#667c89}.tbx-1053__info>em{font-style:normal;font-size:9px;font-weight:700;color:#8c7356;border-top:1px solid #e6ece9;padding-top:7px;margin-top:4px;transition:color .3s}
.tbx-1053:is(:hover,:focus-visible){box-shadow:0 14px 28px #1d4a591b;border-color:#81b1ad}.tbx-1053:is(:hover,:focus-visible) svg{transform:scale(1.085)}.tbx-1053:is(:hover,:focus-visible) .tbx-1053__stamp{transform:translateY(0);opacity:1}.tbx-1053:is(:hover,:focus-visible) em{color:#1e7776}
.tbx-1053:focus-visible{outline:3px solid #d8a46b;outline-offset:3px}@media(prefers-reduced-motion:reduce){.tbx-1053,.tbx-1053 svg,.tbx-1053__stamp,.tbx-1053__info>em{transition:none}}
How to Use
Insert the HTML and add the CSS to your stylesheet. Adjust colors and sizes and avoid class conflicts.
Use Case
Useful for team sections and about sections.
Technical Notes
Keep controls usable on touch devices. Test keyboard focus and reduced-motion preferences.
Mobile: Ensure the interactive content remains accessible without hover on touch devices.
Browser: Uses modern CSS. Check behavior in the browsers you support.
Reduced Motion: Check that prefers-reduced-motion is respected.