メインコンテンツにスキップ

ドキュメント

カード

異なるスタイルのレイアウトボックスを作成します。

使用方法

カードコンポーネントは、カード自体、カード本体、およびオプションのカードタイトルで構成されます。 通常、カードはグリッドコンポーネントのグリッドカラムに配置されます。

クラス 説明
.uk-card カードコンポーネントを定義するには、このクラスを<div>要素に追加します。
.uk-card-body カードとそのコンテンツの間にパディングを作成するには、このクラスをカードに追加します。
.uk-card-title カードタイトルを定義するには、このクラスを見出しに追加します。 
<div class="uk-card uk-card-body">
    <h3 class="uk-card-title"></h3>
</div>

デフォルトでは、カードは空白です。そのため、スタイルを設定するための修飾子クラスを追加することが重要です。 この例では、.uk-card-defaultクラスを使用しています。

  • デフォルト

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • <div class="uk-card uk-card-default uk-card-body uk-width-1-2@m">
    <h3 class="uk-card-title">Default</h3>
    <p>Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

スタイル修飾子

UIkitには、カードに特定のスタイルを追加するために使用できる多数の修飾子が含まれています。

クラス 説明
.uk-card-default 視覚的にスタイル設定されたボックスを作成するには、このクラスを追加します。
.uk-card-primary カードを変更し、プライマリカラーで強調するには、このクラスを追加します。
.uk-card-secondary カードを変更してセカンダリ背景色を付けるには、このクラスを追加します。 
<div class="uk-card uk-card-default"></div>

<div class="uk-card uk-card-primary"></div>

<div class="uk-card uk-card-secondary"></div>

  • デフォルト

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    プライマリ

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    セカンダリ

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

  • <div class="uk-child-width-1-3@m uk-grid-small uk-grid-match" uk-grid>
    <div>
        <div class="uk-card uk-card-default uk-card-body">
            <h3 class="uk-card-title">Default</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-primary uk-card-body">
            <h3 class="uk-card-title">Primary</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-secondary uk-card-body">
            <h3 class="uk-card-title">Secondary</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
    </div>
</div>

ホバー修飾子

カードにホバー効果を作成するには、.uk-card-hoverクラスを追加します。 これは、アンカーを操作する場合に便利で、他のカード修飾子と組み合わせることができます。

<div class="uk-card uk-card-hover"></div>

  • ホバー

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    デフォルト

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    プライマリ

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    セカンダリ

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

  • <div class="uk-child-width-1-2@s uk-grid-match" uk-grid>
    <div>
        <div class="uk-card uk-card-hover uk-card-body">
            <h3 class="uk-card-title">Hover</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-hover uk-card-body">
            <h3 class="uk-card-title">Default</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-primary uk-card-hover uk-card-body uk-light">
            <h3 class="uk-card-title">Primary</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-secondary uk-card-hover uk-card-body uk-light">
            <h3 class="uk-card-title">Secondary</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
    </div>
</div>

サイズ修飾子

パディングを減らしたり増やしたりするさまざまなサイズ修飾子をカードに適用できます。

クラス 説明
.uk-card-small 小さいパディングを適用するには、このクラスを追加します。
.uk-card-large 大きいパディングを適用するには、このクラスを追加します。 
<div class="uk-card uk-card-small uk-card-default"></div>

<div class="uk-card uk-card-large uk-card-default"></div>

  • 小

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    大

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • <div class="uk-child-width-1-2@s" uk-grid>
    <div>
        <div class="uk-card uk-card-default uk-card-small uk-card-body">
            <h3 class="uk-card-title">Small</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-large uk-card-body">
            <h3 class="uk-card-title">Large</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </div>
</div>

カードをデフォルトの本文の前後にヘッダーとフッターに分割することもできます。 カード内の<div>要素に.uk-card-headerまたは.uk-card-footerクラスを追加するだけです。

<div class="uk-card">
    <div class="uk-card-header">
        <h3 class="uk-card-title"></h3>
    </div>
    <div class="uk-card-body"></div>
    <div class="uk-card-footer"></div>
