CSS: avatar

.instui-avatar · stable — 이니셜 또는 이미지가 표시되는 사용자 아바타로, 기본적으로 원형입니다.

기본적으로 팔레트 색상은 투명 배경 위에서 이니셜에 색을 입힙니다; -has-inverse-color는 표면을 색으로 채우고 이니셜을 동일 색상 위에 놓습니다. -color-ai 변형은 항상 보라→바다(gradient)로 채웁니다. 전체 표시 이름은 콘텐츠에 넣어 접근성 트리에 남기고, 컴팩트 시각 표시에는 data-initials="XX"를 추가하세요 — 실제 텍스트가 화면 읽기 도구가 읽는 내용입니다. data-initials가 없으면 넘치는 콘텐츠는 단순히 잘려서 표시(말줄임 없음)됩니다; 정확히 첫 글자만 잘라 표시하려면 .name로 감싸거나, 두 글자를 잘라 표시하려면 .first-name/.last-name로 분리하세요(둘 중 하나를 생략하면 다른 하나가 가운데에 유지됩니다).

Source: avatar.css

TIP

JS 향상 — 이 컴포넌트의 CSS는 자체적으로 렌더링되고 동작합니다; 상호작용 동작을 추가하려면 @pantoken/interactions와 짝지으세요. 아래 수정자 표를 참고하세요.

접근성

이미지 아바타에는 의미 있는 alt(사용자 이름)를 제공하세요 — 일반적인 "avatar"는 피하세요; 이니셜 전용 아바타의 경우에는 축약된 문자보다 실제 이름 콘텐츠(일반 텍스트, data-initials, .name 또는 .first-name/.last-name)를 선호하면 보조 기술이 실제 이름을 읽어줍니다.

사용법

@import "@pantoken/components/components.css";
@import "@pantoken/components/avatar.css";

예제들

<span class="instui-avatar --me-sm">LH</span>
<span class="instui-avatar -color-ai --me-sm">AI</span>
<span class="instui-avatar --me-sm" data-initials="NV">Dr. Nguyen Van Thoc</span>
<span class="instui-avatar"><span class="name">Miguel Sanchez</span></span>
<span class="instui-avatar"><span class="first-name">Miguel</span> <span class="last-name">Sanchez</span></span>

구조

아바타는 <img>, 일반/데이터 이니셜 텍스트, .name 래퍼, 또는 .first-name/.last-name 쌍 중 하나를 표시합니다.

.instui-avatar
  img (0..1)
  .name (0..1)
  .first-name (0..1)
  .last-name (0..1)

flowchart TD n0[".instui-avatar"]:::cssdoc-root n1("img"):::cssdoc-part n2(".name"):::cssdoc-part n3(".first-name"):::cssdoc-part n4(".last-name"):::cssdoc-part n0 -.->|0..1| n1 n0 -.->|0..1| n2 n0 -.->|0..1| n3 n0 -.->|0..1| n4 classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

수정자

수정자	설명
.-color-accent1	더 이상 사용되지 않음 — use .-color-blue.
.-color-accent2	더 이상 사용되지 않음 — use .-color-green.
.-color-accent3	더 이상 사용되지 않음 — use .-color-red.
.-color-accent4	더 이상 사용되지 않음 — use .-color-orange.
.-color-accent5	더 이상 사용되지 않음 — use .-color-ash.
.-color-accent6	더 이상 사용되지 않음 — use .-color-grey.
.-color-ai	AI 강조 팔레트 색상.
.-color-ash	Ash 팔레트 색상.
.-color-blue	Blue 팔레트 색상.
.-color-green	Green 팔레트 색상.
.-color-grey	Grey 팔레트 색상.
.-color-orange	Orange 팔레트 색상.
.-color-red	Red 팔레트 색상.
.-has-inverse-color	반전(어두운 배경용) 텍스트 색상을 사용합니다.
.-shape-rectangle	원 대신 정사각형(사각형) 모양.
.-show-border	Alias — maps to .-show-border-always.
.-show-border-always	이미지나 반전 채우기 위에서도 테두리 링을 강제로 표시합니다.
.-show-border-never	테두리 링을 강제로 끕니다.
.-size-2xl	두 단계 더 큼.
.-size-2xs	두 단계 더 작음.
.-size-large	Large. -size-lg의 장기형 별칭.
.-size-lg	크게(Large).
.-size-md	중간(기본값).
.-size-medium	중간(기본값). -size-md의 장기형 별칭.
.-size-sm	작음(Small).
.-size-small	작음(Small). -size-sm의 장기형 별칭.
.-size-x-large	매우 큼(Extra large). -size-xl의 장기형 별칭.
.-size-x-small	매우 작음(Extra small). -size-xs의 장기형 별칭.
.-size-xl	매우 큼(Extra large).
.-size-xs	매우 작음(Extra small).
.-size-xx-large	두 단계 더 큼. -size-2xl의 장기형 별칭.
.-size-xx-small	두 단계 더 작음. -size-2xs의 장기형 별칭.

