SOURCE

console 命令行工具 X clear

                    
>
console
<div class="container" data-ripple>
    <h3 class="card-title">
        Material 卡片
    </h3>
    <section class="card-wrap">
        <header>
            <h3>
                Material Design卡片
            </h3>
            <span>
                ——拟物小卡片
            </span>
        </header>
        <article>
            简单的Material Design阴影效果
        </article>
        <footer>
            <span class="icon-clock clock">
                2017年04月25日
            </span>
            <span class="icon-like like">
                20
            </span>
        </footer>
    </section>
</div>
html {
    font-family: sans-serif;
}

.container {
    width: calc(100%-30px);
    height: 350px;
    background: white;
    display: flex;
    flex-direction: column;
    padding: 0 15px 15px;
    align-items: center;
}

.card-title {
    border-bottom: 2px solid #eee;
    font-weight: normal;
    text-align: center;
}

.card-wrap {
    display: flex;
    height: 275px;
    width: 232px;
    flex-direction: column;
    transition: all .5s ease;
    border-radius: 2px;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0, 0, 0, .3);
}

.card-wrap:hover {
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
    transform: translate3d(0, -4px, 0);
}

.card-wrap header {
    flex: 150;
    background: #3388E4;
    display: flex;
    padding: 25px 20px 0;
    flex-direction: column;
    color: white;
}

.card-wrap header h3 {
    align-self: center;
    font-weight: normal;
}

.card-wrap header span {
    align-self: flex-end;
    font-size: 14px;
}

.card-wrap article,
.card-wrap footer {
    color: #222;
}

.card-wrap article {
    flex: 100;
    padding: 15px;
    font-size: 14px;
}

.card-wrap footer {
    flex: 25;
    display: flex;
    padding: 5px 15px;
    flex-direction: row;
}

.card-wrap footer span {
    font-size: 9px;
}

.card-wrap footer .clock {
    flex: 1.5;
}

.card-wrap footer .like {
    flex: 0.5;
    text-align: right;
}

本项目引用的自定义外部资源