カード

リストビューと同様に、カードは情報を格納して整理するための優れた方法です。カードには、写真、テキスト、リンクなど、単一主題に関する関連する一意のデータが含まれています。カードは通常、より複雑で詳細な情報のエントリポイントです。

カードレイアウト

基本的なカードのHTMLレイアウトを見てみましょう

<div class="card">
  <div class="card-header">Header</div>
  <div class="card-content">
    <!-- Card content -->
  </div>
  <div class="card-footer">Footer</div>
</div>

<div class="card card-raised">
  <div class="card-header">Header</div>
  <div class="card-content card-content-padding">
    <!-- Card content -->
  </div>
  <div class="card-footer">Footer</div>
</div>

<div class="card card-outline card-header-divider card-footer-divider">
  <div class="card-header">Header</div>
  <div class="card-content">
    <!-- Card content -->
  </div>
  <div class="card-footer">Footer</div>
</div>

ここで

<div class="card"> - カードコンテナ
- <div class="card-header"> - カードヘッダー。主にカードのタイトルを表示するために使用されます。オプション
- <div class="card-footer"> - カードフッターは、追加情報やカスタムアクション/リンクに使用されます。オプション
- <div class="card-content"> - カードコンテンツのメインコンテナ。必須
- <div class="card-content card-content-padding"> - カードコンテンツに追加のパディングを追加するために使用される追加のcard-content-padding
- card-raised - カード要素に追加してカードを影付きで浮かび上がらせることができる追加クラス
- card-outline - アウトライン（境界線を追加）にするためにカード要素に追加できる追加クラス
- card-header-divider - カードヘッダー要素の後に区切り線（境界線）を追加するためにカード要素に追加できる追加クラス
- card-footer-divider - カードフッター要素の前に区切り線（境界線）を追加するためにカード要素に追加できる追加クラス

"card-header"と"card-footer"はフレックスボックスレイアウト（display:flex）を使用しており、項目は垂直方向に中央揃えされています。ヘッダー/フッターの上または下に項目を揃える必要がある場合は、例えばタイポグラフィクラスなどの追加クラスを使用できます。

<div class="card-header align-items-flex-start"> - ヘッダー項目をヘッダーの上部に揃える

<div class="card-footer align-items-flex-end"> - フッター項目をフッターの下部に揃える

展開可能なカード

展開可能なカード（別名AppStoreカード）は、通常のカードのサブセットであり、モバイルでは全画面サイズに、タブレットではより大きなサイズにクリックで展開されます。

展開可能なカードレイアウト

少し異なり、簡素化されたレイアウトになっています。

<!-- addition "card-expandable" class on card to make it expandable -->
<div class="card card-expandable">
  <!-- card content -->
  <div class="card-content">
    <!-- put all content here -->
  </div>
</div>

ここで

card-expandable - カード要素に追加して展開可能にする追加クラス
card-content - カードコンテンツを配置する唯一の場所です。

そのため、card-content-padding、card-header、card-footerなどの追加要素は、カードが展開可能である場合はcard-content内に配置する必要があります。

展開可能なカードサイズ

デフォルトでは、展開可能なカードはタブレット/デスクトップで固定サイズで開きます。タブレット/デスクトップ画面で展開可能なカードを全画面サイズで開くには、カード要素にcard-tablet-fullscreenクラスを追加する必要があります。それ以外の場合は、--f7-card-expandable-tablet-widthと--f7-card-expandable-tablet-heightのCSS変数を使用してこのサイズを設定できます。

展開可能なカードコンテンツ（card-content）は、折りたたみ時（閉じている時）に幅が100vwに設定されています。これはカードの開閉アニメーションのパフォーマンスを向上させるために行われており、コンテンツの位置決めには注意が必要です。カード要素にcard-expandable-animate-widthクラスを追加することで、コンテンツの幅もアニメーション化してレスポンシブにすることができますが、その場合、パフォーマンスが低下する可能性があります。

開閉時の要素の非表示

展開可能なカードには、閉じている状態と開いている状態の2つの状態があります。これらの2つのクラスを使用して、カードの要素の表示/非表示を切り替えることができます。

