카드
카드 (Card)
카드 컴포넌트는 여러 요소들로 구성되어 있으며, 원하는 대로 조합해 사용할 수 있어요:
card: 메인 컨테이너card-header: 그림자가 있는 가로 바card-header-title: 왼쪽 정렬된 굵은 텍스트card-header-icon: 아이콘을 위한 자리
card-image: 반응형 이미지를 위한 전체 너비 컨테이너card-content: 어떤 요소든 담을 수 있는 다목적 컨테이너card-footer: 컨트롤의 가로 목록card-footer-item: 반복 가능한 목록 항목
is-centered 수식어를 붙이면 card-header-title을 가운데 정렬할 수 있어요.
출처: 문서
본문
기본 카드
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img
src="https://bulma.io/assets/images/placeholders/1280x960.png"
alt="Placeholder image"
/>
</figure>
</div>
<div class="card-content">
<div class="media">
<div class="media-left">
<figure class="image is-48x48">
<img
src="https://bulma.io/assets/images/placeholders/96x96.png"
alt="Placeholder image"
/>
</figure>
</div>
<div class="media-content">
<p class="title is-4">John Smith</p>
<p class="subtitle is-6">@johnsmith</p>
</div>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec
iaculis mauris. <a>@bulmaio</a>. <a href="#">#css</a>
<a href="#">#responsive</a>
<br />
<time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
</div>
</div>
</div>
카드 부속 요소 (Card parts)
card-header는 제목과 Bulma icon을 가질 수 있어요:
<div class="card">
<header class="card-header">
<p class="card-header-title">Card header</p>
<button class="card-header-icon" aria-label="more options">
<span class="icon">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</header>
</div>
card-image는 Bulma image 요소를 위한 컨테이너입니다:
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img
src="https://bulma.io/assets/images/placeholders/1280x960.png"
alt="Placeholder image"
/>
</figure>
</div>
</div>
card-content는 패딩 덕분에 텍스트 콘텐츠에 특히 어울리는 메인 부분이에요:
<div class="card">
<div class="card-content">
<div class="content">
Lorem ipsum leo risus, porta ac consectetur ac, vestibulum at eros. Donec
id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus
et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis
consectetur purus sit amet fermentum.
</div>
</div>
</div>
card-footer는 여러 card-footer-item 요소의 목록처럼 동작합니다:
<div class="card">
<footer class="card-footer">
<a href="#" class="card-footer-item">Save</a>
<a href="#" class="card-footer-item">Edit</a>
<a href="#" class="card-footer-item">Delete</a>
</footer>
</div>