docs/extension-test-page
What's New

Item Layout

Storybook GitHub

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 

import { DtItemLayout } from '@dialpad/dialtone-vue';

Slots

Name
Type
blockEnd

Slot for content below subtitle

default

Slot for main content

end

Slot for end content

selected

Slot for selected icon

start

Slot for start content

subtitle

Slot for content below main content

bottom Deprecated

Use blockEnd

left Deprecated

Use start

right Deprecated

Use end

Props

Name
Default
Type
as
'div'
string

Set this prop to render layout as a specific HTML element.

blockEndClass
''
string|array|object

Set the class for the block-end section (aka bottom).

contentClass
''
string|array|object

Set the class for the content section.

endClass
''
string|array|object

Set the class for the end section.

selectedClass
''
string|array|object

Set the class for the selected section.

startClass
''
string|array|object

Set the class for the start section.

subtitleClass
''
string|array|object

Set the class for the subtitle section.

titleClass
''
string|array|object

Set the class for the title section.

unstyled
false
"true" | "false"

Set this prop to remove the default styling.

bottomClass Deprecated
string|array|object

Set the class for the block-end section (aka bottom).

Use blockEndClass

leftClass Deprecated
string|array|object

Set the class for the start section.

Use startClass

rightClass Deprecated
string|array|object

Set the class for the end section.

Use endClass

Item Layout documentation last updated Thursday, June 18, 2026