赞助商成为赞助商

卡片

卡片与列表视图一样，都是用于容纳和组织信息的绝佳方式。卡片包含独特的相关数据，例如，关于单个主题的照片、文本和链接。卡片通常是通往更复杂和详细信息的入口点。

卡片布局

我们来看一下基本的卡片 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”具有 flexbox 布局（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 方法

app.card.open(el, animate)- 打开可扩展卡片

  • el - HTMLElement 或 字符串（使用 CSS 选择器）。要打开的可扩展卡片。
  • animate - 布尔值。使用动画打开可扩展卡片。默认值为 true

app.card.close(el, animate)- 关闭可扩展卡片

  • el - HTMLElement 或 字符串（使用 CSS 选择器）。要关闭的可扩展卡片。
  • animate - 布尔值。使用动画关闭可扩展卡片。默认值为 true

app.card.toggle(el, animate)- 切换可扩展卡片

  • el - HTMLElement 或 字符串（使用 CSS 选择器）。要切换的可扩展卡片。
  • animate - 布尔值。使用动画切换可扩展卡片。默认值为 true

卡片应用参数

可以通过在 card 参数下传递 Cards 相关参数，使用全局 app 参数 来控制一些默认的 Cards 行为

参数类型默认值描述
hideNavbarOnOpen布尔值true展开卡片时隐藏导航栏。
hideToolbarOnOpen布尔值true展开卡片时隐藏工具栏。
hideStatusbarOnOpen布尔值true展开卡片时隐藏“状态栏”（或完全隐藏导航栏）。
swipeToClose布尔值true允许通过滑动关闭可展开卡片。
backdrop布尔值true启用可展开卡片背景层。
closeByBackdropClick布尔值true启用后，点击背景将关闭可展开卡片。

例如

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>

可以使用链接上的特殊类和数据属性打开和关闭所需的展开卡片。

  • 要打开可展开卡片，我们需要在任何 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>
改进此文档
在本页