List style position

import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx";

export const title = "list-style-position"; export const description = "Utilities for controlling the position of bullets and numbers in lists.";

Examples

Basic example

Use utilities like list-inside and list-outside to control the position of the markers and text indentation in a list:

{

list-inside

• 5 cups chopped Porcini mushrooms
• 1/2 cup of olive oil
• 3lb of celery

list-outside

• 5 cups chopped Porcini mushrooms
• 1/2 cup of olive oil
• 3lb of celery

}

<!-- [!code classes:list-inside] -->
<ul class="list-inside">
  <li>5 cups chopped Porcini mushrooms</li>
  <!-- ... -->
</ul>

<!-- [!code classes:list-outside] -->
<ul class="list-outside">
  <li>5 cups chopped Porcini mushrooms</li>
  <!-- ... -->
</ul>

Responsive design