Lists
Markdown supports unordered, ordered, and nested lists for various content needs.
Unordered lists
Use unordered lists for items without a specific sequence. Start each item with a - symbol.
- I'm a list item.
- I'm another list item.
- I'm the last list item.
- I'm a list item.
- I'm another list item.
- I'm the last list item.
app.config.ts
export default defineAppConfig({
b24ui: {
prose: {
ul: {
slots: {
base: 'list-disc ps-2 mb-2 ms-3 marker:text-(--b24ui-typography-label-color) text-(--b24ui-typography-label-color)'
}
},
li: {
slots: {
base: 'my-1.5 ps-1.5 leading-relaxed [&>ul]:my-0 [&>ol]:my-0 text-(--b24ui-typography-label-color)'
}
}
}
}
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import bitrix24UIPluginVite from '@bitrix24/b24ui-nuxt/vite'
export default defineConfig({
plugins: [
vue(),
bitrix24UIPluginVite({
b24ui: {
prose: {
ul: {
slots: {
base: 'list-disc ps-2 mb-2 ms-3 marker:text-(--b24ui-typography-label-color) text-(--b24ui-typography-label-color)'
}
},
li: {
slots: {
base: 'my-1.5 ps-1.5 leading-relaxed [&>ul]:my-0 [&>ol]:my-0 text-(--b24ui-typography-label-color)'
}
}
}
}
})
]
})
Ordered lists
Use ordered lists when item order matters, like steps in a process. Start each item with a number.
- I'm a list item.
- I'm another list item.
- I'm the last list item.
1. I'm a list item.
2. I'm another list item.
3. I'm the last list item.
app.config.ts
export default defineAppConfig({
b24ui: {
prose: {
ol: {
slots: {
base: 'list-decimal ps-2 mb-2 ms-3 marker:text-(--b24ui-typography-label-color) text-(--b24ui-typography-label-color)'
}
},
li: {
slots: {
base: 'my-1.5 ps-1.5 leading-relaxed [&>ul]:my-0 [&>ol]:my-0 text-(--b24ui-typography-label-color)'
}
}
}
}
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import bitrix24UIPluginVite from '@bitrix24/b24ui-nuxt/vite'
export default defineConfig({
plugins: [
vue(),
bitrix24UIPluginVite({
b24ui: {
prose: {
ol: {
slots: {
base: 'list-decimal ps-2 mb-2 ms-3 marker:text-(--b24ui-typography-label-color) text-(--b24ui-typography-label-color)'
}
},
li: {
slots: {
base: 'my-1.5 ps-1.5 leading-relaxed [&>ul]:my-0 [&>ol]:my-0 text-(--b24ui-typography-label-color)'
}
}
}
}
})
]
})
Nested lists
Create hierarchical lists with sub-items for complex structures. Indent sub-items by four spaces for nesting.
- I'm a list item.
- I'm a nested list item.
- I'm another nested list item.
- I'm another list item.
- Another nested item
- Deep nested item
- Another deep nested item
- Back to second level
- Another nested item
- I'm a list item.
- I'm a nested list item.
- I'm another nested list item.
- I'm another list item.
- Another nested item
- Deep nested item
- Another deep nested item
- Back to second level
Mixed lists
You can combine ordered and unordered lists for complex hierarchies.
- First major step
- Sub-requirement A
- Sub-requirement B
- Second major step
- Another sub-item
- Final sub-item
- Final step
1. First major step
- Sub-requirement A
- Sub-requirement B
2. Second major step
- Another sub-item
- Final sub-item
3. Final step
Tables
Present structured data in rows and columns clearly. Tables are ideal for comparing data or listing properties.
| Prop | Default | Type |
|---------|-----------|--------------------------|
| `name` | | `string`{lang="ts-type"} |
| `size` | `md` | `string`{lang="ts-type"} |
| `color` | `neutral` | `string`{lang="ts-type"} |
app.config.ts
export default defineAppConfig({
b24ui: {
prose: {
table: {
slots: {
root: 'my-4 overflow-x-auto',
base: ''
}
},
thead: {
slots: {
base: 'bg-(--ui-color-design-tinted-na-bg) text-(--ui-color-design-tinted-na-content)'
}
},
tbody: {
slots: {
base: ''
}
},
tr: {
slots: {
base: ''
}
},
th: {
slots: {
base: ''
}
},
td: {
slots: {
base: '[&_code]:text-(length:--ui-font-size-xs)/5 [&_p]:my-0 [&_p]:leading-6 [&_ul]:my-0 [&_ol]:my-0 [&_ul]:ps-4.5 [&_ol]:ps-4.5 [&_li]:leading-6 [&_li]:my-0.5'
}
}
}
}
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import bitrix24UIPluginVite from '@bitrix24/b24ui-nuxt/vite'
export default defineConfig({
plugins: [
vue(),
bitrix24UIPluginVite({
b24ui: {
prose: {
table: {
slots: {
root: 'my-4 overflow-x-auto',
base: ''
}
},
thead: {
slots: {
base: 'bg-(--ui-color-design-tinted-na-bg) text-(--ui-color-design-tinted-na-content)'
}
},
tbody: {
slots: {
base: ''
}
},
tr: {
slots: {
base: ''
}
},
th: {
slots: {
base: ''
}
},
td: {
slots: {
base: '[&_code]:text-(length:--ui-font-size-xs)/5 [&_p]:my-0 [&_p]:leading-6 [&_ul]:my-0 [&_ol]:my-0 [&_ul]:ps-4.5 [&_ol]:ps-4.5 [&_li]:leading-6 [&_li]:my-0.5'
}
}
}
}
})
]
})