Separator

コンテンツのまとまりを罫線で視覚的に区切るコンポーネント。ジョブアンテナでは求人詳細のセクション区切り(横)と、求人カードで勤務地・雇用形態・給与を1行に並べるメタ情報の区切り(縦)に使う。余白だけでは境界が曖昧になる場面で、情報のグループを明確にする。

基本

orientation 未指定なら横線で幅いっぱいに伸びる。vertical を指定すると縦線になり、テキストの並びに合わせて h-4 などで高さを揃える。

求人カード

求人カードのメタ情報(那覇市 / 正社員 / 月給 25万円)を縦線で区切る例。スラッシュや中黒より境界がはっきりし、項目の追加・削除にも崩れない。

求人詳細のセクション

仕事の内容・給与・待遇・勤務情報といったセクションの間に横線を入れる例。見出しだけに頼らず、読み進める単位を明確にする。

求人票の統計

閲覧・応募・いいかもの統計を縦線で3等分する例。縦線は高さを指定しないと self-stretch で親要素の高さいっぱいに伸びるため、ブロック同士の区切りにそのまま使える。