Marker

アイコンと短いテキストを1行にまとめて示すメタ情報コンポーネント。default はラベル行、separator は左右罫線付きの区切り、border は下罫線付きの見出しとして使い分ける。ジョブアンテナでは求人カードの勤務地・雇用形態・給与の表示や、メッセージ一覧の日付区切りに使う。

基本

default / separator / border の3バリアント。MarkerIcon にアイコン、MarkerContent にテキストを入れる。separator は中央のテキストの左右に罫線が伸びる。

求人カードで勤務地・雇用形態・給与・最終更新を縦に並べる例。アイコン幅が揃うため、行数が変わっても視線が縦にまっすぐ通る。

メッセージ一覧に separator バリアントで日付と未読の境界を挿入する例。未読境界は className で文字色と罫線色を destructive に上書きして注意を引く。

求人詳細ページで border バリアントをセクション見出しに使う例。既定の muted な文字色を text-foreground と font-medium に上書きして本文と階層をつける。