93 行
2.0 KiB
SCSS
93 行
2.0 KiB
SCSS
/* #Card
|
|
-------------------------------------------------------------------------- */
|
|
/*doc
|
|
---
|
|
title: card
|
|
name: card
|
|
categories: [project]
|
|
---
|
|
|
|
カードタイプのコンポーネントです。
|
|
|
|
```block
|
|
<div class="c-layout c-layout--small">
|
|
<div class="c-layout__item u-6of12-md">
|
|
<div class="p-card">
|
|
<img src="http://lorempixel.com/640/340/" class="p-card__image-top">
|
|
<div class="p-card__body">
|
|
<h2>Card Object</h2>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat illo autem, possimus obcaecati numquam sunt ut quas, repellat cum aspernatur voluptatem, a explicabo! Facilis sed quos, nisi rerum placeat ad?</p>
|
|
</div>
|
|
<ul class="p-card__list">
|
|
<li class="p-card__list-item">list1</li>
|
|
<li class="p-card__list-item">list2</li>
|
|
</ul>
|
|
<div class="p-card__foot">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, est.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="c-layout__item u-6of12-md">
|
|
<div class="p-card">
|
|
<div class="p-card__head">
|
|
<h2>Card Object</h2>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat illo autem, possimus obcaecati numquam sunt ut quas, repellat cum aspernatur voluptatem, a explicabo! Facilis sed quos, nisi rerum placeat ad?</p>
|
|
</div>
|
|
<ul class="p-card__list">
|
|
<li class="p-card__list-item">list1</li>
|
|
<li class="p-card__list-item">list2</li>
|
|
</ul>
|
|
<img src="http://lorempixel.com/640/340/" class="p-card__image-bottom">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
```
|
|
*/
|
|
|
|
.p-card {
|
|
}
|
|
|
|
.p-card__head {
|
|
> :last-child {
|
|
}
|
|
}
|
|
|
|
.p-card__body {
|
|
> :last-child {
|
|
}
|
|
}
|
|
|
|
.p-card__foot {
|
|
> :last-child {
|
|
}
|
|
}
|
|
|
|
.p-card__image,
|
|
.p-card__image-top,
|
|
.p-card__image-bottom {
|
|
max-width: none;
|
|
width: 100%;
|
|
}
|
|
|
|
.p-card__head,
|
|
.p-card__image-top {
|
|
}
|
|
|
|
.p-card__foot,
|
|
.p-card__image-bottom {
|
|
}
|
|
|
|
.p-card__list {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style-type: none;
|
|
}
|
|
|
|
.p-card__list-item {
|
|
}
|
|
|
|
.p-card__list-link {
|
|
display: block;
|
|
}
|