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-10-15 07:13

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 f-col@md:5"></div> <div class="infoitem_col :fluid f-col"></div> </div>

Horizontal & Vertical

.infoitem 預設為垂直排列,當螢幕寬度達 768px 時則會自動轉換為水平排列。若是要維持垂直排列,可加上 .:vertical;維持水平排列則使用 .:horizontal

Info Item Title

meta1 meta2 2020-10-15 07:13

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 :horizontal"> <div class="infoitem_col :fixed f-col@md:5"></div> <div class="infoitem_col :fluid f-col"></div> </div>