card-opened-fade-in - カードコンテンツ内のこのようなクラスを持つ要素は、カードが閉じている場合は不透明度が0になり、カードが開くと不透明度が1にフェードインします。
card-opened-fade-out - カードコンテンツ内のこのようなクラスを持つ要素は、カードが閉じている場合は不透明度が1になり、カードが開くと不透明度が0にフェードアウトします。

カードの展開を防止する

一部のレイアウトでは、折りたたまれている場合に、展開可能なカードにボタンやリンクが表示領域にある場合があります。このようなボタンやリンクをクリックできるようにし、展開可能なカードの展開を防ぐには、このボタンにcard-prevent-openクラスを追加する必要があります。

<div class="card card-expandable">
  <div class="card-content">
    ...
    <!-- Add "card-prevent-open" to element and click on it won't open expandable card -->
    <a href="#" class="button card-prevent-open">Button</a>
  </div>
</div>

展開可能なカードのバックドロップ

展開可能なカードのバックドロップを有効にしている場合（デフォルトで有効になっています。以下のパラメーターを参照）、カードが開くと、カードの親ページにバックドロップ要素（カードの後ろの暗いオーバーレイ）が自動的に追加されます。

一部のレイアウトでは、バックドロップ要素をカスタムの位置に配置する必要がある場合があります。この場合、この要素を手動で追加し、カードのdata-backdrop-el属性で指定する必要があります。

<div class="block">
  <!-- custom backdrop element -->
  <div class="card-backdrop custom-backdrop"></div>
  <!-- pass its CSS selector in data-backdrop-el attribute -->
  <div class="card card-expandable" data-backdrop-el=".custom-backdrop">
    ...
  </div>
</div>

カードアプリメソッド

展開可能なカードを操作するための関連するアプリメソッドを見てみましょう。

app.card.open(el, animate)- 展開可能なカードを開きます

el - HTMLElementまたは文字列（CSSセレクター付き）。開く展開可能なカード。
animate - boolean。アニメーション付きで展開可能なカードを開きます。デフォルトはtrueです。

app.card.close(el, animate)- 展開可能なカードを閉じます

el - HTMLElementまたは文字列（CSSセレクター付き）。閉じる展開可能なカード。
animate - boolean。アニメーション付きで展開可能なカードを閉じます。デフォルトはtrueです。

app.card.toggle(el, animate)- 展開可能なカードを切り替えます

el - HTMLElementまたは文字列（CSSセレクター付き）。切り替える展開可能なカード。
animate - boolean。アニメーション付きで展開可能なカードを切り替えます。デフォルトはtrueです。

カードアプリパラメーター

グローバルなアプリパラメーターを使用して、cardパラメーターの下にあるカード関連のパラメーターを渡すことで、いくつかのデフォルトのカードの動作を制御できます。

パラメーター	型	デフォルト	説明
hideNavbarOnOpen	boolean	true	展開可能なカードを開くとナビゲーションバーを非表示にします。
hideToolbarOnOpen	boolean	true	展開可能なカードを開くとツールバーを非表示にします。
hideStatusbarOnOpen	boolean	true	展開可能なカードを開くと「ステータスバー」（またはナビゲーションバー全体）を非表示にします。
swipeToClose	boolean	true	スワイプで展開可能なカードを閉じることができます。
backdrop	boolean	true	展開可能なカードのバックドロップレイヤーを有効にします。
closeByBackdropClick	boolean	true	有効にすると、バックドロップをクリックすると展開可能なカードが閉じます。

例えば

var app = new Framework7({
  card: {
    hideNavbarOnOpen: false,
    closeByBackdropClick: false,
  },
});

さらに、これらのパラメーターはすべて、追加のdata-animate属性を含む同じdata-属性を使用して、個々の展開可能なカードに設定できます。

<!-- this card will opened without animation -->
<div class="card card-expandable" data-animate="false">
  ...
</div>

<!-- this card will opened without backdrop -->
<div class="card card-expandable" data-backdrop="false">
  ...
</div>

リンクでカードを制御する

特別なクラスとデータ属性を使用してリンクを介して、必要な展開可能なカードを開閉することができます。

