WICKEDTeamWicked Design System / 컴포넌트
타일·카드 표면
관련 정보·행동을 한 묶음으로 표시을 위한 컴포넌트.
적용 범위: TeamWicked 자체 브랜드·웹사이트. 호스팅 제품의 외형은 포함하지 않습니다. 공통 동작 규칙을 재사용하며, 다른 체계의 사례는 비교 근거일 뿐 스타일 상속이 아닙니다.
TeamWicked 웹사이트 토큰으로 구성한 동작 예제예시 데이터 · API 미연결
목적과 사용
관련 정보·행동을 한 묶음으로 표시에 사용합니다. 모든 내용을 카드로 감싸거나 중첩 클릭 대상을 만들지 않습니다.
구성과 변형
제목, 내용, 선택적 메타·주 행동·보조 행동. 변형의 외형은 각 제품의 기존 토큰을 사용합니다. Carbon의 크기·색·모서리·아이콘을 가져오지 않습니다.
동작 규칙
- TILE-01 MUST: 읽기 전용·이동형·선택형·펼침형을 구분합니다.
- TILE-02 MUST: 카드 안 버튼·링크가 있으면 중첩 interactive 요소를 만들지 않습니다.
- TILE-03 SHOULD: 같은 계층 카드의 제목·간격·메타 순서를 맞춥니다.
- TILE-04 MUST: 카드를 클릭할 수 있다면 키보드로 같은 동작을 수행할 수 있습니다.
콘텐츠 예시
좋음: 서버 정보와 명시적인 상세 링크 / 피함: 클릭 div 안의 삭제 버튼 충돌.
우리 구현과 연결
TeamWicked 자체 웹사이트의 토큰과 CTA를 사용합니다. vPanel·Pterodactyl·Store의 구현은 WickedHost 체계에 속하며 이 체계의 컴포넌트를 정의하지 않습니다. 실행 예제의 원본 경로는 구현 코드 탭을 확인하세요.
상태와 검증
텍스트 길이·동일 높이 강제에 의한 누락·작은 화면·중첩 클릭을 확인합니다.
일반·hover·focus·실행 중·실패·성공·disabled·read-only 중 해당하는 상태를 기록합니다. 해당하지 않는 상태를 임의로 만들지 말고 이유를 남깁니다. 검증 체크리스트에 증거를 연결합니다.