Item Layout

Storybook

An item layout provides a standardized group of containers to enable developer to use list-item like stack. It is used as base for `dt-list-item` component

Preview

With Default Styling

By default, item layout includes custom styling, like paddings, sizes, colors, etc.

Without Styling

Setting the unstyled property will add d-item-layout--custom class. This will change the item-layout from flexbox to grid, removing all the custom styling while maintaining the slots positions.

This way you can utilize the layout and customize your own styling using utility classes.

Vue API

Slots

Name	Description
bottom	Slot for content below subtitle
default	Slot for main content
left	Slot for left content
right	Slot for right content
selected	Slot for selected icon
subtitle	Slot for content below main content

Props

Name	Description	Default
as	Set this prop to render layout as a specific HTML element. Type: string	'div'
bottomClass	Set the class for the bottom section. Type: string	''
contentClass	Set the class for the content section. Type: string	''
leftClass	Set the class for the left section. Type: string	''
rightClass	Set the class for the right section. Type: string	''
selectedClass	Set the class for the selected section. Type: string	''
subtitleClass	Set the class for the subtitle section. Type: string	''
titleClass	Set the class for the title section. Type: string	''
unstyled	Set this prop to remove the default styling. Type: boolean Values: truefalse	false