카드

Starlight의 스타일과 일치하는 상자에 콘텐츠를 표시하려면 <Card> 컴포넌트를 사용합니다.

미리보기

달

이오, 유로파, 가니메데

가져오기

import { Card } from '@astrojs/starlight/components';

사용

<Card> 컴포넌트를 사용하여 카드를 표시하고 카드의 title을 입력합니다.

MDX

import { Card } from '@astrojs/starlight/components';

<Card title="확인하세요">강조하고 싶은 흥미로운 콘텐츠.</Card>

Markdoc

{% card title="확인하세요" %}
강조하고 싶은 흥미로운 콘텐츠.
{% /card %}

미리보기

확인하세요

강조하고 싶은 흥미로운 콘텐츠.

카드에 아이콘 추가

Starlight 내장 아이콘 중 하나의 이름으로 설정된 icon 속성을 사용하여 카드에 아이콘을 포함하세요.

MDX

import { Card } from '@astrojs/starlight/components';

<Card title="별" icon="star">
  시리우스, 베가, 베텔게우스
</Card>

Markdoc

{% card title="별" icon="star" %}
시리우스, 베가, 베텔게우스
{% /card %}

미리보기

별

시리우스, 베가, 베텔게우스

카드 그룹화

<CardGrid> 컴포넌트를 사용해 카드를 그룹화하여 공간이 충분할 때 여러 카드를 나란히 표시합니다. 예시는 “카드 그룹화” 가이드를 참조하세요.

<Card> 속성

구현: Card.astro

<Card> 컴포넌트는 다음과 같은 속성을 허용합니다:

title

필수
타입: string

표시할 카드의 제목입니다.

icon

타입: string

카드에는 Starlight 내장 아이콘 중 하나의 이름으로 설정된 icon 속성을 포함할 수 있습니다.