Skip to Content
DocumentationLayout PrimitivesDecorator

Decorator

Decorative blocks. Color, padding, position, etc. can be set.

Usage

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill

<div data-unitone-layout="decorator">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill
</div>

Props

HTML —unitone—background-color / JSX backgroundColor={value}

Background color.

<div data-unitone-layout="decorator" style="--unitone--background-color: #2e1065; --unitone--color: #fff">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill
</div>

HTML —unitone—color / JSX color={value}

Color.

<div data-unitone-layout="decorator" style="--unitone--color: #8b5cf6">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill
</div>

Border

Border.

  • HTML --unitone--border-color / JSX borderColor=\{value\}
  • HTML --unitone--border-width / JSX borderWidth=\{value\}
  • HTML --unitone--border-radius / JSX borderRadius=\{value\}
<div data-unitone-layout="decorator" style="--unitone--border-color: #8b5cf6; --unitone--border-width: 1px; --unitone--border-radius: var(--unitone--global--border-radius)">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill
</div>

HTML —unitone—max-height / JSX maxHeigth={value}

Max height.

<div data-unitone-layout="decorator -overflow: auto" style="--unitone--max-height: 50px">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill
</div>

HTML —unitone—min-height / JSX minHeigth={value}

Min height.

<div data-unitone-layout="decorator -overflow: auto" style="--unitone--min-height: 400px">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill
</div>

HTML -gap:{variation} / JSX gap={variation}

Gap.

Can be set from -2 to 7. For variations 2 and above, clamp is used to adjust the margins so that they do not become too large on small screens. If it is 1 or more, adding s will shrink it to size -1 on mobile. (e.g. 1s) If it is 2 or more, adding m will shrink it to size 1 on mobile. (e.g. 2m)

<div data-unitone-layout="decorator -gap:1">
	<div style="outline: 1px dotted #6366f1, padding: 1em">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit,
	</div>
	<div style="outline: 1px dotted #6366f1, padding: 1em">
		sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
	</div>
</div>

HTML -align-content:{value} / JSX alignContent={value}

Align content.

start / center / end / space-between / space-around / space-evenly / stretch

<div data-unitone-layout="decorator -align-content:center" style="--unitone--min-height: 400px">
	<div style="outline: 1px dotted #6366f1, padding: 1em">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit,
	</div>
	<div style="outline: 1px dotted #6366f1, padding: 1em">
		sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
	</div>
</div>

HTML -justify-items:{value} / JSX justifyItems={value}

Justify items.

start / center / end / stretch

<div data-unitone-layout="decorator -justify-items:center">
	<div style="outline: 1px dotted #6366f1, padding: 1em">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit,
	</div>
	<div style="outline: 1px dotted #6366f1, padding: 1em">
		sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
	</div>
</div>

HTML -padding:{variation} / JSX padding={variation}

Padding.

Can be set from -2 to 7. For variations 2 and above, clamp is used to adjust the margins so that they do not become too large on small screens. If it is 1 or more, adding s will shrink it to size -1 on mobile. (e.g. 1s) If it is 2 or more, adding m will shrink it to size 1 on mobile. (e.g. 2m)

<div data-unitone-layout="decorator -padding:1" style="--unitone--background-color: #2e1065;--unitone--color: #fff">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill
</div>

HTML -padding-top:{variation} / JSX paddingTop={variation}

Padding top.

Can be set from -2 to 7. For variations 2 and above, clamp is used to adjust the margins so that they do not become too large on small screens. If it is 1 or more, adding s will shrink it to size -1 on mobile. (e.g. 1s) If it is 2 or more, adding m will shrink it to size 1 on mobile. (e.g. 2m)

<div data-unitone-layout="decorator -padding-top:1" style="--unitone--background-color: #2e1065;--unitone--color: #fff">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill
</div>

HTML -padding-right:{variation} / JSX paddingRight={variation}

Padding right.

Can be set from -2 to 7. For variations 2 and above, clamp is used to adjust the margins so that they do not become too large on small screens. If it is 1 or more, adding s will shrink it to size -1 on mobile. (e.g. 1s) If it is 2 or more, adding m will shrink it to size 1 on mobile. (e.g. 2m)

<div data-unitone-layout="decorator -padding-right:1" style="--unitone--background-color: #2e1065;--unitone--color: #fff">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill
</div>

HTML -padding-bottom:{variation} / JSX paddingBottom={variation}

Padding bottom.

Can be set from -2 to 7. For variations 2 and above, clamp is used to adjust the margins so that they do not become too large on small screens. If it is 1 or more, adding s will shrink it to size -1 on mobile. (e.g. 1s) If it is 2 or more, adding m will shrink it to size 1 on mobile. (e.g. 2m)

<div data-unitone-layout="decorator -padding-bottom:1" style="--unitone--background-color: #2e1065;--unitone--color: #fff">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill
</div>

HTML -padding-left:{variation} / JSX paddingLeft={variation}

Padding left.

Can be set from -2 to 7. For variations 2 and above, clamp is used to adjust the margins so that they do not become too large on small screens. If it is 1 or more, adding s will shrink it to size -1 on mobile. (e.g. 1s) If it is 2 or more, adding m will shrink it to size 1 on mobile. (e.g. 2m)

<div data-unitone-layout="decorator -padding-left:1" style="--unitone--background-color: #2e1065;--unitone--color: #fff">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill
</div>

HTML -position:{value} / JSX position={value}

Position.

static / relative / absolute / sticky / fixed

<div data-unitone-layout="decorator -position:relative" style="--unitone--top: 0; --unitone--right: 0; --unitone--bottom: 0; --unitone--left: 5em; --unitone--z-index: 1">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill
</div>

HTML -overflow:{value} / JSX overflow={value}

Overflow.

visible / hidden / scroll / auto / clip

<div data-unitone-layout="decorator -overflow:hidden">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill
</div>

HTML -shadow / JSX shadow

Add the box shadow.

<div data-unitone-layout="decorator -shadow -padding:1" style="--unitone--background-color: #fff; --unitone--color: #111">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill
</div>

Backdrop filter

Backdrop filter.

  • HTML --unitone--backdrop / JSX backdropFilter=\{value\}
<div data-unitone-layout="layers" -cover>
	<img src="https://placehold.jp/1024x768.jpg" alt="" />
 
	<div data-unitone-layout="decorator" style="--unitone--backdrop-filter: blur(6px)">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill
	</div>
</div>

Progressive backdrop filter

Progressive backdrop filter.

  • HTML -progressive-backdrop-filter / JSX progressiveBackdropFilter
  • HTML --unitone--progressive-backdrop-filter-angle / JSX progressiveBackdropFilterAngle=\{value\}
  • HTML --unitone--progressive-backdrop-filter-start / JSX progressiveBackdropFilterStart=\{value\}
<div data-unitone-layout="layers" -cover>
	<img src="https://placehold.jp/1024x768.jpg" alt="" />
 
	<div data-unitone-layout="decorator -progressiveBackdropFilter" style="--unitone--backdrop-filter: blur(6px); --unitone--progressive-backdrop-filter-angle: 180deg; --unitone--progressive-backdrop-filter-start: 50%">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill
	</div>
</div>
Last updated on
CoverFloat