Identity and belonging

정체성과 소속감

A brand can gain relevance by reflecting a community people identify with.

···
html
<div class="belong"><div class="node">ME</div><div class="bridge"><span id="bridgeText">FUNCTION</span><i></i></div><div class="node group" id="group">PRODUCT</div><div class="belongFoot" id="belongFoot">USEFUL, BUT DISTANT</div></div>
css
@media(min-width:700px){body>div{transform:scale(1.45)}}.belong{position:relative;display:flex;align-items:center;justify-content:space-between;gap:clamp(8px,3vmin,20px);width:min(89%,560px);padding-bottom:clamp(28px,8vmin,55px);font:800 clamp(10px,max(1.8vmin,1vw),14px)/1 sans-serif}.node{display:grid;place-items:center;width:clamp(66px,20vmin,148px);height:clamp(66px,20vmin,148px);border-radius:50%;border:3px solid var(--fg);background:var(--surface);flex:none;text-align:center}.group{border-color:var(--accent);background:var(--accent-2);color:#211b19}.bridge{flex:1;min-width:0;text-align:center;color:var(--muted)}.bridge span{display:block;white-space:nowrap;font-size:clamp(10px,max(1.6vmin,1vw),13px)}.bridge i{display:block;height:4px;background:var(--line);margin-top:clamp(9px,3vmin,20px);transition:.5s}.belong.connected .bridge i{background:var(--accent);box-shadow:0 0 0 4px var(--accent-2)}.belongFoot{position:absolute;bottom:0;left:0;color:var(--accent);letter-spacing:.06em}
js
const board=document.querySelector('.belong');const bridge=document.querySelector('#bridgeText');const group=document.querySelector('#group');const foot=document.querySelector('#belongFoot');function flip(){const on=board.classList.toggle('connected');bridge.textContent=on?'SHARED ACTIVITY':'FUNCTION';group.textContent=on?'OUR GROUP':'PRODUCT';foot.textContent=on?'FUNCTION + BELONGING':'USEFUL, BUT DISTANT'}setTimeout(flip,500);setInterval(flip,2500);

Identity and belonging describe relevance that comes from a product's connection to a community someone feels part of, beyond functional use. Edelman's 2026 brand trust study says brands can mark identity and belonging, with utility, community, and emotion contributing to relevance.

The demo keeps the function fixed while adding a real community activity cue and moving a connection line. Distance is an educational metaphor, not a survey score.

Do not assign every buyer a single identity or promote exclusion. Ground community cues in what participants actually say and do, and keep the offer understandable to others.

When to use

Use it to test whether real community context makes a functional offer more relevant.

Open as page ↗