カード
あらゆることに柔軟で構成できるコンポーネント
カードコンポーネントは、組み合わせて使用できるいくつかの要素で構成されています。
カード：メインコンテナカードヘッダー：シャドウ付きの横棒カードヘッダータイトル：左揃えの太字カードヘッダーアイコン：アイコンのプレースホルダーカード画像：レスポンシブな画像の全幅コンテナカードコンテンツ：他の要素の多目的コンテナ（任意）カードフッター：コントロールの横スクロールリストカードフッターアイテム：繰り返し可能なリストアイテムis-centered修飾子を追加することで、カードヘッダータイトルを中央揃えにすることができます。
例
ジョン スミス
@johnsmith
HTML
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img
src="https://bulma.dokyumento.jp/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.dokyumento.jp/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>カードヘッダーには、タイトルとブルマのアイコンがあります。
例
カードヘッダー
HTML
<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>カード画像は、ブルマの画像要素のコンテナです。
例
HTML
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img
src="https://bulma.dokyumento.jp/assets/images/placeholders/1280x960.png"
alt="Placeholder image"
/>
</figure>
</div>
</div>カードコンテンツは、パディングのおかげでテキストコンテンツに最適なメインパートです。
例
HTML
<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>カードフッターは、いくつかのカードフッターアイテムのリストとして機能します。
例
HTML
<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>例
コンポーネント
HTML
<div class="card">
<header class="card-header">
<p class="card-header-title">Component</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 class="card-content">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec
iaculis mauris.
<a href="#">@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>
<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>例
「コンピュータサイエンスの難しいことは2つあります：キャッシュの無効化、名前の付け、および1つずつのエラーです。」
ジェフ・アトウッド
HTML
<div class="card">
<div class="card-content">
<p class="title">
“There are two hard things in computer science: cache invalidation, naming
things, and off-by-one errors.”
</p>
<p class="subtitle">Jeff Atwood</p>
</div>
<footer class="card-footer">
<p class="card-footer-item">
<span>
View on
<a href="https://twitter.com/codinghorror/status/506010907021828096"
>Twitter</a
>
</span>
</p>
<p class="card-footer-item">
<span> Share on <a href="#">Facebook</a> </span>
</p>
</footer>
</div>|
Sass変数
|
CSS変数
|
値
|
|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|