@tower1229/flow-ui/dashboard/card.html

Highly customizable UI framework based Seajs/jQuery

<div class="p">
    <div class="row">
        <div class="span-4 m-b">
            <div class="card card-bordered">
                <div class="card-head">
                    <div class="card-title">卡片标题</div>
                </div>
                <div class="card-body">
                    许多年过去了，人们说陈年旧事可以被埋葬，然而我终于明白这是错的，因为往事会自行爬上来。回首前尘，我意识到在过去二十六年里，自己始终在窥视着那荒芜的小径。
                </div>
            </div>
        </div>
        <div class="span-4 m-b">
            <div class="card card-bordered">
                <div class="card-head">
                    <div class="card-title">卡片标题</div>
                    <div class="card-extra">
                        <a href="###" class="btn btn-primary btn-sm">按钮</a>
                    </div>
                </div>
                <div class="card-body">
                    许多年过去了，人们说陈年旧事可以被埋葬，然而我终于明白这是错的，因为往事会自行爬上来。回首前尘，我意识到在过去二十六年里，自己始终在窥视着那荒芜的小径。
                </div>
            </div>
        </div>
        <div class="span-4 m-b">
            <div class="card card-bordered">
                <div class="card-body">
                    许多年过去了，人们说陈年旧事可以被埋葬，然而我终于明白这是错的，因为往事会自行爬上来。回首前尘，我意识到在过去二十六年里，自己始终在窥视着那荒芜的小径。
                </div>
                <div class="card-foot">
                    <span class="r"><a href="###" class="btn btn-link">链接</a></span>
                    <p>卡片底部</p>
                </div>
            </div>
        </div>
        <div class="span-4 m-b">
            <div class="card card-primary">
                <div class="card-head">
                    <div class="card-title">色彩卡片</div>
                </div>
                <div class="card-body">
                    许多年过去了，人们说陈年旧事可以被埋葬，然而我终于明白这是错的，因为往事会自行爬上来。回首前尘，我意识到在过去二十六年里，自己始终在窥视着那荒芜的小径。
                </div>
            </div>
        </div>
        <div class="span-4 m-b">
            <div class="card card-success">
                <div class="card-head">
                    <div class="card-title">色彩卡片</div>
                </div>
                <div class="card-body">
                    许多年过去了，人们说陈年旧事可以被埋葬，然而我终于明白这是错的，因为往事会自行爬上来。回首前尘，我意识到在过去二十六年里，自己始终在窥视着那荒芜的小径。
                </div>
            </div>
        </div>
        <div class="span-4 m-b">
            <div class="card card-info">
                <div class="card-head">
                    <div class="card-title">色彩卡片</div>
                </div>
                <div class="card-body">
                    许多年过去了，人们说陈年旧事可以被埋葬，然而我终于明白这是错的，因为往事会自行爬上来。回首前尘，我意识到在过去二十六年里，自己始终在窥视着那荒芜的小径。
                </div>
            </div>
        </div>
        <div class="span-4 m-b">
            <div class="card card-primary card-inverse">
                <div class="card-head">
                    <div class="card-title">反转色彩</div>
                </div>
                <div class="card-body">
                    许多年过去了，人们说陈年旧事可以被埋葬，然而我终于明白这是错的，因为往事会自行爬上来。回首前尘，我意识到在过去二十六年里，自己始终在窥视着那荒芜的小径。
                </div>
            </div>
        </div>
        <div class="span-4 m-b">
            <div class="card card-success card-inverse">
                <div class="card-head">
                    <div class="card-title">反转色彩</div>
                </div>
                <div class="card-body">
                    许多年过去了，人们说陈年旧事可以被埋葬，然而我终于明白这是错的，因为往事会自行爬上来。回首前尘，我意识到在过去二十六年里，自己始终在窥视着那荒芜的小径。
                </div>
            </div>
        </div>
        <div class="span-4 m-b">
            <div class="card card-info card-inverse">
                <div class="card-head">
                    <div class="card-title">反转色彩</div>
                </div>
                <div class="card-body">
                    许多年过去了，人们说陈年旧事可以被埋葬，然而我终于明白这是错的，因为往事会自行爬上来。回首前尘，我意识到在过去二十六年里，自己始终在窥视着那荒芜的小径。
                </div>
            </div>
        </div>
    </div>
</div>