卡片

卡片，连同列表视图，是包含和组织您信息的好方法。卡片包含独特的相关数据，例如，关于单个主题的照片、文本和链接。卡片通常是更复杂和详细信息的一个入口点。

卡片布局

让我们看一下基本的卡片 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>

Where:

注意 "card-header" 和 "card-footer" 具有弹性盒布局 (display:flex)，而项目具有垂直居中对齐。如果您需要将项目对齐到头部/底部的顶部或底部，那么您可以使用附加typography类，例如：

<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-heightCSS 变量来配置此大小。

可展开卡片内容 (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或字符串（使用 CSS 选择器）。可展开卡片打开。
  • animate - 布尔值. 带动画打开可展开卡片。默认是true

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

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

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

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

卡片应用参数

通过在app parameters下传递卡片相关参数，可以控制一些默认卡片的默认行为cardparameter:

参数类型默认描述
hideNavbarOnOpen布尔值trueWill hide Navbar on expandable card open.
hideToolbarOnOpen布尔值trueWill hide Toolbar on expandable card open.
hideStatusbarOnOpen布尔值trueWill hide "Statusbar"（或完全隐藏 Navbar）在可展开卡片打开时。
swipeToClose布尔值true允许通过滑动关闭可展开卡片。
背景遮罩布尔值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>

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

  • 要打开可展开卡片，我们需要添加 "card-open" 类

  • 要关闭可展开卡片，我们需要添加 "card-close" 类

  • 如果您在 DOM 中有多个可展开卡片，您需要通过附加data-card=".my-card"属性在这个 HTML 元素上指定适当的 Sheet

卡片事件

可展开卡片将在卡片元素和应用程序实例上触发以下 DOM 事件：

DOM 事件

事件Target描述
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>
改进此文档
在本页上