Vega Logo
v1.0.0
Cards
카드(cards)는 단일 주제에 대한 콘텐츠와 작업에 관한 요소입니다. 카드 자체가 버튼의 기능이 될 수 있고 카드 내에서 작업이 이루어질 수 있습니다.
Style
background-color
Title text
Lorem ipsum dolor sit amet consectetur.
Lorem ipsum dolor sit amet consectetur. Sed arcu praesent at ac sed. Imperdiet lectus nunc elit sit interdum. Adipiscing posuere ipsum faucibus vel sed molestie lectus nulla. Dictum felis sit ac ipsum maecenas auctor proin donec nisl. Gravida ullamcorper sem.
line
Title text
Lorem ipsum dolor sit amet consectetur.
Lorem ipsum dolor sit amet consectetur. Sed arcu praesent at ac sed. Imperdiet lectus nunc elit sit interdum. Adipiscing posuere ipsum faucibus vel sed molestie lectus nulla. Dictum felis sit ac ipsum maecenas auctor proin donec nisl. Gravida ullamcorper sem.
shadow
Title text
Lorem ipsum dolor sit amet consectetur.
Lorem ipsum dolor sit amet consectetur. Sed arcu praesent at ac sed. Imperdiet lectus nunc elit sit interdum. Adipiscing posuere ipsum faucibus vel sed molestie lectus nulla. Dictum felis sit ac ipsum maecenas auctor proin donec nisl. Gravida ullamcorper sem.
Anatomy
Title text
Lorem ipsum dolor sit amet consectetur.
Lorem ipsum dolor sit amet consectetur. Sed arcu praesent at ac sed. Imperdiet lectus nunc elit sit interdum. Adipiscing posuere ipsum faucibus vel sed molestie lectus nulla. Dictum felis sit ac ipsum maecenas auctor proin donec nisl. Gravida ullamcorper sem.
01
03
02
  1. 헤더: 카드의 헤더 영역
  2. 컨텐츠: 카드의 컨텐츠 영역
  3. 푸터: 카드의 푸터 영역

각 영역에 대한 요소는 후술을 참고해주시기 바랍니다.
Header
카드의 헤더 영역 요소에 대한 예시입니다. 헤더에서 두가지 이상의 컨트롤 요소를 사용하지 않습니다. 해당 내용은 참고용이며 내용은 기존 가이드와 크게 벗어나지 않도록 유의하여 커스텀마이징해 사용합니다.

이미지 타입

오른쪽 요소에 스위치 또는 체크박스를 사용할 수 있으나 컨트롤을 사용자가 인식할 수 있도록 이미지의 명도를 조절하여 사용합니다.

아바타 타입

Title text

아바타를 활용할 수 있으며 텍스트는 선택 사항입니다. 오른쪽 요소에 스위치, 체크박스, 아이콘 버튼을 사용할 수 있습니다.

텍스트 타입

Title text

Lorem ipsum dolor sit amet consectetur.
Pharetra arcu consectetur morbi viverra odio egestas.

텍스트를 활용할 수 있으며 서브 텍스트는 선택사항입니다. 오른쪽 요소는 아바타 타입과 동일합니다.

Contents
카드의 컨텐츠 영역 요소에 대한 예시입니다. 컨텐츠에서 텍스트 같은 내용 전달 외에 input이나 복잡한 내용은 넣지 않도록하며 내용은 단일 주제에 관련된 내용이 적합합니다. 해당 내용은 참고용이며 내용은 기존 가이드와 크게 벗어나지 않도록 유의하여 커스텀마이징해 사용합니다.

텍스트 타입

Lorem ipsum dolor sit amet consectetur. Viverra luctus porttitor cras massa urna vestibulum velit vulputate.
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.

구분선은 선택사항이며, 텍스트 타입 사용 시 내용이 너무 길어지지 않도록 합니다.

타이틀 타입

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.

텍스트 타입과 내용에 대한 부분은 동일합니다.

Footer
카드의 푸터 영역 요소에 대한 예시입니다. 해당 내용은 참고용이며 내용은 기존 가이드와 크게 벗어나지 않도록 유의하여 커스텀마이징해 사용합니다.

사용자 타입

MJ

User Name

User Information

사용자를 표출할때 사용됩니다. 버튼 또는 간단한 액션과 함께 사용 가능합니다.

버튼 타입

카드에서 버튼이 필요할때 사용됩니다. 너무 많은 컨트롤 요소가 카드 안에서 사용되지 않게 주의합니다.

정보 타입

1234

24/12/25

카드에서 간단한 정보를 축약해서 보여줄때 사용됩니다. 버튼 또는 간단한 액션과 함께 사용 가능합니다.

State
카드의 헤더 영역 요소에 대한 예시입니다. 헤더에서 두가지 이상의 컨트롤 요소를 사용하지 않습니다. 해당 내용은 참고용이며 내용은 기존 가이드와 크게 벗어나지 않도록 유의하여 커스텀마이징해 사용합니다.

Default

사람 관련 이미지 파일 - 50장

1234

24/12/25

Hover

사람 관련 이미지 파일 - 50장

1234

24/12/25

top : -10px;
box-shadow : shadow-lg;

Active

사람 관련 이미지 파일 - 50장

1234

24/12/25

border : 1px solid primary-50

Default

MJ

신규 입사자 공지

VU

Vega UI

contact@alphacode.ai

Hover

MJ

신규 입사자 공지

VU

Vega UI

contact@alphacode.ai

top : -10px;
box-shadow : shadow-lg;

Active

MJ

신규 입사자 공지

VU

Vega UI

contact@alphacode.ai

border : 1px solid primary-50

Default

테스트 문서 배포

알파코드 솔루션 관련 테스트 문서 배포

AD

Admin

upload : 2024/11/11 10:54:32

Hover

테스트 문서 배포

알파코드 솔루션 관련 테스트 문서 배포

AD

Admin

upload : 2024/11/11 10:54:32

top : -10px;
box-shadow : shadow-lg;

Active

테스트 문서 배포

알파코드 솔루션 관련 테스트 문서 배포

AD

Admin

upload : 2024/11/11 10:54:32

border : 1px solid primary-50

사용 가이드
사용 예시
card-1
Do
card-1
Do
card-1
Do
card-1
Do