</div>
  • Avatar

    タイトル

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

    続きを読む 
  • <div class="uk-card uk-card-default uk-width-1-2@m">
    <div class="uk-card-header">
        <div class="uk-grid-small uk-flex-middle" uk-grid>
            <div class="uk-width-auto">
                <img class="uk-border-circle" width="40" height="40" src="images/avatar.jpg" alt="Avatar">
            </div>
            <div class="uk-width-expand">
                <h3 class="uk-card-title uk-margin-remove-bottom">Title</h3>
                <p class="uk-text-meta uk-margin-remove-top"><time datetime="2016-04-01T19:00">April 01, 2016</time></p>
            </div>
        </div>
    </div>
    <div class="uk-card-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
    </div>
    <div class="uk-card-footer">
        <a href="#" class="uk-button uk-button-text">Read more</a>
    </div>
</div>

メディア

間隔なしでカード内に画像を表示するには、<img>要素の周囲の<div>に次のいずれかのクラスを追加します。 ソース順序を適宜変更する必要があることに注意してください。

クラス 説明
.uk-card-media-top このクラスは、メディア要素が上部に配置されていることを示します。
.uk-card-media-bottom このクラスは、メディア要素が下部に配置されていることを示します。
.uk-card-media-left このクラスは、メディア要素が左側に配置されていることを示します。
.uk-card-media-right このクラスは、メディア要素が右側に配置されていることを示します。 
<div class="uk-card uk-card-default">
    <div class="uk-card-media-top">
        <img src="" width="" height="" alt="">
    </div>
    <div class="uk-card-body"></div>
</div>

  • メディア上部

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

    メディア下部

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

  • <div class="uk-child-width-1-2@m" uk-grid>
    <div>
        <div class="uk-card uk-card-default">
            <div class="uk-card-media-top">
                <img src="images/light.jpg" width="1800" height="1200" alt="">
            </div>
            <div class="uk-card-body">
                <h3 class="uk-card-title">Media Top</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
            </div>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-default">
            <div class="uk-card-body">
                <h3 class="uk-card-title">Media Bottom</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
            </div>
            <div class="uk-card-media-bottom">
                <img src="images/light.jpg" width="1800" height="1200" alt="">
            </div>
        </div>
    </div>
</div>

水平方向の配置

.uk-card-media-leftまたは.uk-card-media-rightクラスは、必要に応じてborder-radiusなどをリセットするために使用されます。 それらは実際のレイアウトを作成しません。

そのためには、たとえば、カバーコンポーネントから.uk-cover-containerクラスを追加できます。 画像要素にuk-cover属性を追加し、グリッドおよび幅コンポーネントを使用して配置を実現します。 画像の幅と高さを持つ<canvas>要素を作成して、グリッドが小さいビューポートでスタックした場合に寸法を保持します。 これは、並べてレイアウトを作成する1つの方法にすぎません。

<div class="uk-card uk-card-default uk-child-width-1-2" uk-grid>
    <div class="uk-card-media-left uk-cover-container">
        <img src="" alt="" uk-cover>
        <canvas width="" height=""></canvas>
    </div>
    <div>
        <div class="uk-card-body"></div>
    </div>
</div>

  • メディア左

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

    メディア右

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

  • <div class="uk-card uk-card-default uk-grid-collapse uk-child-width-1-2@s uk-margin" uk-grid>
    <div class="uk-card-media-left uk-cover-container">
        <img src="images/light.jpg" alt="" uk-cover>
        <canvas width="600" height="400"></canvas>
    </div>
    <div>
        <div class="uk-card-body">
            <h3 class="uk-card-title">Media Left</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
        </div>
    </div>
</div>

<div class="uk-card uk-card-default uk-grid-collapse uk-child-width-1-2@s uk-margin" uk-grid>
    <div class="uk-flex-last@s uk-card-media-right uk-cover-container">
        <img src="images/light.jpg" alt="" uk-cover>
        <canvas width="600" height="400"></canvas>
    </div>
    <div>
        <div class="uk-card-body">
            <h3 class="uk-card-title">Media Right</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
        </div>
    </div>
</div>

バッジ

カード内にバッジを配置するには、コンテナ要素に`uk-card-badge`クラスを追加します。バッジのスタイルを設定するには、他のコンポーネント、たとえばラベルを使用できます。

<div class="uk-card uk-card-body">
    <div class="uk-card-badge uk-label"></div>
</div>
  • バッジ

    タイトル

    Lorem ipsum color sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • <div class="uk-card uk-card-default uk-card-body uk-width-1-2@m">
    <div class="uk-card-badge uk-label">Badge</div>
    <h3 class="uk-card-title">Title</h3>
    <p>Lorem ipsum color sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>