コンテンツの区切り

Example#

Props#

<hr>要素をベースにしています。 表にない属性もprop経由で使用できます(classNameは除く)。

NameTypeDefaultDescription
border
'black'
'blue'
'pink'
'black'ボーダーの種類
data-*
optional
string-Custom data attributes
m
optional
'xxs'
'xs'
'sm'
-四方のマージンを一括で設定。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
maxWidth
optional
'none'
'cap'
'ch'
-最大幅
mb
optional
'xxs'
'xs'
'sm'
-下方向のマージン。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
minWidth
optional
'auto'
'cap'
'ch'
-最小幅
ml
optional
'xxs'
'xs'
'sm'
-左方向のマージン。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
mr
optional
'xxs'
'xs'
'sm'
-右方向のマージン。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
mt
optional
'xxs'
'xs'
'sm'
-上方向のマージン。Spacing Tokenのキーを指定
mx
optional
'xxs'
'xs'
'sm'
-水平方向のマージンを一括で設定。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
my
optional
'xxs'
'xs'
'sm'
-垂直方向のマージンを一括で設定。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
width
optional
'auto'
'cap'
'ch'
-幅を指定

Feature#

主にコンテンツの区切り等で使用します