カード | Document | UNITS - Simple and beautiful CSS component set.

1. 基本

テキストとボタンで構成されたシンプルなカードを作成することができます。

Simple card

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime commodi ipsum ab quam culpa. Repudiandae eius maiores necessitatibus!

Button

<div class="uc-card">
  <div class="uc-card-title">Simple card</div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime commodi ipsum ab quam culpa. Repudiandae eius maiores necessitatibus!</p>
  <div class="uc-btn _primary"><a href="#">Button</a></div>
</div>

2. ホバーカード

マウスカーソルを動かすと浮いて見えるカードです。
これは、要素を強調したいときに便利です。

Hover card

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime commodi ipsum ab quam culpa. Repudiandae eius maiores necessitatibus!

<div class="uc-card _hover">
  <div class="uc-card-title">Simple card</div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime commodi ipsum ab quam culpa. Repudiandae eius maiores necessitatibus!</p>
</div>

3. フロートカード

常に浮いて見えるようにできます。これは、要素を強調したいときに便利です。

Float card

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime commodi ipsum ab quam culpa. Repudiandae eius maiores necessitatibus!

Button

<div class="uc-card _float">
  <div class="uc-card-title">Simple card</div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime commodi ipsum ab quam culpa. Repudiandae eius maiores necessitatibus!</p>
  <div class="uc-btn _primary"><a href="#">Button</a></div>
</div>

4. バナーカード

要素全体をクリック可能なカードです。

Banner card

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime commodi ipsum ab quam culpa. Repudiandae eius maiores necessitatibus!

Button

<div class="uc-card _banner">
  <a href="#">
  <div class="uc-card-title">Banner card</div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime commodi ipsum ab quam culpa. Repudiandae eius maiores necessitatibus!</p>
  <div class="uc-btn _primary"><span>Button</span></div>
  </a>
</div>

5. カバー画像カード

カードに画像を埋め込むことができます。画像は自動的にトリミングされ、中央に配置されます。

Cover image card

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime commodi ipsum ab quam culpa. Repudiandae eius maiores necessitatibus!

Button

<div class="uc-card">
  <div class="uc-card-image" style="background-image:url(https://source.unsplash.com/random)"></div>
  <div class="uc-card-title">Cover image card</div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime commodi ipsum ab quam culpa. Repudiandae eius maiores necessitatibus!</p>
  <div class="uc-btn _primary"><a href="#">Button</a></div>
</div>

6. サムネイルカード

カードに埋め込まれた画像はサムネイルサイズにリサイズされ、表示させることができます。

Thumb image card

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime commodi ipsum ab quam culpa. Repudiandae eius maiores necessitatibus!

Button

<div class="uc-card _thumb">
  <div class="uc-card-image" style="background-image:url(https://source.unsplash.com/random)"></div>
  <div class="uc-card-wrap">
  <div class="uc-card-title">Thumb image card</div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime commodi ipsum ab quam culpa. Repudiandae eius maiores necessitatibus!</p>
  <div class="uc-btn _primary"><a href="#">Button</a></div>
  </div>
</div>

7. レイアウトカード

カードの内部に構造があり、より複雑なスタイリングが可能です。
以下のサンプルのようなプロフィールカードを簡単に作成できます。

Layout card

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime commodi ipsum ab quam culpa. Repudiandae eius maiores necessitatibus!

Button

<div class="uc-card">
  <div class="uc-card-image" style="background-image:url(https://source.unsplash.com/random)"></div>
  <div class="uc-card-header">
    <div class="uc-card-icon" style="background-image:url(https://source.unsplash.com/random)"></div>
    <div class="uc-card-title">Layout card</div>
  </div>
  <div class="uc-card-body">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime commodi ipsum ab quam culpa. Repudiandae eius maiores necessitatibus!</p>
  </div>
  <div class="uc-card-footer">
    <div class="uc-btn _primary"><a href="#">Button</a></div>
  </div>
</div>