QCard 元件是顯示重要群組內容的好方法。這種模式正快速興起，成為應用程式、網站預覽和電子郵件內容的核心設計模式。它透過包含和組織資訊來協助檢視者，同時建立可預期的期望。

由於需要一次顯示如此多的內容，而且通常螢幕空間非常有限，卡片已快速成為許多公司（包括 Google 和 Twitter 等公司）的首選設計模式。

QCard 元件刻意保持輕巧，本質上是一個能夠「託管」任何其他適當元件的容器元素。

用法

基本

帶有操作

以下是一些您可以透過 align 屬性用於操作的自訂對齊方式

媒體內容

水平

在以下範例中，請注意帶有 horizontal 屬性的 QCardSection，它會包裝其他 QCardSection。另請注意，您可以直接在水平 QCardSection 的子項上使用 col-* 類別，以便控制大小。

建議您在使用水平 QCardSection 時使用 QImg 元件，而不是原生 <img>。

各種內容

可展開

在以下範例中，按一下右下角的圓形按鈕即可查看展開效果。