QCard 组件是显示分组内容中重要部分的绝佳方式。此模式正迅速成为应用、网站预览和电子邮件内容的核心设计模式。它通过包含和组织信息来帮助查看器，同时还能设置可预测的预期。

¥The QCard component is a great way to display important pieces of grouped content. This pattern is quickly emerging as a core design pattern for Apps, website previews and email content. It assists the viewer by containing and organizing information, while also setting up predictable expectations.

由于需要同时显示的内容如此之多，而屏幕空间通常又如此之小，卡片式设计迅速成为许多公司（包括 Google 和 Twitter 等）的首选设计模式。

¥With so much content to display at once, and often so little screen real-estate, Cards have fast become the design pattern of choice for many companies, including the likes of Google and Twitter.

QCard 组件特意设计为轻量级，本质上是一个包含元素，可以 “hosting” 任何其他合适的组件。

¥The QCard component is intentionally lightweight and essentially a containing element that is capable of “hosting” any other component that is appropriate.

用法(Usage)

¥Usage

基本(Basic)

¥Basic

使用操作(With actions)

¥With actions

以下是一些可以通过 align 属性用于操作的自定义对齐方式：

¥Below are some of the custom alignments that you can use for the actions through the align property:

媒体内容(Media content)

¥Media content

水平(Horizontal)

¥Horizontal

在下面的示例中，请注意 QCardSection 上带有 horizontal 属性，它包裹了其他 QCardSection。另请注意，你可以直接在水平 QCardSection 的子元素上使用 col-* 类来控制大小。

¥On the examples below, notice the QCardSection with horizontal prop on it that wraps other QCardSections. Also note that you can directly use col-* classes on children of horizontal QCardSection in order to control the size.

建议你在处理水平 QCardSection 时使用 QImg 组件，而不是原生的 <img>。

¥It’s recommended that you use QImg component instead of native <img> when dealing with horizontal QCardSections.

各种内容(Various content)

¥Various content

可扩展(Expandable)

¥Expandable

在下面的示例中，点击右下角的圆形按钮即可查看扩展的实际效果。

¥On the example below, click on the round button on the bottom right to see the expansion in action.