展開可能なカードを開くには、任意のHTML要素（リンクが推奨）に「card-open」クラスを追加する必要があります。
展開可能なカードを閉じるには、任意のHTML要素（リンクが推奨）に「card-close」クラスを追加する必要があります。
DOMに複数の展開可能なカードがある場合は、このHTML要素に追加のdata-card=".my-card"属性を使用して、適切なカードを指定する必要があります。

カードイベント

展開可能なカードは、カード要素で次のDOMイベントを、アプリインスタンスでイベントを発生させます。

DOMイベント

イベント	ターゲット	説明
card:beforeopen	カード要素<div class="card">	展開可能なカードが開き始める直前にトリガーされます。`event.detail.prevent`には、呼び出されるとカードの展開を防ぐ関数が含まれています。
card:open	カード要素<div class="card">	展開可能なカードが開き始める際にトリガーされます。
card:opened	カード要素<div class="card">	展開可能なカードの開きアニメーションが完了した後にトリガーされます。
card:close	カード要素<div class="card">	展開可能なカードが閉じ始める際にトリガーされます。
card:closed	カード要素<div class="card">	展開可能なカードの閉じアニメーションが完了した後にトリガーされます。

アプリインスタンスイベント

イベント	引数	説明
cardBeforeOpen	(el, prevent)	展開可能なカードが開き始める直前にトリガーされます。`prevent`には、呼び出されると展開可能なカードの展開を防ぐ関数が含まれています。
cardOpen	(el)	展開可能なカードが開き始める際にトリガーされます。引数として、イベントハンドラーはカードのHTML要素を受け取ります。
cardOpened	(el)	展開可能なカードの開きアニメーションが完了した後にトリガーされます。引数として、イベントハンドラーはカードのHTML要素を受け取ります。
cardClose	(el)	展開可能なカードが閉じ始める際にトリガーされます。引数として、イベントハンドラーはカードのHTML要素を受け取ります。
cardClosed	(el)	展開可能なカードの閉じアニメーションが完了した後にトリガーされます。引数として、イベントハンドラーはカードのHTML要素を受け取ります。

CSS変数

以下は、関連するCSS変数（CSSカスタムプロパティ）のリストです。

:root {
  --f7-card-margin-horizontal: 16px;
  --f7-card-margin-vertical: 16px;
  --f7-card-content-padding-horizontal: 16px;
  --f7-card-content-padding-vertical: 16px;
  --f7-card-font-size: inherit;
  --f7-card-header-text-color: inherit;
  --f7-card-header-font-weight: 400;
  --f7-card-header-padding-horizontal: 16px;
  --f7-card-footer-font-weight: 400;
  --f7-card-footer-font-size: inherit;
  --f7-card-footer-padding-horizontal: 16px;
  --f7-card-expandable-font-size: 16px;
  --f7-card-expandable-tablet-width: 670px;
  --f7-card-expandable-tablet-height: 670px;
}
.ios {
  --f7-card-border-radius: 8px;
  --f7-card-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
  --f7-card-header-font-size: 17px;
  --f7-card-header-padding-vertical: 10px;
  --f7-card-header-min-height: 44px;
  --f7-card-footer-text-color: rgba(0, 0, 0, 0.45);
  --f7-card-footer-padding-vertical: 10px;
  --f7-card-footer-min-height: 44px;
  --f7-card-expandable-margin-horizontal: 20px;
  --f7-card-expandable-margin-vertical: 30px;
  --f7-card-expandable-box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.3);
  --f7-card-expandable-border-radius: 16px;
  --f7-card-expandable-tablet-border-radius: 16px;
  --f7-card-expandable-header-font-size: 27px;
  --f7-card-expandable-header-font-weight: bold;
  --f7-card-text-color: inherit;
  --f7-card-bg-color: #fff;
  --f7-card-expandable-bg-color: #fff;
  --f7-card-outline-border-color: rgba(0, 0, 0, 0.12);
  --f7-card-header-border-color: rgba(0, 0, 0, 0.1);
  --f7-card-footer-border-color: rgba(0, 0, 0, 0.1);
}
.ios .dark,
.ios.dark {
  --f7-card-bg-color: #1c1c1d;
  --f7-card-expandable-bg-color: #1c1c1d;
  --f7-card-outline-border-color: rgba(255, 255, 255, 0.15);
  --f7-card-header-border-color: rgba(255, 255, 255, 0.15);
  --f7-card-footer-border-color: rgba(255, 255, 255, 0.15);
  --f7-card-footer-text-color: rgba(255, 255, 255, 0.55);
}
.md {
  --f7-card-border-radius: 16px;
  --f7-card-box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
                        0px 1px 1px 0px rgba(0, 0, 0, 0.14),
                        0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --f7-card-header-font-size: 22px;
  --f7-card-header-padding-vertical: 16px;
  --f7-card-header-min-height: 48px;
  --f7-card-footer-padding-vertical: 16px;
  --f7-card-footer-min-height: 48px;
  --f7-card-expandable-margin-horizontal: 12px;
  --f7-card-expandable-margin-vertical: 24px;
  --f7-card-expandable-box-shadow: 0px 6px 6px -3px rgba(0, 0, 0, 0.2),
                                   0px 10px 14px 1px rgba(0, 0, 0, 0.14),
                                   0px 4px 18px 3px rgba(0, 0, 0, 0.12);
  --f7-card-expandable-border-radius: 16px;
  --f7-card-expandable-tablet-border-radius: 16px;
  --f7-card-expandable-header-font-size: 22px;
  --f7-card-expandable-header-font-weight: 500;
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-card-bg-color: var(--f7-md-surface-1);
  --f7-card-expandable-bg-color: var(--f7-md-surface-1);
  --f7-card-outline-border-color: var(--f7-md-outline);
  --f7-card-header-border-color: var(--f7-md-outline);
  --f7-card-footer-border-color: var(--f7-md-outline);
  --f7-card-text-color: var(--f7-md-on-surface);
  --f7-card-footer-text-color: var(--f7-md-on-surface-variant);
}

