跳至主要內容

文件

卡片

使用不同樣式建立版面配置框。

用法

卡片元件包含卡片本身、卡片內文和可選的卡片標題。通常，卡片會從格線元件排列在格線欄中。

類別 描述
.uk-card 將此類別新增至 <div> 元素以定義卡片元件。
.uk-card-body 將此類別新增至卡片，以在卡片及其內容之間建立內距。
.uk-card-title 將此類別新增至標題以定義卡片標題。 
<div class="uk-card uk-card-body">
    <h3 class="uk-card-title"></h3>
</div>

預設情況下，卡片是空白的。這就是為什麼新增修飾符類別以設定樣式非常重要的原因。在我們的範例中，我們使用的是 .uk-card-default 類別。

預設

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<div class="uk-card uk-card-default uk-card-body uk-width-1-2@m">
    <h3 class="uk-card-title">Default</h3>
    <p>Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

樣式修飾符

UIkit 包含許多修飾符，可用於為卡片新增特定樣式。

類別 描述
.uk-card-default 新增此類別以建立視覺樣式的方塊。
.uk-card-primary 新增此類別以修改卡片並使用主要色彩強調它。
.uk-card-secondary 新增此類別以修改卡片並為其提供輔助背景色彩。 
<div class="uk-card uk-card-default"></div>

<div class="uk-card uk-card-primary"></div>

<div class="uk-card uk-card-secondary"></div>

預設

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

主要

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

輔助

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

<div class="uk-child-width-1-3@m uk-grid-small uk-grid-match" uk-grid>
    <div>
        <div class="uk-card uk-card-default uk-card-body">
            <h3 class="uk-card-title">Default</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-primary uk-card-body">
            <h3 class="uk-card-title">Primary</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-secondary uk-card-body">
            <h3 class="uk-card-title">Secondary</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
    </div>
</div>

懸停修飾符

若要在卡片上建立懸停效果，請新增 .uk-card-hover 類別。這在處理錨點時非常方便，並且可以與其他卡片修飾符結合使用。

<div class="uk-card uk-card-hover"></div>

懸停

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

預設

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

主要

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

輔助

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

<div class="uk-child-width-1-2@s uk-grid-match" uk-grid>
    <div>
        <div class="uk-card uk-card-hover uk-card-body">
            <h3 class="uk-card-title">Hover</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-hover uk-card-body">
            <h3 class="uk-card-title">Default</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-primary uk-card-hover uk-card-body uk-light">
            <h3 class="uk-card-title">Primary</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-secondary uk-card-hover uk-card-body uk-light">
            <h3 class="uk-card-title">Secondary</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
    </div>
</div>

大小修飾符

您可以將不同的大小修飾符套用至卡片，這些修飾符會減少或增加其內距。

類別 描述
.uk-card-small 新增此類別以套用較小的內距。
.uk-card-large 新增此類別以套用較大的內距。 
<div class="uk-card uk-card-small uk-card-default"></div>

<div class="uk-card uk-card-large uk-card-default"></div>

小型

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

大型

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<div class="uk-child-width-1-2@s" uk-grid>
    <div>
        <div class="uk-card uk-card-default uk-card-small uk-card-body">
            <h3 class="uk-card-title">Small</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-large uk-card-body">
            <h3 class="uk-card-title">Large</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </div>
</div>

您也可以將卡片分成頁首和頁尾，也就是預設內文的周圍。只需將 .uk-card-header 或 .uk-card-footer 類別新增至卡片內的 <div> 元素即可。

<div class="uk-card">
    <div class="uk-card-header">
        <h3 class="uk-card-title"></h3>
    </div>
    <div class="uk-card-body"></div>
    <div class="uk-card-footer"></div>
</div>
Avatar

標題

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

