Skip to main content

卡片(Card)

简单的卡片#

Lorem Ipsum

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


<div class="card-demo">
<div class="card">
<div class="card__header">
<h3>Lorem Ipsum</h3>
</div>
<div class="card__body">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Quis ipsum
suspendisse ultrices gravida.
</p>
</div>
<div class="card__footer">
<button class="button button--secondary button--block">See All</button>
</div>
</div>
</div>

信息流#

Jared Palmer

Consultant, Speaker, Lead Engineer
Image alt text

<div class="card-demo">
<div class="card">
<div class="card__header">
<div class="avatar">
<img
class="avatar__photo"
src="https://avatars1.githubusercontent.com/u/4060187?s=460&amp;v=4"
/>
<div class="avatar__intro">
<h4 class="avatar__name">Jared Palmer</h4>
<small class="avatar__subtitle">
Consultant, Speaker, Lead Engineer
</small>
</div>
</div>
</div>
<div class="card__image">
<img
src="https://images.unsplash.com/photo-1501619951397-5ba40d0f75da?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1655&amp;q=80"
alt="Image alt text"
title="Logo Title Text 1"
/>
</div>
<div class="card__footer">
<div class="button-group button-group--block">
<button class="button button--secondary">Like</button>
<button class="button button--secondary">Comment</button>
<button class="button button--secondary">Share</button>
</div>
</div>
</div>
</div>

突出图片#

Image alt text

Quaco Lighthouse

The Quaco Head Lighthouse is a well maintained lighthouse close to St. Martins. It is a short, beautiful walk to the lighthouse along the seashore.

<div class="card-demo">
<div class="card">
<div class="card__image">
<img
src="https://images.unsplash.com/photo-1506624183912-c602f4a21ca7?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60"
alt="Image alt text"
title="Logo Title Text 1"
/>
</div>
<div class="card__body">
<h4>Quaco Lighthouse</h4>
<small>
The Quaco Head Lighthouse is a well maintained lighthouse close to St.
Martins. It is a short, beautiful walk to the lighthouse along the
seashore.
</small>
</div>
<div class="card__footer">
<button class="button button--primary button--block">Visit</button>
</div>
</div>
</div>