Card

一款全方位的灵活和可组合组件

Card 组件包含您可以混搭的多种元素:

  • card: 主容器
    • card-header: 带阴影的横向条
      • card-header-title: 左对齐的粗体文字
      • card-header-icon: 图标占位符
    • card-image: 面向自适应图像的全宽度容器
    • card-content: 面向任何其他元素的多用途容器
    • card-footer: 横向列表控制器
      • card-footer-item: 可重复列表项

您可以通过添加 is-centered 修饰符居中 card-header-title

示例

Placeholder image
Placeholder image

John Smith

@johnsmith

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. @bulmaio. #css #responsive

HTML

<div class="card">
  <div class="card-image">
    <figure class="image is-4by3">
      <img src="https://railsway.cn/bulma/images/placeholders/1280x960.png" alt="Placeholder image">
    </figure>
  </div>
  <div class="card-content">
    <div class="media">
      <div class="media-left">
        <figure class="image is-48x48">
          <img src="https://railsway.cn/bulma/images/placeholders/96x96.png" alt="Placeholder image">
        </figure>
      </div>
      <div class="media-content">
        <p class="title is-4">John Smith</p>
        <p class="subtitle is-6">@johnsmith</p>
      </div>
    </div>

    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Phasellus nec iaculis mauris. <a>@bulmaio</a>.
      <a href="#">#css</a> <a href="#">#responsive</a>
      <br>
      <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
    </div>
  </div>
</div>

Card 的组成 #

card-header 可以有一个 title 和一个 Bulma 的 icon

示例

Card 标题

HTML

<div class="card">
  <header class="card-header">
    <p class="card-header-title">
      Card 标题
    </p>
    <button class="card-header-icon" aria-label="more options">
      <span class="icon">
        <i class="fas fa-angle-down" aria-hidden="true"></i>
      </span>
    </button>
  </header>
</div>

card-image 是一个容纳 Bulma image 元素的容器:

示例

Placeholder image

HTML

<div class="card">
  <div class="card-image">
    <figure class="image is-4by3">
      <img src="https://railsway.cn/bulma/images/placeholders/1280x960.png" alt="Placeholder image">
    </figure>
  </div>
</div>

card-content 是主要部分,用于收纳 文本内容,它是有内边距的:

示例

Lorem ipsum leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum.

HTML

<div class="card">
  <div class="card-content">
    <div class="content">
      Lorem ipsum leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum.
    </div>
  </div>
</div>

card-footer 做为 card-footer-item 元素的列表:

示例

HTML

<div class="card">
  <footer class="card-footer">
    <a href="#" class="card-footer-item">Save</a>
    <a href="#" class="card-footer-item">Edit</a>
    <a href="#" class="card-footer-item">Delete</a>
  </footer>
</div>

示例 #

示例

Component

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. @bulmaio. #css #responsive

HTML

<div class="card">
  <header class="card-header">
    <p class="card-header-title">
      Component
    </p>
    <button class="card-header-icon" aria-label="more options">
      <span class="icon">
        <i class="fas fa-angle-down" aria-hidden="true"></i>
      </span>
    </button>
  </header>
  <div class="card-content">
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
      <a href="#">@bulmaio</a>. <a href="#">#css</a> <a href="#">#responsive</a>
      <br>
      <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
    </div>
  </div>
  <footer class="card-footer">
    <a href="#" class="card-footer-item">Save</a>
    <a href="#" class="card-footer-item">Edit</a>
    <a href="#" class="card-footer-item">Delete</a>
  </footer>
</div>

示例

“There are two hard things in computer science: cache invalidation, naming things, and off-by-one errors.”

Jeff Atwood

HTML

<div class="card">
  <div class="card-content">
    <p class="title">
      “There are two hard things in computer science: cache invalidation, naming things, and off-by-one errors.”
    </p>
    <p class="subtitle">
      Jeff Atwood
    </p>
  </div>
  <footer class="card-footer">
    <p class="card-footer-item">
      <span>
        View on <a href="https://twitter.com/codinghorror/status/506010907021828096">Twitter</a>
      </span>
    </p>
    <p class="card-footer-item">
      <span>
        Share on <a href="#">Facebook</a>
      </span>
    </p>
  </footer>
</div>

Variables #

Name
Type
Value
Computed Value
Computed Type
$card-color
variable
$text
hsl(0, 0%, 29%)
color
$card-background-color
variable
$scheme-main
hsl(0, 0%, 100%)
color
$card-shadow
variable
$shadow
0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02)
shadow
$card-radius
size
0.25rem
$card-header-background-color
string
transparent
$card-header-color
variable
$text-strong
hsl(0, 0%, 21%)
color
$card-header-padding
size
0.75rem 1rem
$card-header-shadow
shadow
0 0.125em 0.25em rgba($scheme-invert, 0.1)
$card-header-weight
variable
$weight-bold
700
font-weight
$card-content-background-color
string
transparent
$card-content-padding
size
1.5rem
$card-footer-background-color
string
transparent
$card-footer-border-top
size
1px solid $border-light
$card-footer-padding
size
0.75rem
$card-media-margin
variable
$block-spacing
1.5rem
size

Made with Bulma 此页面为开放源码页面。 发现排版问题?或者表达模糊?
在 GitHub 改进该页内容

#native_company# #native_desc#
#native_cta#

简讯 功能、版本、展柜……实时新闻滚动发布!