Cards

Cards 是一個容器,與 Panels 相似,主要區別在於 Cards 用來製作像是 Widget 組件,適合用在 Mobile 上。所有跟 Cards 有關的元件將會以 .card-為開頭。

預設樣式

<div> 加上 .card,而內容元件可以使用 .card-box 來放置內容。

臺灣是位於亞洲東部、太平洋西北側的島嶼,地處琉球群島與菲律賓群島之間,西隔臺灣海峽與歐亞大陸相望;面積約3.6萬平方公里, 為世界第38大島嶼,其中7成為山地與丘陵,平原則主要集中於西部沿海,地形海拔變化大。由於地處熱帶及亞熱帶氣候區之交界,自然景觀與生態系資源相當豐富而多元。

<div class="card">
    <div class="card-box">
        <p>臺灣是位於亞洲東部、太平洋西北側的島嶼,地處琉球群島與菲律賓群島之間,西隔臺灣海峽與歐亞大陸相望;面積約3.6萬平方公里, 為世界第38大島嶼,其中7成為山地與丘陵,平原則主要集中於西部沿海,地形海拔變化大。由於地處熱帶及亞熱帶氣候區之交界,自然景觀與生態系資源相當豐富而多元。</p>
    </div>
</div>

你也可以放置更多不同的內容,例如標題或是連結。

臺灣 - 維基百科

臺灣是位於亞洲東部、太平洋西北側的島嶼,地處琉球群島與菲律賓群島之間,西隔臺灣海峽與歐亞大陸相望;面積約3.6萬平方公里, 為世界第38大島嶼,其中7成為山地與丘陵,平原則主要集中於西部沿海,地形海拔變化大。由於地處熱帶及亞熱帶氣候區之交界,自然景觀與生態系資源相當豐富而多元。

維基百科
<div class="card">
    <div class="card-box">
        <h4>臺灣 - 維基百科<h4>
        <p>臺灣是位於亞洲東部、太平洋西北側的島嶼,地處琉球群島與菲律賓群島之間,西隔臺灣海峽與歐亞大陸相望;面積約3.6萬平方公里, 為世界第38大島嶼,其中7成為山地與丘陵,平原則主要集中於西部沿海,地形海拔變化大。由於地處熱帶及亞熱帶氣候區之交界,自然景觀與生態系資源相當豐富而多元。</p>
        <a class="card-link">維基百科</a>
    </div>
</div>

放置圖片時,請在圖片加上 .card-img (圖片來源:是我家的米漿,沒有版權問題)

Lion Hat for Cats

This furry, handmade pet hat turns your cat or small dog into a lion, the king of animals!

More
<div class="card">
    <img class="card-img" src="img/demo1.jpg" />
    <div class="card-box">
        <h4>Lion hat for Cats<h4>
        <p>This furry, handmade pet hat turns your cat or small dog into a lion, the king of animals!</p>
        <a class="btn" href="https://goo.gl/8c6szP" target="_blank">More</a>
    </div>
</div>

Cards 與 List Groups

可以將 List Groups 模組放至 .card 內。

Lion Hat for Cats

This furry, handmade pet hat turns your cat or small dog into a lion, the king of animals!

<div class="card">
    <img class="card-img" src="img/demo1.jpg">
    <div class="card-box">
        <h4>Lion Hat for Cats</h4>
        <p>This furry, handmade pet hat turns your cat or small dog into a lion, the king of animals!</p>
    </div>
    <div class="list-grp">
        <a class="list-grp-item">Item</a>
        <a class="list-grp-item">Item</a>
        <a class="list-grp-item">Item</a>
    </div>
    <div class="card-box">
        <a class="btn color-primary">Button</a>
    </div>
</div>

Header 與 Footer

在 Card 裡除了 .card-box 之外,還可以設置 .card-header.card-footer

Card Title

Lion Hat for Cats

This furry, handmade pet hat turns your cat or small dog into a lion, the king of animals!

<div class="card">
    <div class="card-header">
        <h3 class="card-title">Card Title</h3>
    </div>
    <div class="card-box">
        <h4>Lion Hat for Cats</h4>
        <p>This furry, handmade pet hat turns your cat or small dog into a lion, the king of animals!</p>
    </div>
    <div class="card-footer">Card Footer</div>
</div>

Toolbar

如果需要放置一個工具列時,可以在 .card 裡增加 .card-toolbar 的元件。

Card Title

Now is empty.

<div class="card">
    <div class="card-header">
        <h3 class="card-title">Card Title</h3>
    </div>
    <form class="card-box card-toolbar">
        <input type="text" class="ctrl-input" />
        <button class="btn color-common pull-right">Filter</button>
    </form>
    <div class="empty-tip">
        <p>Now is empty.</p>
    </div>
    <div class="card-footer">Card Footer</div>
</div>

Cards 與 Flex Media

Beethoven: Symphony No.7

The Symphony No. 7 in A major, Op. 92, is a symphony in four movements composed by Ludwig van Beethoven between 1811 and 1812, while improving his health in the Bohemian spa town of Teplice. The work is dedicated to Count Moritz von Fries.

<div class="card">
    <div class="flex-media">
        <iframe src="https://www.youtube.com/embed/KbNGklNz8Yk"></iframe>
    </div>
    <div class="card-box">
        <h4>Beethoven: Symphony No.7</h4>
        <p>The Symphony No. 7 in A major, Op. 92, is a symphony in four movements composed by Ludwig van Beethoven between 1811 and 1812, while improving his health in the Bohemian spa town of Teplice. The work is dedicated to Count Moritz von Fries.</p>
    </div>
</div>

Cards 與 Thumbnails

你可以將 Thumbnails放置於 .card 內。

Card Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia commodi quisquam accusantium tempora quidem sunt adipisci doloremque reiciendis, debitis suscipit?

米漿跟豆漿

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis, neque?

Button
<div class="card">
    <div class="card-box">
        <h4>Card Title</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia commodi quisquam accusantium tempora quidem sunt adipisci doloremque reiciendis, debitis suscipit?</p>
    </div>
    <div class="thumb fadein">
        <img class="thumb-img" src="img/demo3.jpg">
        <div class="thumb-overlay">
            <div class="thumb-content">
                <h4>米漿跟豆漿</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis, neque?</p>
                <a class="btn-outline">Button</a>
            </div>
        </div>
    </div>
</div>

Colors

你可以為 Cards 搭配顏色,只要為 .card 加上 .color-* 即可。

Card Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, in! Molestiae, nemo!

Button

Card Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, in! Molestiae, nemo!

Button

Card Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, in! Molestiae, nemo!

Button

Card Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, in! Molestiae, nemo!

Button

Card Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, in! Molestiae, nemo!

Button

Card Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, in! Molestiae, nemo!

Button

Card Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, in! Molestiae, nemo!

Button
<div class="card color-primary">~略~</div>
<div class="card color-secondary">~略~</div>
<div class="card color-focus">~略~</div>
<div class="card color-common">~略~</div>
<div class="card color-success">~略~</div>
<div class="card color-warning">~略~</div>
<div class="card color-error">~略~</div>