Conference Lanyard
Physical badge with ambient sway, hanging from its own clip. Click flips it — front holds the role band and name, back holds the QR. Each card swings at a slightly different frequency.
Conference Lanyard the 25th of 30 designs in the 30 CSS Badges collection. The design pairs CSS styling with a small amount of JavaScript for interactivity. Copy the HTML, CSS and JavaScript panels below into your project — the JS is self-contained, has zero dependencies, and is safe to drop into any framework (React, Vue, Svelte, plain HTML). The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<div class="conf-card" style="--conf-role-color: #b8442d">
<div class="conf-lanyard">
<svg viewBox="0 0 24 80" aria-hidden="true"><path d="M0 0 L8 80 M24 0 L16 80" stroke="#b8442d" stroke-width="6" fill="none"/></svg>
</div>
<div class="conf-clip"></div>
<div class="conf-badge">
<div class="conf-face conf-front">
<span class="conf-role-band">Speaker</span>
<div class="conf-name-block">
<div class="conf-name">Amara <em>Okonkwo</em></div>
<div class="conf-title-line">Principal · Form & Function</div>
</div>
<div class="conf-footer-front">
<span>#A-2026</span>
<span>14:30 / Hall A</span>
</div>
</div>
<div class="conf-face conf-back">
<div class="conf-qr"></div>
<div class="conf-back-name">Amara Okonkwo</div>
<div class="conf-back-hint">Tap to view profile</div>
</div>
</div>
<div class="conf-caption">Click to flip</div>
</div> .conf-card {
background: linear-gradient(170deg, #2a2724 0%, #1a1815 100%);
padding: 100px 32px 60px;
perspective: 1200px;
text-align: center;
position: relative;
min-height: 500px;
}
.conf-lanyard {
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
width: 24px;
height: 80px;
z-index: 2;
pointer-events: none;
}
.conf-lanyard svg {
width: 100%;
height: 100%;
display: block;
}
.conf-clip {
position: absolute;
top: 94px;
left: 50%;
transform: translateX(-50%);
width: 32px;
height: 16px;
background: linear-gradient(180deg, #d4d4d4 0%, #888 50%, #666 100%);
border-radius: 2px;
z-index: 3;
box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}
.conf-clip::before {
content: '';
position: absolute;
top: 4px;
left: 50%;
transform: translateX(-50%);
width: 14px;
height: 6px;
border: 1.5px solid #333;
border-radius: 50%;
}
.conf-badge {
position: relative;
width: 220px;
margin: 110px auto 18px;
aspect-ratio: 3 / 4.4;
background: #f5f1e8;
border-radius: 6px;
transform-style: preserve-3d;
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
transform-origin: top center;
box-shadow:
0 20px 30px -10px rgba(0,0,0,0.5),
0 4px 8px rgba(0,0,0,0.3);
cursor: pointer;
animation: conf-sway 6s ease-in-out infinite;
}
@keyframes conf-sway {
0%, 100% { transform: rotateZ(-1deg) rotateY(0deg); }
50% { transform: rotateZ(1deg) rotateY(0deg); }
}
@media (prefers-reduced-motion: reduce) {
.conf-badge { animation: none; }
}
.conf-card.is-flipped .conf-badge {
transform: rotateY(180deg);
animation: none;
}
.conf-face {
position: absolute;
inset: 0;
backface-visibility: hidden;
border-radius: 6px;
overflow: hidden;
padding: 22px 18px;
display: flex;
flex-direction: column;
}
.conf-front {
background: linear-gradient(180deg, #f8f5ed 0%, #ede8da 100%);
}
.conf-back {
background: var(--conf-role-color, #1a1815);
color: #f5f1e8;
transform: rotateY(180deg);
align-items: center;
justify-content: center;
}
.conf-role-band {
display: inline-block;
padding: 4px 10px;
font-family: system-ui, sans-serif;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.25em;
text-transform: uppercase;
background: var(--conf-role-color, #1a1815);
color: #f5f1e8;
align-self: flex-start;
}
.conf-name-block { margin-top: auto; }
.conf-name {
font-family: Georgia, "Fraunces", serif;
font-size: 26px;
line-height: 1;
font-weight: 400;
color: #1a1815;
margin-bottom: 4px;
letter-spacing: -0.02em;
}
.conf-name em {
font-style: italic;
font-weight: 300;
}
.conf-title-line {
font-family: system-ui, sans-serif;
font-size: 10px;
letter-spacing: 0.12em;
color: #4a4239;
text-transform: uppercase;
margin-bottom: 12px;
}
.conf-footer-front {
border-top: 1px dashed #999;
padding-top: 10px;
display: flex;
justify-content: space-between;
font-family: system-ui, sans-serif;
font-size: 8px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #4a4239;
}
.conf-qr {
width: 80px;
height: 80px;
background-image:
linear-gradient(0deg, var(--conf-role-color) 50%, transparent 50%),
linear-gradient(90deg, var(--conf-role-color) 50%, transparent 50%);
background-size: 8px 8px;
background-color: #f5f1e8;
border: 8px solid #f5f1e8;
margin-bottom: 16px;
box-shadow: 0 0 0 1px var(--conf-role-color);
}
.conf-back-name {
font-family: Georgia, "Fraunces", serif;
font-style: italic;
font-size: 18px;
margin-bottom: 4px;
}
.conf-back-hint {
font-family: system-ui, sans-serif;
font-size: 8px;
letter-spacing: 0.3em;
text-transform: uppercase;
opacity: 0.6;
}
.conf-caption {
margin-top: 8px;
font-family: system-ui, sans-serif;
color: rgba(255,255,255,0.4);
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
} // Click the badge to flip front ↔ back. Stops the ambient sway while
// flipped so the back-side QR doesn't wobble away from the user's eye.
document.querySelectorAll('.conf-card').forEach(function (card) {
var badge = card.querySelector('.conf-badge');
if (!badge) return;
badge.addEventListener('click', function () {
card.classList.toggle('is-flipped');
});
});