By default, item layout includes custom styling, like paddings, sizes, colors, etc.
<dt-item-layout> <template #start> <dt-icon size="300" name="lock" /> </template> Layout title <template #subtitle> Subtitle </template> <template #bottom> <dt-badge>Content</dt-badge> </template> <template #end> <dt-icon size="300" name="share" /> </template> <template #selected> <dt-icon size="300" name="check" /> </template> </dt-item-layout>
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.
<dt-item-layout unstyled> <template #start> <dt-icon size="300" name="lock" /> </template> Layout title <template #subtitle> Subtitle </template> <template #bottom> <dt-badge>Content</dt-badge> </template> <template #end> <dt-icon size="300" name="share" /> </template> <template #selected> <dt-icon size="300" name="check" /> </template> </dt-item-layout>
import { DtItemLayout } from '@dialpad/dialtone-vue';
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 |
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 Friday, September 4, 2026
fix/popover-modal-zindex-scope