- 헤더: 카드의 헤더 영역
- 컨텐츠: 카드의 컨텐츠 영역
- 푸터: 카드의 푸터 영역
각 영역에 대한 요소는 후술을 참고해주시기 바랍니다.
이미지 타입
오른쪽 요소에 스위치 또는 체크박스를 사용할 수 있으나 컨트롤을 사용자가 인식할 수 있도록 이미지의 명도를 조절하여 사용합니다.
아바타 타입
Title text
아바타를 활용할 수 있으며 텍스트는 선택 사항입니다. 오른쪽 요소에 스위치, 체크박스, 아이콘 버튼을 사용할 수 있습니다.
텍스트 타입
Title text
Lorem ipsum dolor sit amet consectetur.
Pharetra arcu consectetur morbi viverra odio egestas.
텍스트를 활용할 수 있으며 서브 텍스트는 선택사항입니다. 오른쪽 요소는 아바타 타입과 동일합니다.
텍스트 타입
구분선은 선택사항이며, 텍스트 타입 사용 시 내용이 너무 길어지지 않도록 합니다.
타이틀 타입
Lorem ipsum
Lorem ipsum dolor sit amet consectetur. Viverra luctus porttitor cras massa urna vestibulum velit vulputate. Morbi cursus sed vehicula tellus eget viverra dictumst. Amet dis duis habitant tortor. Eget accumsan felis at commodo donec egestas turpis bibendum egestas. Risus facilisis urna volutpat sit est mi tellus bibendum sit. Odio phasellus varius tellus nec. Tempus pharetra mus aliquet a cras eu netus semper parturient.
텍스트 타입과 내용에 대한 부분은 동일합니다.
사용자 타입
User Name
User Information
사용자를 표출할때 사용됩니다. 버튼 또는 간단한 액션과 함께 사용 가능합니다.
버튼 타입
카드에서 버튼이 필요할때 사용됩니다. 너무 많은 컨트롤 요소가 카드 안에서 사용되지 않게 주의합니다.
정보 타입
1234
24/12/25
카드에서 간단한 정보를 축약해서 보여줄때 사용됩니다. 버튼 또는 간단한 액션과 함께 사용 가능합니다.
Default
Hover
사람 관련 이미지 파일 - 50장
1234
24/12/25
top : -10px;
box-shadow : shadow-lg;
Active
사람 관련 이미지 파일 - 50장
1234
24/12/25
border : 1px solid primary-50
Default
Hover
신규 입사자 공지
Vega UI
contact@alphacode.ai
top : -10px;
box-shadow : shadow-lg;
Active
신규 입사자 공지
Vega UI
contact@alphacode.ai
border : 1px solid primary-50
Default
Hover
테스트 문서 배포
알파코드 솔루션 관련 테스트 문서 배포
Admin
upload : 2024/11/11 10:54:32
top : -10px;
box-shadow : shadow-lg;
Active
테스트 문서 배포
알파코드 솔루션 관련 테스트 문서 배포
Admin
upload : 2024/11/11 10:54:32
border : 1px solid primary-50