例

cards.html

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="title">Cards</div>
    </div>
  </div>
  <div class="page-content">
    <div class="block">
      <p>Cards are a great way to contain and organize your information, especially when combined with List Views. Cards
        can contain unique related data, like for example photos, text or links about a particular subject. Cards are
        typically an entry point to more complex and detailed information.</p>
    </div>
    <div class="block-title">Simple Cards</div>
    <div class="card">
      <div class="card-content card-content-padding">This is a simple card with plain text, but cards can also contain
        their own header, footer, list view, image, or any other element.</div>
    </div>
    <div class="card">
      <div class="card-header">Card header</div>
      <div class="card-content card-content-padding">Card with header and footer. Card headers are used to display card
        titles and footers for additional information or just for custom actions.</div>
      <div class="card-footer">Card Footer</div>
    </div>
    <div class="card">
      <div class="card-content card-content-padding">Another card. Lorem ipsum dolor sit amet, consectetur adipiscing
        elit. Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet. Mauris aliquet magna justo. </div>
    </div>

    <div class="block-title">Outline Cards</div>
    <div class="card card-outline">
      <div class="card-content card-content-padding">This is a simple card with plain text, but cards can also contain
        their own header, footer, list view, image, or any other element.</div>
    </div>
    <div class="card card-outline">
      <div class="card-header">Card header</div>
      <div class="card-content card-content-padding">Card with header and footer. Card headers are used to display card
        titles and footers for additional information or just for custom actions.</div>
      <div class="card-footer">Card Footer</div>
    </div>
    <div class="card card-outline">
      <div class="card-content card-content-padding">Another card. Lorem ipsum dolor sit amet, consectetur adipiscing
        elit. Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet. Mauris aliquet magna justo. </div>
    </div>

    <div class="block-title">Outline With Dividers</div>
    <div class="card card-outline card-dividers">
      <div class="card-header">Card header</div>
      <div class="card-content card-content-padding">Card with header and footer. Card headers are used to display card
        titles and footers for additional information or just for custom actions.</div>
      <div class="card-footer">Card Footer</div>
    </div>

    <div class="block-title">Raised Cards</div>
    <div class="card card-raised">
      <div class="card-content card-content-padding">This is a simple card with plain text, but cards can also contain
        their own header, footer, list view, image, or any other element.</div>
    </div>
    <div class="card card-raised">
      <div class="card-header">Card header</div>
      <div class="card-content card-content-padding">Card with header and footer. Card headers are used to display card
        titles and footers for additional information or just for custom actions.</div>
      <div class="card-footer">Card Footer</div>
    </div>
    <div class="card card-raised">
      <div class="card-content card-content-padding">Another card. Lorem ipsum dolor sit amet, consectetur adipiscing
        elit. Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet. Mauris aliquet magna justo. </div>
    </div>

    <div class="block-title">Styled Cards</div>
    <div class="card card-outline-md demo-card-header-pic">
      <div style="background-image:url(https://cdn.framework7.io/placeholder/nature-1000x600-3.jpg)" valign="bottom"
        class="card-header">Journey To Mountains</div>
      <div class="card-content card-content-padding">
        <p class="date">Posted on January 21, 2015</p>
        <p>Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies efficitur vitae non felis. Phasellus quis
          nibh hendrerit...</p>
      </div>
      <div class="card-footer"><a class="link">Like</a><a class="link">Read more</a></div>
    </div>
    <div class="card demo-card-header-pic">
      <div style="background-image:url(https://cdn.framework7.io/placeholder/people-1000x600-6.jpg)" valign="bottom"
        class="card-header">Lorem Ipsum</div>
      <div class="card-content card-content-padding">
        <p class="date">Posted on January 21, 2015</p>
        <p>Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies efficitur vitae non felis. Phasellus quis
          nibh hendrerit...</p>
      </div>
      <div class="card-footer"><a class="link">Like</a><a class="link">Read more</a></div>
    </div>

    <div class="block-title">Cards With List View</div>
    <div class="card">
      <div class="card-content">
        <div class="list links-list no-safe-areas">
          <ul>
            <li><a>Link 1</a></li>
            <li><a>Link 2</a></li>
            <li><a>Link 3</a></li>
            <li><a>Link 4</a></li>
            <li><a>Link 5</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header">New Releases:</div>
      <div class="card-content">
        <div class="list media-list no-safe-areas">
          <ul>
            <li class="item-content">
              <div class="item-media"><img src="https://cdn.framework7.io/placeholder/fashion-88x88-4.jpg" width="44" />
              </div>
              <div class="item-inner">
                <div class="item-title-row">
                  <div class="item-title">Yellow Submarine</div>
                </div>
                <div class="item-subtitle">Beatles</div>
              </div>
            </li>
            <li class="item-content">
              <div class="item-media"><img src="https://cdn.framework7.io/placeholder/fashion-88x88-5.jpg" width="44" />
              </div>
              <div class="item-inner">
                <div class="item-title-row">
                  <div class="item-title">Don't Stop Me Now</div>
                </div>
                <div class="item-subtitle">Queen</div>
              </div>
            </li>
            <li class="item-content">
              <div class="item-media"><img src="https://cdn.framework7.io/placeholder/fashion-88x88-6.jpg" width="44" />
              </div>
              <div class="item-inner">
                <div class="item-title-row">
                  <div class="item-title">Billie Jean</div>
                </div>
                <div class="item-subtitle">Michael Jackson</div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="card-footer"> <span>January 20, 2015</span><span>5 comments</span></div>
    </div>
  </div>
