Separator
コンテンツのまとまりを罫線で視覚的に区切るコンポーネント。ジョブアンテナでは求人詳細のセクション区切り(横)と、求人カードで勤務地・雇用形態・給与を1行に並べるメタ情報の区切り(縦)に使う。余白だけでは境界が曖昧になる場面で、情報のグループを明確にする。
基本
orientation 未指定なら横線で幅いっぱいに伸びる。vertical を指定すると縦線になり、テキストの並びに合わせて h-4 などで高さを揃える。
求人カード
求人カードのメタ情報(那覇市 / 正社員 / 月給 25万円)を縦線で区切る例。スラッシュや中黒より境界がはっきりし、項目の追加・削除にも崩れない。
求人詳細のセクション
仕事の内容・給与・待遇・勤務情報といったセクションの間に横線を入れる例。見出しだけに頼らず、読み進める単位を明確にする。
求人票の統計
閲覧・応募・いいかもの統計を縦線で3等分する例。縦線は高さを指定しないと self-stretch で親要素の高さいっぱいに伸びるため、ブロック同士の区切りにそのまま使える。