メニュー

カードは、異なる種類のオブジェクトで構成されたコンテンツを表示する便利な手段です。また、可変長のキャプション付きの写真のように、サイズやサポートされるアクションが大きく異なる可能性のある類似のオブジェクトを表示するのにも適しています。

基本カード

カードタイトル

私は非常にシンプルなカードです。私は少量の情報を格納するのに優れています。効果的に使用するために必要なマークアップが少なくて済むので便利です。

これはリンクです これはリンクです


  <div class="row">
    <div class="col s12 m6">
      <div class="card blue-grey darken-1">
        <div class="card-content white-text">
          <span class="card-title">Card Title</span>
          <p>I am a very simple card. I am good at containing small bits of information.
          I am convenient because I require little markup to use effectively.</p>
        </div>
        <div class="card-action">
          <a href="#">This is a link</a>
          <a href="#">This is a link</a>
        </div>
      </div>
    </div>
  </div>

画像カード

カードタイトル

私は非常にシンプルなカードです。私は少量の情報を格納するのに優れています。効果的に使用するために必要なマークアップが少なくて済むので便利です。

これはリンクです




これは、画像サムネイル付きの標準カードです。



  <div class="row">
    <div class="col s12 m7">
      <div class="card">
        <div class="card-image">
          <img src="images/sample-1.jpg">
          <span class="card-title">Card Title</span>
        </div>
        <div class="card-content">
          <p>I am a very simple card. I am good at containing small bits of information.
          I am convenient because I require little markup to use effectively.</p>
        </div>
        <div class="card-action">
          <a href="#">This is a link</a>
        </div>
      </div>
    </div>
  </div>

カード内のFAB

カードタイトル add

私は非常にシンプルなカードです。私は少量の情報を格納するのに優れています。効果的に使用するために必要なマークアップが少なくて済むので便利です。





これは、フローティングアクションボタン付きの画像カードです。

add
カードタイトル

私は非常にシンプルなカードです。私は少量の情報を格納するのに優れています。効果的に使用するために必要なマークアップが少なくて済むので便利です。

これは、大きなフローティングアクションボタン付きの画像カードです。



  <div class="row">
    <div class="col s12 m6">
      <div class="card">
        <div class="card-image">
          <img src="images/sample-1.jpg">
          <span class="card-title">Card Title</span>
          <a class="btn-floating halfway-fab waves-effect waves-light red"><i class="material-icons">add</i></a>
        </div>
        <div class="card-content">
          <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
        </div>
      </div>
    </div>
  </div>

横型カード

私は非常にシンプルなカードです。私は少量の情報を格納するのに優れています。

これはリンクです




これは、横長の画像が付いた標準カードです。



  <div class="col s12 m7">
    <h2 class="header">Horizontal Card</h2>
    <div class="card horizontal">
      <div class="card-image">
        <img src="https://lorempixel.com/100/190/nature/6">
      </div>
      <div class="card-stacked">
        <div class="card-content">
          <p>I am a very simple card. I am good at containing small bits of information.</p>
        </div>
        <div class="card-action">
          <a href="#">This is a link</a>
        </div>
      </div>
    </div>
  </div>

カード公開

カードタイトルmore_vert

これはリンクです

カードタイトルclose

クリックした後にのみ表示される、この製品に関する詳細情報です。





クリックすると詳細情報が表示されるカードを追加できます。 span.card-title を含む card-reveal div を追加するだけで、これが機能します。カード内の要素に activator クラスを追加すると、カードの公開が可能になります。



  <div class="card">
    <div class="card-image waves-effect waves-block waves-light">
      <img class="activator" src="images/office.jpg">
    </div>
    <div class="card-content">
      <span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span>
      <p><a href="#">This is a link</a></p>
    </div>
    <div class="card-reveal">
      <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
      <p>Here is some more information about this product that is only revealed once clicked on.</p>
    </div>
  </div>
カードアクションオプション
カードタイトルmore_vert

これはリンクです

カードタイトルclose

クリックした後にのみ表示される、この製品に関する詳細情報です。

これはリンクです これはリンクです


デフォルトの状態では、card-reveal が card-action の上に表示されます。

カードタイトルmore_vert

これはリンクです

これはリンクです これはリンクです
カードタイトルclose

クリックした後にのみ表示される、この製品に関する詳細情報です。

カード全体に sticky-action クラスを追加することで、card-action を常に表示させることができます。



  <div class="card sticky-action">
    ...

    <div class="card-action">...</div>

    <div class="card-reveal">...</div>
  </div>

カード内のタブ

ヘッダーコンテンツとタブコンテンツの間に cards-tabs 区切りdivを追加することで、カードにタブを追加できます。


  <div class="card">
    <div class="card-content">
      <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
    </div>
    <div class="card-tabs">
      <ul class="tabs tabs-fixed-width">
        <li class="tab"><a href="#test4">Test 1</a></li>
        <li class="tab"><a class="active" href="#test5">Test 2</a></li>
        <li class="tab"><a href="#test6">Test 3</a></li>
      </ul>
    </div>
    <div class="card-content grey lighten-4">
      <div id="test4">Test 1</div>
      <div id="test5">Test 2</div>
      <div id="test6">Test 3</div>
    </div>
  </div>
白

私は非常にシンプルなカードです。私は少量の情報を格納するのに優れています。効果的に使用するために必要なマークアップが少なくて済むので便利です。

テスト1
テスト2
テスト3


タブ付きの白い背景の基本カードです。

色付き

私は非常にシンプルなカードです。私は少量の情報を格納するのに優れています。効果的に使用するために必要なマークアップが少なくて済むので便利です。

テスト1
テスト2
テスト3


タブ付きの色付きまたは暗い背景のカードです。

カードサイズ

均一なサイズのカードが必要な場合は、既製のサイズクラスを使用できます。カードクラスに加えて、サイズクラスを追加するだけです。


  <div class="card small">
    <!-- Card Content -->
  </div>
小
カードタイトル

私は非常にシンプルなカードです。私は少量の情報を格納するのに優れています。効果的に使用するために必要なマークアップが少なくて済むので便利です。

これはリンクです これはリンクです


スモールカードは、カードの高さを300pxに制限します。

中
カードタイトル

私は非常にシンプルなカードです。私は少量の情報を格納するのに優れています。効果的に使用するために必要なマークアップが少なくて済むので便利です。

これはリンクです これはリンクです


ミディアムカードは、カードの高さを400pxに制限します。

大
カードタイトル

私は非常にシンプルなカードです。私は少量の情報を格納するのに優れています。効果的に使用するために必要なマークアップが少なくて済むので便利です。

これはリンクです これはリンクです


ラージカードは、カードの高さを500pxに制限します。

カードパネル

私は非常にシンプルなカードです。少量の情報を格納するのに優れています。効果的に使用するために必要なマークアップが少なくて済むので便利です。他のフレームワークでパネルと呼ばれるものに似ています。




マークアップの少ない、よりシンプルなカードの場合は、パディングとシャドウエフェクトのみを持つカードパネルを使用してみてください。



  <div class="row">
    <div class="col s12 m5">
      <div class="card-panel teal">
        <span class="white-text">I am a very simple card. I am good at containing small bits of information.
        I am convenient because I require little markup to use effectively. I am similar to what is called a panel in other frameworks.
        </span>
      </div>
    </div>
  </div>