카드

카드 구성 요소를 사용하면 이미지, 지도 또는 기타 미디어 콘텐츠와 텍스트를 통해 단일 개체에 대한 정보를 표시하여 공유, 좋아요, 북마크 등 관련 빠른 작업을 실행할 수 있습니다. 일반적으로 개요로 작동합니다. 자세한 정보를 위한 진입점입니다. 다양한 콘텐츠와 레이아웃을 가진 카드를 결합하여 대시보드를 만들 수 있습니다. 카드는 Ignite UI for Angular와 시각적으로 동일합니다.

Card Demo

Areas

카드에는 그림이나 지도 미디어를 표시하는 상단의 image, 썸네일 아바타, 제목, 부제목의 조합을 포함하는 header, 텍스트 단락을 포함하는 content, 카드를 자세히 설명하는 이미지 배열, 다음과 같은 네 가지 고유한 actions이 있습니다. 카드와 관련된 빠른 작업이 포함된 도구 모음입니다.


영상
머리글
콘텐츠
행위

Image

이미지 영역은 인구가 거주하는 세계 영역을 위한 6개 대륙 지도, 하나의 세계 지도, 하나의 내비게이션 지도 및 이미지 등 9개의 변형 컬렉션을 지원합니다.

카드 헤더는 아바타 썸네일, 제목, 자막 요소를 포함한 다양한 레이아웃을 지원합니다. Figma에서 자동 레이아웃은 측면 패널에서 header 요소에 대해 선택한 속성을 기반으로 카드 레이아웃을 조정합니다. Sketch에서 숨기려는 요소를 ~No Symbol로 설정하면 스마트 레이아웃 규칙이 그에 따라 레이아웃을 조정합니다. Adobe XD에서는 스택을 사용하면 불필요한 레이어를 삭제할 때 동일한 결과를 얻을 수 있습니다.

Content

콘텐츠는 짧은 설명 텍스트를 위한 단락과 연락처와 같은 바로가기 배열을 지원합니다.

Actions

~ 안에 Figma, 카드 작업은 네 가지 레이아웃으로 제공됩니다. 버튼+아이콘, 그 반대 아이콘+버튼 두 개의 플랫 버튼과 세 개의 아이콘이 포함되어 있으며 버튼만 그리고 아이콘만. 모든 레이아웃에는 요소의 간격이 균등하고 반응형 동작에 대한 제약 조건이 적용되도록 하는 양쪽 맞춤 변형이 있습니다. 나머지 4개는 자동 레이아웃 조정을 위해 자동 레이아웃을 사용합니다. 추가적으로, Content Position 특별히 버튼과 아이콘의 위치를 정의할 수 있는 속성입니다. 버튼만 그리고 아이콘만 변형.

	정당한 조치 끄기	정당한 조치 켜기
버튼 + 아이콘
아이콘 + 버튼
버튼만
아이콘만

Sketch에서 작업은 6개의 고유한 레이아웃으로 제공됩니다. 2개의 평면 버튼과 3개의 아이콘이 있는 버튼 + 아이콘 작업과 반대 방향으로 배치된 반대 아이콘 + 버튼 작업, 양쪽 정렬 변형, 양쪽 정렬 버튼 작업 및 양쪽 정렬만 있는 변형 아이콘 작업. 6개 각각은 스마트 레이아웃을 사용한 재정의로 정의되므로 해당 요소를 ~No Symbol로 설정하여 요소를 제거하고 나머지는 원하는 레이아웃에 자동으로 조정되도록 할 수 있습니다.
Adobe XD 에서는 동일한 다양성을 사용할 수 있으며 스택 사용 덕분에 자동으로 조정되는 레이아웃으로 불필요한 레이어를 삭제할 수도 있습니다.

Card Layout

Figma의 자동 레이아웃, Sketch의 스마트 레이아웃, Adobe XD의 Stack을 사용하면 카드는 초기에 동일한 구성 요소를 기반으로 다양한 개별 카드를 지원할 수 있도록 특정 영역이나 요소를 제외하여 다양한 레이아웃을 생성할 수 있습니다.

스타일링

카드에는 텍스트 스타일, 아이콘 유형, 색상은 물론 버튼 색상과 카드 배경색 선택 가능성 등 이미지, 헤더, 콘텐츠 및 작업 영역에 사용할 수 있는 다양한 옵션을 통해 스타일링 유연성이 제공됩니다.

Usage

카드는 일반적으로 개요 UI 및 자세한 정보에 대한 진입점으로 작동합니다. 너무 많은 정보로 인해 페이지가 막히지 않도록 하고 대시보드를 만들 때 카드 사이의 수평 및 수직 간격이 동일한 레이아웃 그리드를 형성하기 위해 카드의 크기를 조정하고 일관되게 배열하세요.

하다	하지 않다

카드