Semantic UI Doc ( Elements - Divider, Flag ) を読む

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 のページには国の一覧があるので、表示したい国旗のコードがわからないときはこのページを確認すると良い。