跳到主要内容

文档

卡片

使用不同的样式创建布局框。

用法

卡片组件由卡片本身、卡片主体和可选的卡片标题组成。通常，卡片从栅格组件排列在网格列中。

类 描述
.uk-card 将此class添加到<div>元素以定义卡片组件。
.uk-card-body 将此class添加到卡片，以在卡片及其内容之间创建内边距。
.uk-card-title 将此class添加到标题以定义卡片标题。 
<div class="uk-card uk-card-body">
    <h3 class="uk-card-title"></h3>
</div>

默认情况下，卡片是空白的。这就是为什么添加用于样式的修饰符class很重要。在我们的示例中，我们使用的是.uk-card-default class。

默认

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 添加此class以创建一个视觉样式的框。
.uk-card-primary 添加此class以修改卡片并用主色强调它。
.uk-card-secondary 添加此class以修改卡片并为其提供辅助背景颜色。 
<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 class。这在处理锚点时非常方便，并且可以与其他卡片修饰符结合使用。

<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 添加此class以应用较小的内边距。
.uk-card-large 添加此class以应用较大的内边距。 
<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 class添加到卡片内的<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>

媒体

要在卡片内显示图像而没有任何间距，请将以下class之一添加到<img>元素周围的<div>。请注意，您需要相应地修改源顺序。

类 描述
.uk-card-media-top 此class表示媒体元素与顶部对齐。
.uk-card-media-bottom 此class表示媒体元素与底部对齐。
.uk-card-media-left 此class表示媒体元素与左侧对齐。
.uk-card-media-right 此class表示媒体元素与右侧对齐。 
<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 class用于在必要时重置边框半径或类似内容。它们不会创建实际的布局。

为此，您可以例如从覆盖组件添加.uk-cover-container class。将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 class添加到容器元素。要设置徽章的样式，您可以使用其他组件之一，例如标签。

<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>