Life, connected.Life
New connections in everyday life일상에 새로운 연결
Explore where your interests meet.관심사가 만나는 순간을 탐색하세요.
Components
Card
Groups information about one subject, with a clear title and a single primary action.하나의 대상과 관련된 정보를 묶습니다. 명확한 제목과 한 가지 주요 행동을 담습니다.
Content card
Live previewDYNGLE UI
Life, connected.Structure구조
| Area영역 | Rule규칙 |
|---|---|
| Media미디어 | An image related to the content, or a brand expression정보와 관련된 이미지 또는 브랜드 표현 |
| Title제목 | Describes the card's subject specifically카드가 나타내는 대상을 구체적으로 설명 |
| Description설명 | Short information that supports the title제목을 보충하는 짧은 정보 |
| Action행동 | View the information or move to the next step정보를 확인하거나 다음 단계로 이동 |
Usage사용 가이드
Consistent surfaces일관된 표면
Give cards in a list the same surface, radius, and shadow, and let the content create the difference.목록의 카드는 같은 표면, 모서리, 그림자를 쓰고, 차이는 콘텐츠가 만들게 합니다.
Don't give each card a different shadow, gradient, or background color for decoration.장식을 위해 카드마다 다른 그림자, 그라데이션, 배경색을 쓰지 않습니다.
One clear action하나의 분명한 행동
If the whole card is a link, keep a single action. On hover, a 3px lift and shadow show it's selectable.카드 전체가 링크라면 행동은 하나만 둡니다. hover 시 3px 상승과 그림자로 선택 가능함을 알립니다.
Don't nest several buttons inside a clickable card; the click targets compete and confuse.클릭 가능한 카드 안에 버튼을 여러 개 중첩하지 않습니다. 클릭 대상이 겹쳐 혼란스럽습니다.