Cards

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="left">
        <a class="link back">
          <i class="icon icon-back"></i>
          <span class="if-not-md">返回</span>
        </a>
      </div>
      <div class="title">卡片</div>
    </div>
  </div>
  <div class="page-content">
    <div class="block">
      <p>卡片是一种很好的方式来包含和组织信息，尤其是与列表视图结合使用时。卡片可以包含与特定主题相关的独特数据，例如照片、文字或链接。卡片通常是进入更复杂和详细信息的入口点。</p>
    </div>
    <div class="block-title"> 简单Cards</div>
    <div class="card">
      <div class="card-content card-content-padding">这是一张简单的卡片，只有纯文本。但是卡片还可以包含自己的标题、页脚、列表视图、图片或任何其他元素。</div>
    </div>
    <div class="card">
      <div class="card-header">带标题操作栏的cards</div>
      <div class="card-content card-content-padding">具有标题和页脚的卡片。卡片标题用于显示卡片的标题，页脚用于显示额外信息或自定义操作。</div>
      <div class="card-footer">操作栏</div>
    </div>
    <div class="card">
      <div class="card-content card-content-padding">这是另外一个卡片的内容 </div>
    </div>

    <div class="block-title">轮廓卡片</div>
    <div class="card card-outline">
      <div class="card-content card-content-padding">这是一个简单的带有纯文本的卡片，但卡片也可以包含自己的标题、页脚、列表视图、图像或任何其他元素。</div>
    </div>
    <div class="card card-outline">
      <div class="card-header">卡片标题</div>
      <div class="card-content card-content-padding">具有标题和页脚的卡片。卡片标题用于显示卡片的标题，页脚用于显示额外信息或自定义操作。</div>
      <div class="card-footer">操作栏</div>
    </div>
    <div class="card card-outline">
      <div class="card-content card-content-padding"> 卡片占位符. 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">带分隔线的轮廓卡片</div>
    <div class="card card-outline card-dividers">
      <div class="card-header">卡片标题</div>
      <div class="card-content card-content-padding">具有标题和页脚的卡片。卡片标题用于显示卡片的标题，页脚用于显示额外信息或自定义操作。</div>
      <div class="card-footer">卡片注脚</div>
    </div>

    <div class="block-title">立体卡片</div>
    <div class="card card-raised">
      <div class="card-content card-content-padding">这是一个简单的带有纯文本的卡片，但卡片也可以包含自己的标题、页脚、列表视图、图像或任何其他元素。</div>
    </div>
    <div class="card card-raised">
      <div class="card-header">卡片标题</div>
      <div class="card-content card-content-padding">卡片。卡片页眉用于展示卡片标题，页脚则用于提供额外信息或自定义操作。</div>
      <div class="card-footer">卡片注脚</div>
    </div>
    <div class="card card-raised">
      <div class="card-content card-content-padding">卡片占位. 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">卡片样式</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">泰山旅行</div>
      <div class="card-content card-content-padding">
        <p class="date">2015年8月23号 发布</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">喜欢</a><a class="link">更多</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">人山人海</div>
      <div class="card-content card-content-padding">
        <p class="date">2015年9月23号 发布</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">喜欢</a><a class="link">更多</a></div>
    </div>

    <div class="block-title">卡片中的list视图</div>
    <div class="card">
      <div class="card-content">
        <div class="list links-list no-safe-areas">
          <ul>
            <li><a>连接1</a></li>
            <li><a>链接2</a></li>
            <li><a>工作</a></li>
            <li><a>上学</a></li>
            <li><a>开发</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header">最新版本</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">秋日太阳</div>
                </div>
                <div class="item-subtitle">运动</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">不要打扰我</div>
                </div>
                <div class="item-subtitle">李铁生</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">稻香</div>
                </div>
                <div class="item-subtitle">Michael Jackson</div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="card-footer"> <span>2015-10-25</span><span>5 评论</span></div>
    </div>
  </div>
</div>

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="left">
        <a class="link back">
          <i class="icon icon-back"></i>
          <span class="if-not-md">返回</span>
        </a>
      </div>
      <div class="title">卡片扩展</div>
    </div>
  </div>
  <div class="page-content">
    <div class="block">
      <p>除了通常的<a href="/cards/">卡片</a>外，还有可以存储更多关于特定主题的信息和插图的可展开卡片。</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">开发手机应用</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是一个免费开源的HTML移动框架，用于开发混合移动应用程序或Web应用程序，具有iOS或Android（Material）本地外观和感觉。它还是一个不可或缺的原型应用工具，可以尽快展示工作中的应用原型，以防需要。Framework7是由Vladimir Kharlampidi（iDangero.us）创建的。</p>
            <p>Framework7的主要方法是为您提供使用HTML、CSS和JavaScript轻松创建iOS和Android（Material）应用程序的机会。Framework7充满了自由。它不限制您的想象力，也不以某种方式提供任何解决方案。Framework7给予您自由！</p>
            <p>Framework7与所有平台都不兼容。它只专注于iOS和Android（Material）以提供最佳的体验和简洁性。</p>
            <p>如果您决定构建iOS和Android混合应用程序（Cordova或Capacitor）或外观和感觉与原生iOS或Android（Material）应用程序相似的Web应用程序，那么Framework7绝对适合您。</p>
            <p>
              <a class="button button-fill button-round button-large card-close color-red">关闭</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>