</div>

cards-expandable.html

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="title">Cards Expandable</div>
    </div>
  </div>
  <div class="page-content">
    <div class="block">
      <p>In addition to usual <a href="/cards/">Cards</a> there are also Expandable Cards that allow to store more
        information and illustrations about particular subject.</p>
    </div>
    <div class="demo-expandable-cards">
      <div class="card card-expandable">
        <div class="card-content">
          <div class="bg-color-red" style="height: 300px">
            <div class="card-header text-color-white display-block">
              Framework7
              <br />
              <small style="opacity: 0.7">Build Mobile Apps</small>
            </div>
            <a class="link card-close card-opened-fade-in color-white"
              style="position: absolute; right: 15px; top: 15px">
              <i class="icon f7-icons">xmark_circle_fill</i>
            </a>
          </div>
          <div class="card-content-padding">
            <p>Framework7 - is a free and open source HTML mobile framework to develop hybrid mobile apps or web apps
              with iOS or Android (Material) native look and feel. It is also an indispensable prototyping apps tool to
              show working app prototype as soon as possible in case you need to. Framework7 is created by Vladimir
              Kharlampidi (iDangero.us).</p>
            <p>The main approach of the Framework7 is to give you an opportunity to create iOS and Android (Material)
              apps with HTML, CSS and JavaScript easily and clear. Framework7 is full of freedom. It doesn't limit your
              imagination or offer ways of any solutions somehow. Framework7 gives you freedom!</p>
            <p>Framework7 is not compatible with all platforms. It is focused only on iOS and Android (Material) to
              bring the best experience and simplicity.</p>
            <p>Framework7 is definitely for you if you decide to build iOS and Android hybrid app (Cordova or Capacitor)
              or web app that looks like and feels as great native iOS or Android (Material) apps.</p>
            <p>
              <a class="button button-fill button-round button-large card-close color-red">Close</a>
            </p>
          </div>
        </div>
      </div>

      <div class="card card-expandable">
        <div class="card-content">
          <div class="bg-color-yellow" style="height: 300px">
            <div class="card-header text-color-black display-block">
              Framework7
              <br />
              <small style="opacity: 0.7">Build Mobile Apps</small>
            </div>
            <a class="link card-close card-opened-fade-in color-black"
              style="position: absolute; right: 15px; top: 15px">
              <i class="icon f7-icons">xmark_circle_fill</i>
            </a>
          </div>
          <div class="card-content-padding">
            <p>Framework7 - is a free and open source HTML mobile framework to develop hybrid mobile apps or web apps
              with iOS or Android (Material) native look and feel. It is also an indispensable prototyping apps tool to
              show working app prototype as soon as possible in case you need to. Framework7 is created by Vladimir
              Kharlampidi (iDangero.us).</p>
            <p>The main approach of the Framework7 is to give you an opportunity to create iOS and Android (Material)
              apps with HTML, CSS and JavaScript easily and clear. Framework7 is full of freedom. It doesn't limit your
              imagination or offer ways of any solutions somehow. Framework7 gives you freedom!</p>
            <p>Framework7 is not compatible with all platforms. It is focused only on iOS and Android (Material) to
              bring the best experience and simplicity.</p>
            <p>Framework7 is definitely for you if you decide to build iOS and Android hybrid app (Cordova or Capacitor)
              or web app that looks like and feels as great native iOS or Android (Material) apps.</p>
            <p>
              <a class="button button-fill button-round button-large card-close color-yellow text-color-black">Close</a>
            </p>
          </div>
        </div>
      </div>
      <div class="card card-expandable">
        <div class="card-content">
          <div style="background: url(./img/beach.jpg) no-repeat center bottom; background-size: cover; height: 240px">
          </div>
          <a class="link card-close card-opened-fade-in color-white" style="position: absolute; right: 15px; top: 15px">
            <i class="icon f7-icons">xmark_circle_fill</i>
          </a>
          <div class="card-header display-block" style="height: 60px">
            Beach, Goa
          </div>
          <div class="card-content-padding">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam cursus rhoncus cursus. Etiam lorem est,
              consectetur vitae tempor a, volutpat eget purus. Duis urna lectus, vehicula at quam id, sodales dapibus
              turpis. Suspendisse potenti. Proin condimentum luctus nulla, et rhoncus ante rutrum eu. Maecenas ut
              tincidunt diam. Vestibulum lacinia dui ligula, sit amet pulvinar nisl blandit luctus. Vestibulum aliquam
              ligula nulla, tincidunt rhoncus tellus interdum at. Phasellus mollis ipsum at mollis tristique. Maecenas
              sit amet tempus justo. Duis dolor elit, mollis quis viverra quis, vehicula eu ante. Integer a molestie
              risus. Vestibulum eu sollicitudin massa, sit amet dictum sem. Aliquam nisi tellus, maximus eget placerat
              in, porta vel lorem. Aenean tempus sodales nisl in cursus. Curabitur tincidunt turpis in nisl ornare
              euismod eget at libero.</p>
            <p>Suspendisse ligula eros, congue in nulla pellentesque, imperdiet blandit sapien. Morbi nisi sem,
              efficitur a rutrum porttitor, feugiat vel enim. Fusce eget vehicula odio, et luctus neque. Donec mattis a
              nulla laoreet commodo. Integer eget hendrerit augue, vel porta libero. Morbi imperdiet, eros at ultricies
              rutrum, eros urna auctor enim, eget laoreet massa diam vitae lorem. Proin eget urna ultrices, semper
              ligula aliquam, dignissim eros. Donec vitae augue eu sapien tristique elementum a nec nulla. Aliquam erat
              volutpat. Curabitur condimentum, metus blandit lobortis fringilla, enim mauris venenatis neque, et
              venenatis lorem urna ut justo. Maecenas neque enim, congue ac tempor quis, tincidunt ut mi. Donec
              venenatis ante non consequat molestie. Quisque ut rhoncus ligula. Vestibulum sodales maximus justo sit
              amet ornare. Nullam pulvinar eleifend nisi sit amet molestie.</p>
            <p>
              <a class="button button-fill button-round button-large card-close">Close</a>
            </p>
          </div>
        </div>
      </div>
      <div class="card card-expandable">
        <div class="card-content">
          <div style="background: url(./img/monkey.jpg) no-repeat center top; background-size: cover; height: 400px">
            <div class="card-header text-color-white">Monkeys</div>
            <a class="link card-close card-opened-fade-in color-white"
              style="position: absolute; right: 15px; top: 15px">
              <i class="icon f7-icons">xmark_circle_fill</i>
            </a>
          </div>
          <div class="card-content-padding">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam cursus rhoncus cursus. Etiam lorem est,
              consectetur vitae tempor a, volutpat eget purus. Duis urna lectus, vehicula at quam id, sodales dapibus
              turpis. Suspendisse potenti. Proin condimentum luctus nulla, et rhoncus ante rutrum eu. Maecenas ut
              tincidunt diam. Vestibulum lacinia dui ligula, sit amet pulvinar nisl blandit luctus. Vestibulum aliquam
              ligula nulla, tincidunt rhoncus tellus interdum at. Phasellus mollis ipsum at mollis tristique. Maecenas
              sit amet tempus justo. Duis dolor elit, mollis quis viverra quis, vehicula eu ante. Integer a molestie
              risus. Vestibulum eu sollicitudin massa, sit amet dictum sem. Aliquam nisi tellus, maximus eget placerat
              in, porta vel lorem. Aenean tempus sodales nisl in cursus. Curabitur tincidunt turpis in nisl ornare
              euismod eget at libero.</p>
            <p>Suspendisse ligula eros, congue in nulla pellentesque, imperdiet blandit sapien. Morbi nisi sem,
              efficitur a rutrum porttitor, feugiat vel enim. Fusce eget vehicula odio, et luctus neque. Donec mattis a
              nulla laoreet commodo. Integer eget hendrerit augue, vel porta libero. Morbi imperdiet, eros at ultricies
              rutrum, eros urna auctor enim, eget laoreet massa diam vitae lorem. Proin eget urna ultrices, semper
              ligula aliquam, dignissim eros. Donec vitae augue eu sapien tristique elementum a nec nulla. Aliquam erat
              volutpat. Curabitur condimentum, metus blandit lobortis fringilla, enim mauris venenatis neque, et
              venenatis lorem urna ut justo. Maecenas neque enim, congue ac tempor quis, tincidunt ut mi. Donec
              venenatis ante non consequat molestie. Quisque ut rhoncus ligula. Vestibulum sodales maximus justo sit
              amet ornare. Nullam pulvinar eleifend nisi sit amet molestie.</p>
            <p>
              <a class="button button-fill button-round button-large card-close">Close</a>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

このドキュメントを改善する

このページで

カードレイアウト
展開可能なカード
カードアプリメソッド
カードアプリパラメーター
リンクでカードを制御する
カードイベント

DOMイベント
アプリインスタンスイベント

CSS変数
例