贊助商成為贊助商

卡片

卡片與清單檢視一樣，是包含和整理資訊的好方法。卡片包含獨特的相關資料，例如，一張照片、文字和一個關於單一主題的連結。卡片通常是進入更複雜和詳細資訊的入口點。

卡片版面

讓我們來看一個基本的卡片 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>

其中

請注意，「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-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 個狀態：關閉和開啟。而且，您可以使用這兩個類別來隱藏/顯示卡片的元素

防止卡片開啟

在某些版面中，您可能會在可展開卡片收合時，在可見區域或可展開卡片中放置按鈕或連結。若要允許點選此類按鈕或連結，並防止可展開卡片開啟，我們需要在此按鈕中加入 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 或 string（帶有 CSS 選擇器）。要開啟的可展開卡片。
  • animate - boolean。使用動畫開啟可展開卡片。預設為 true

app.card.close(el, animate)- 關閉可展開卡片

  • el - HTMLElement 或 string（帶有 CSS 選擇器）。要關閉的可展開卡片。
  • animate - boolean。使用動畫關閉可展開卡片。預設為 true

app.card.toggle(el, animate)- 切換可展開卡片

  • el - HTMLElement 或 string（帶有 CSS 選擇器）。要切換的可展開卡片。
  • animate - boolean。使用動畫切換可展開卡片。預設為 true

卡片應用程式參數

透過傳遞 card 參數下的卡片相關參數，可以使用全域 應用程式參數 來控制一些預設卡片行為

參數類型預設說明
hideNavbarOnOpenbooleantrue在可展開卡片開啟時隱藏導覽列。
hideToolbarOnOpenbooleantrue在可展開卡片開啟時隱藏工具列。
hideStatusbarOnOpenbooleantrue在可展開卡片開啟時隱藏「狀態列」（或完全隱藏導覽列）。
swipeToClosebooleantrue允許使用滑動關閉可展開卡片。
backdropbooleantrue啟用可展開卡片背景圖層。
closeByBackdropClickbooleantrue啟用後，可展開卡片會在背景圖層被點擊時關閉。

例如

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

此外，所有這些參數都可以透過相同的 data- 屬性個別設定在每個可展開卡片上，包括其他 data-animate 屬性

<!-- 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>

可以使用連結上的特殊類別和資料屬性來開啟和關閉所需的可展開卡片

  • 若要開啟可展開卡片，我們需要將「card-open」類別新增至任何 HTML 元素（建議使用連結）

  • 若要關閉可展開卡片，我們需要將「card-close」類別新增至任何 HTML 元素（建議使用連結）

  • 如果 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>
改善此文件
在此頁面