Info Item

用於複合資料組合的組件。Info Item 由一個或多個 .infoitem_col 組成,使得內容的展示可以更加彈性。使用類別為 .infoitem 並以此為子元件前綴詞。針對不同語系可以在 .infoitem 加上 [lang="{zh/ja/en}"]

zh

Grand Maison東京:一起進入華麗璀璨的法國料理世界吧!

口袋日本 雪奈 2019.12.17

由「木村拓哉」領銜主演的《Grand Maison東京》(グランメゾン東京)(中文劇名:型男主廚三星夢、天才主廚餐廳)絕對是今年秋季檔最火紅的日劇!甚至許多原本不看日劇的觀眾紛紛入坑,每個禮拜都看得欲罷不能、意猶未盡,完全陶醉在華麗璀璨的法國料理世界,更被熱血沸騰的故事所打動。


ja

グランメゾン東京 第10話

Wikipedia 2019年12月17日 (火) 10:36

尾花(木村拓哉)はリンダ(冨永愛)の告発によって「gaku」を去ることになった祥平(玉森裕太)を「グランメゾン東京」に誘う。店に迷惑がかかるからと断る祥平だったが、京野をはじめとした店のメンバーは、ある方法を思いつく。


en

La Grande Maison Tokyo

AsiaWiki Oct 19 2019 10:58 pm

Natsuki Obana (Takuya Kimura) is a chef, specializing in French cuisine. He runs a restaurant in Paris that has earned 2 stars from Michelin Guide. Natsuki Obana is confident, but he suffers from pressure trying to attain 3 stars. An unexpected case takes place. Due to that, he loses his restaurant and colleagues. Under a very difficult situation, he meets female chef Rinko Hayami (Kyoka Suzuki). They decide to start a restaurant together and struggle to make the restaurant 3 stars.

<div class="infoitem"> <div class="infoitem_col"> <h4 class="infoitem_title"></h4> <div class="meta"></div> <p class="infoitem_txt"></p> </div> </div>

Fixed & Fluid

需要多個 .infoitem_col 時需要設定每一個容器寬度對應關係,可以使用 Fixed 與 Fluid 來決定哪一個容器需要隨彈性縮減。Fluid 會依照當下情況縮減自身寬度,Fixed 則維持比例或是給予的絕對單位。使用方式為在 .infoitem_col 加上 :fixed:fluid 即可。

寬度的設定可以使用 Utilities 的寬度值或是套用 Grid System 的 Column。

Info Item Title

meta1 meta2 2020-07-05 01:39

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium consectetur, deserunt eligendi enim eum facilis id labore nam nobis odio quasi repellat sequi temporibus ullam, vel. Et maiores molestiae quod?

<div class="infoitem f-row"> <div class="infoitem_col :fixed [email protected]:5"></div> <div class="infoitem_col :fluid f-col"></div> </div>

Info Label

Info Label 是 Info Item 的簡易版,主要用於條列簡易的訊息。使用類別為 .infolabel 並以此為子元件前綴詞。 Infolabel 主要由項目名稱 .infolabel_key 與項目資料值 .infolabel_value 所組成。排列順序可自由調整。

抵達機場
桃園國際機場
抵達台灣的日期與時間
2018-10-27 09:00
下車地點
基隆市 仁愛區 xxxx

196
PHOTOS
96K
FOLLOWS
765
FOLLOWING
<div class="infolabel"> <div class="infolabel_key"></div> <div class="infolabel_value"></div> </div>

配色

可使用 Utilities 的配色類別增添色彩。

抵達機場
桃園國際機場
抵達台灣的日期與時間
2018-10-27 09:00
下車地點
基隆市 仁愛區 xxxx

196
PHOTOS
96K
FOLLOWS
765
FOLLOWING
<div class="infolabel u-clr:{color}"></div>