부분

부분	설명
.first-name	선택적(.last-name과 쌍): 주어진 이름을 감싸며 선행 글자만 잘라 표시합니다.
.last-name	선택적(.first-name과 쌍): 성(family name)을 감싸며 선행 글자만 잘라 표시합니다.
.name	Optional: wrap the full name to clip it to a single leading letter without data-initials or JS.

의사 요소

의사 요소	설명
::before	—

사용된 토큰

Token	타입	값
--instui-component-avatar-ai-bottom-gradient-color	<color>	#00828E
--instui-component-avatar-ai-top-gradient-color	<color>	#9E58BD
--instui-component-avatar-ash-background-color	<color>	LightDarklight-dark(#273540, #1C222B)
--instui-component-avatar-ash-text-color	<color>	LightDarklight-dark(#273540, #C7CACD)
--instui-component-avatar-background-color	<color>	LightDarklight-dark(#ffffff, #10141A)
--instui-component-avatar-blue-background-color	<color>	#2B7ABC
--instui-component-avatar-blue-text-color	<color>	LightDarklight-dark(#2871AF, #7FB4F1)
--instui-component-avatar-border-color	<color>	LightDarklight-dark(#8D959F, #6A7883)
--instui-component-avatar-border-width-md	<length>	0.125rem
--instui-component-avatar-border-width-sm	<length>	0.0625rem
--instui-component-avatar-font-family	[ <font-family-name> | <generic-font-family> ]#	Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-component-avatar-font-size-lg	<length>	1.25rem
--instui-component-avatar-font-size-md	<length>	1rem
--instui-component-avatar-font-size-sm	<length>	0.875rem
--instui-component-avatar-font-size-xl	<length>	1.75rem
--instui-component-avatar-font-size-xs	<length>	0.75rem
--instui-component-avatar-font-size2xl	<length>	2.5rem
--instui-component-avatar-font-size2xs	<length>	0.75rem
--instui-component-avatar-font-weight	<integer>	600
--instui-component-avatar-green-background-color	<color>	#03893D
--instui-component-avatar-green-text-color	<color>	LightDarklight-dark(#037D37, #61C378)
--instui-component-avatar-grey-background-color	<color>	LightDarklight-dark(#4A5B68, #576773)
--instui-component-avatar-grey-text-color	<color>	LightDarklight-dark(#4A5B68, #F2F4F5)
--instui-component-avatar-orange-background-color	<color>	#CF4A00
--instui-component-avatar-orange-text-color	<color>	LightDarklight-dark(#BB4200, #FF905A)
--instui-component-avatar-rectangle-radius	<length>	0.25rem
--instui-component-avatar-red-background-color	<color>	#E62429
--instui-component-avatar-red-text-color	<color>	LightDarklight-dark(#CF1F24, #FA917F)
--instui-component-avatar-size-lg	<length>	3.5rem
--instui-component-avatar-size-md	<length>	3rem
--instui-component-avatar-size-sm	<length>	2.5rem
--instui-component-avatar-size-xl	<length>	4rem
--instui-component-avatar-size-xs	<length>	2rem
--instui-component-avatar-size2xl	<length>	5rem
--instui-component-avatar-size2xs	<length>	1.5rem
--instui-component-avatar-text-on-color	<color>	#ffffff

관련 항목

• byline — 아바타를 선행 히어로 피겨로 호스팅할 수 있습니다.