Divider
Semantic UI の Divider を読んだ。Divider にテーマはない。
Divider とはコンテンツを分断する線のこと。縦に並ぶコンテンツを分断する水平線は .ui.divider で表示する(ラベル付きの水平線にしたければ .ui.horizontal.divider を指定する)。横に並ぶコンテンツを分断する垂直線は .ui.vertical.divider で表示する。垂直線の場合は親要素に position: relative の指定が必要になる。
線と一緒にアイコンを表示することもできる。
<!-- "Description" の左横にアイコンを表示する --> <h4 class="ui horizontal divider header"> <i class="tag icon"></i> Description </h4>
黒背景で使うための反転クラス .ui.divider.inverted や、上下のマージンを取り除いた .ui.fitted.divider 、マージンを広く取る .ui.section.divider 、視覚的に線を非表示にする .ui.hidden.divider 、Clearfix の機能を備えた .ui.clearing.divider がある。
Flag
Semantic UI の Flag を読んだ。Flag にテーマはない。
.flag クラスと国の名前、または ISO 3166-2 コードを指定することでアイコンフォントの国旗を表示する。
<!-- 国の名前と flag クラスで表示 --> <i class="andorra flag"></i> <!-- ISO 3166-2 コードと flag クラスで表示 --> <i class="ad flag"></i>
Flag のページには国の一覧があるので、表示したい国旗のコードがわからないときはこのページを確認すると良い。