Item · ui.voila.dev

Landing page redesign

Designer needed for the marketing site refresh, June 14 through June 18.

<Item.Root variant="outline">
	<Item.Media variant="icon"><CalendarCheckIcon /></Item.Media>
	<Item.Content>
		<Item.Title>Landing page redesign</Item.Title>
		<Item.Description>Product designer needed for…</Item.Description>
	</Item.Content>
	<Item.Actions>
		<Button size="sm" variant="outline">Apply</Button>
	</Item.Actions>
</Item.Root>

One row on its own. For several, List wraps the same parts in the right list semantics.

API

Item.Root

Prop	Type	Default
`size`	`"default" \| "sm" \| "xs"`	`"default"`
`variant`	`"default" \| "muted" \| "outline"`	`"default"`
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus every <div> prop. Source: item/components/item-root.tsx.

Item.Actions

Prop	Type	Default
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus every <div> prop. Source: item/components/item-actions.tsx.

Item.Content

Prop	Type	Default
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus every <div> prop. Source: item/components/item-content.tsx.

Item.Description

Prop	Type	Default
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus every <p> prop. Source: item/components/item-description.tsx.

Item.Footer

Prop	Type	Default
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus every <div> prop. Source: item/components/item-footer.tsx.

Item.Group

Prop	Type	Default
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus every <div> prop. Source: item/components/item-group.tsx.

Item.Header

Prop	Type	Default
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus every <div> prop. Source: item/components/item-header.tsx.

Item.Media

Prop	Type	Default
`variant`	`"default" \| "icon" \| "image"`	`"default"`
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus every <div> prop. Source: item/components/item-media.tsx.

Item.Separator

Prop	Type	Default
`className`	`string` \| `((state: SeparatorState) => string` \| `undefined)`	—	CSS class applied to the element, or a function that returns a class based on the component's state.
`orientation`	`Orientation`	—	The orientation of the separator.
`render`	`ComponentRenderFn<HTMLProps, SeparatorState>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
`style`	`CSSProperties` \| `((state: SeparatorState) => CSSProperties` \| `undefined)`	—	Style applied to the element, or a function that returns a style object based on the component's state.

Plus the DOM props of the element it renders. Source: item/components/item-separator.tsx.

Item.Title

Prop	Type	Default
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus every <span> prop. Source: item/components/item-title.tsx.