閱讀更多 
<div class="uk-card uk-card-default uk-width-1-2@m">
    <div class="uk-card-header">
        <div class="uk-grid-small uk-flex-middle" uk-grid>
            <div class="uk-width-auto">
                <img class="uk-border-circle" width="40" height="40" src="images/avatar.jpg" alt="Avatar">
            </div>
            <div class="uk-width-expand">
                <h3 class="uk-card-title uk-margin-remove-bottom">Title</h3>
                <p class="uk-text-meta uk-margin-remove-top"><time datetime="2016-04-01T19:00">April 01, 2016</time></p>
            </div>
        </div>
    </div>
    <div class="uk-card-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
    </div>
    <div class="uk-card-footer">
        <a href="#" class="uk-button uk-button-text">Read more</a>
    </div>
</div>

媒體

若要在卡片內顯示沒有任何間距的影像，請將下列其中一個類別新增至 <img> 元素周圍的 <div>。請注意，您需要相應地修改來源順序。

類別 描述
.uk-card-media-top 此類別表示媒體元素對齊頂端。
.uk-card-media-bottom 此類別表示媒體元素對齊底部。
.uk-card-media-left 此類別表示媒體元素對齊左側。
.uk-card-media-right 此類別表示媒體元素對齊右側。 
<div class="uk-card uk-card-default">
    <div class="uk-card-media-top">
        <img src="" width="" height="" alt="">
    </div>
    <div class="uk-card-body"></div>
</div>

媒體頂端

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

媒體底部

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

<div class="uk-child-width-1-2@m" uk-grid>
    <div>
        <div class="uk-card uk-card-default">
            <div class="uk-card-media-top">
                <img src="images/light.jpg" width="1800" height="1200" alt="">
            </div>
            <div class="uk-card-body">
                <h3 class="uk-card-title">Media Top</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
            </div>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-default">
            <div class="uk-card-body">
                <h3 class="uk-card-title">Media Bottom</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
            </div>
            <div class="uk-card-media-bottom">
                <img src="images/light.jpg" width="1800" height="1200" alt="">
            </div>
        </div>
    </div>
</div>

水平對齊

.uk-card-media-left 或 .uk-card-media-right 類別用於在必要時重設邊框半徑或類似項目。它們不會建立實際的版面配置。

若要執行此操作，您可以使用來自覆蓋元件的 .uk-cover-container 類別。將 uk-cover 屬性新增至影像元素，並使用格線和寬度元件來達成對齊。使用影像的寬度和高度建立 <canvas> 元素，使其在格線堆疊在較小的檢視區時保留其尺寸。這只是建立並排版面配置的一種方式。

<div class="uk-card uk-card-default uk-child-width-1-2" uk-grid>
    <div class="uk-card-media-left uk-cover-container">
        <img src="" alt="" uk-cover>
        <canvas width="" height=""></canvas>
    </div>
    <div>
        <div class="uk-card-body"></div>
    </div>
</div>

媒體左側

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

媒體右側

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

<div class="uk-card uk-card-default uk-grid-collapse uk-child-width-1-2@s uk-margin" uk-grid>
    <div class="uk-card-media-left uk-cover-container">
        <img src="images/light.jpg" alt="" uk-cover>
        <canvas width="600" height="400"></canvas>
    </div>
    <div>
        <div class="uk-card-body">
            <h3 class="uk-card-title">Media Left</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
        </div>
    </div>
</div>

<div class="uk-card uk-card-default uk-grid-collapse uk-child-width-1-2@s uk-margin" uk-grid>
    <div class="uk-flex-last@s uk-card-media-right uk-cover-container">
        <img src="images/light.jpg" alt="" uk-cover>
        <canvas width="600" height="400"></canvas>
    </div>
    <div>
        <div class="uk-card-body">
            <h3 class="uk-card-title">Media Right</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
        </div>
    </div>
</div>

徽章

若要將徽章放置在卡片內，請將 .uk-card-badge 類別新增至容器元素。若要設定徽章樣式，您可以使用其他元件之一，例如標籤。

<div class="uk-card uk-card-body">
    <div class="uk-card-badge uk-label"></div>
</div>
徽章

標題

Lorem ipsum color sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<div class="uk-card uk-card-default uk-card-body uk-width-1-2@m">
    <div class="uk-card-badge uk-label">Badge</div>
    <h3 class="uk-card-title">Title</h3>
    <p>Lorem ipsum color sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>