설명 포함

분류: 카드 헤더

card-title과 card-subtitle을 하나의 div로 묶어, 제목 아래 한 줄짜리 설명을 함께 보여주는 카드 헤더 예제입니다. 액션 버튼 없이 제목/설명만 필요한 카드(단순 안내 카드, 정보 요약 카드 등)에 적합합니다.

소스

<div class="card overflow-auto">
    <div class="card-header">
        <div>
            <h3 class="card-title">
                설명 포함
            </h3>
            <p class="card-subtitle">
                카드 제목 아래에 간단한 설명을 추가할 수 있습니다.
            </p>
        </div>
    </div>
</div>

사용된 주요 클래스

클래스	역할
card, card-header	카드 컨테이너와 헤더 영역
overflow-auto	카드 내용이 넘칠 때 스크롤을 허용
card-title	카드 제목 텍스트 스타일
card-subtitle	제목 아래에 붙는 보조 설명 텍스트 스타일

실전 예제 페이지

HandStack 웹 호스트(wwwroot 모듈)를 기동한 뒤 /sample/ui-library/카드-헤더-설명-포함.html 경로에서 렌더링 결과를 확인할 수 있습니다.

미리보기새 창에서 열기 ↗

참고 자료

• Cards