List - ska-docs

When using a regular list inside a Tailwind prose it looks like this:

Item 1
Item 2
Item 3

How ever, when not in prose it is completely unstyled:

Item 1
Item 2
Item 3

Here are some alternative styles for lists:

List style type and spacing added manually

Item 1
Item 2
Item 3

<!-- wp:list {"skaBlocks":{"cx":"pl-6 my-2 list-disc","t":1709756495,"css":".my-2{margin-top:var(\u002d\u002dska-spacing-2);margin-bottom:var(\u002d\u002dska-spacing-2)}.list-disc{list-style-type:disc}.pl-6{padding-left:var(\u002d\u002dska-spacing-6)}"},"skaBlocksPadding":{"v":{"$":{"@":"","y":"","l":"6"}},"t":"sides"},"skaBlocksMargin":{"v":{"$":{"@":"","y":"2"}},"t":"axis"},"skaBlocksListStyleType":{"v":{"$":{"@":"disc"}}}} -->
<ul class="pl-6 my-2 list-disc"><!-- wp:list-item -->
<li>Item 1</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Item 2</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Item 3</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

List with icons

Item 1
Item 2
Item 3

<!-- wp:ska/element {"skaBlocksAs":{"element":"ul"},"skaBlocks":{"cx":"[\u0026\u003eli]:flex [\u0026\u003eli]:flex-row [\u0026\u003eli]:gap-2 [\u0026\u003eli]:items-center [\u0026_.wp-block-ska-image]:w-6 [\u0026_.wp-block-ska-image]:h-auto [\u0026_.wp-block-ska-image]:text-current","t":1709756495,"css":".\\[\\\u0026\\\u003eli\\]\\:flex\u003eli{display:flex}.\\[\\\u0026\\\u003eli\\]\\:flex-row\u003eli{flex-direction:row}.\\[\\\u0026\\\u003eli\\]\\:items-center\u003eli{align-items:center}.\\[\\\u0026\\\u003eli\\]\\:gap-2\u003eli{gap:var(\u002d\u002dska-spacing-2)}.\\[\\\u0026_\\.wp-block-ska-image\\]\\:h-auto .wp-block-ska-image{height:auto}.\\[\\\u0026_\\.wp-block-ska-image\\]\\:w-6 .wp-block-ska-image{width:var(\u002d\u002dska-spacing-6)}.\\[\\\u0026_\\.wp-block-ska-image\\]\\:text-current .wp-block-ska-image{color:currentColor}"},"skaBlocksSelectors":{"[\u0026\u003eli]":{"skaBlocksDisplay":{"v":{"$":{"@":"flex"}}},"skaBlocksFlexDirection":{"v":{"$":{"@":"row"}}},"skaBlocksAlignItems":{"v":{"$":{"@":"center"}}},"skaBlocksGap":{"v":{"$":{"@":"2"}}}},"[\u0026_.wp-block-ska-image]":{"skaBlocksWidth":{"v":{"$":{"@":"6"}}},"skaBlocksHeight":{"v":{"$":{"@":"auto"}}},"skaBlocksTextColor":{"v":{"$":{"@":"current"}}}}}} -->
<ul class="[&>li]:flex [&>li]:flex-row [&>li]:gap-2 [&>li]:items-center [&_.wp-block-ska-image]:w-6 [&_.wp-block-ska-image]:h-auto [&_.wp-block-ska-image]:text-current wp-block-ska-element"><!-- wp:ska/element {"skaBlocksAs":{"element":"li"}} -->
<li class="wp-block-ska-element"><!-- wp:ska/image {"mode":"icon","svg":"\u003csvg data-svg-width=\u002224\u0022 data-svg-height=\u002224\u0022 viewBox=\u00220 0 24 24\u0022 fill=\u0022none\u0022 xmlns=\u0022http://www.w3.org/2000/svg\u0022\u003e\n\u003cpath fill-rule=\u0022evenodd\u0022 clip-rule=\u0022evenodd\u0022 d=\u0022M11.5397 22.351C11.57 22.3685 11.5937 22.3821 11.6105 22.3915L11.6384 22.4071C11.8613 22.5294 12.1378 22.5285 12.3608 22.4075L12.3895 22.3915C12.4063 22.3821 12.43 22.3685 12.4603 22.351C12.5207 22.316 12.607 22.265 12.7155 22.1982C12.9325 22.0646 13.2388 21.8676 13.6046 21.6091C14.3351 21.0931 15.3097 20.3274 16.2865 19.3273C18.2307 17.3368 20.25 14.3462 20.25 10.5C20.25 5.94365 16.5563 2.25 12 2.25C7.44365 2.25 3.75 5.94365 3.75 10.5C3.75 14.3462 5.76932 17.3368 7.71346 19.3273C8.69025 20.3274 9.66491 21.0931 10.3954 21.6091C10.7612 21.8676 11.0675 22.0646 11.2845 22.1982C11.393 22.265 11.4793 22.316 11.5397 22.351ZM12 13.5C13.6569 13.5 15 12.1569 15 10.5C15 8.84315 13.6569 7.5 12 7.5C10.3431 7.5 9 8.84315 9 10.5C9 12.1569 10.3431 13.5 12 13.5Z\u0022 fill=\u0022currentColor\u0022/\u003e\n\u003c/svg\u003e\n","collection":"heroicons","icon":"24/solid/map-pin","skaBlocks":{"cx":"","t":1709756495,"css":""}} -->
<div role="figure" aria-hidden="true" class="wp-block-ska-image"><svg data-svg-width="24" data-svg-height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.5397 22.351C11.57 22.3685 11.5937 22.3821 11.6105 22.3915L11.6384 22.4071C11.8613 22.5294 12.1378 22.5285 12.3608 22.4075L12.3895 22.3915C12.4063 22.3821 12.43 22.3685 12.4603 22.351C12.5207 22.316 12.607 22.265 12.7155 22.1982C12.9325 22.0646 13.2388 21.8676 13.6046 21.6091C14.3351 21.0931 15.3097 20.3274 16.2865 19.3273C18.2307 17.3368 20.25 14.3462 20.25 10.5C20.25 5.94365 16.5563 2.25 12 2.25C7.44365 2.25 3.75 5.94365 3.75 10.5C3.75 14.3462 5.76932 17.3368 7.71346 19.3273C8.69025 20.3274 9.66491 21.0931 10.3954 21.6091C10.7612 21.8676 11.0675 22.0646 11.2845 22.1982C11.393 22.265 11.4793 22.316 11.5397 22.351ZM12 13.5C13.6569 13.5 15 12.1569 15 10.5C15 8.84315 13.6569 7.5 12 7.5C10.3431 7.5 9 8.84315 9 10.5C9 12.1569 10.3431 13.5 12 13.5Z" fill="currentColor"></path>
</svg></div>
<!-- /wp:ska/image -->

<!-- wp:ska/text -->
<span class="wp-block-ska-text ska-text">Item 1</span>
<!-- /wp:ska/text --></li>
<!-- /wp:ska/element -->

<!-- wp:ska/element {"skaBlocksAs":{"element":"li"}} -->
<li class="wp-block-ska-element"><!-- wp:ska/image {"mode":"icon","svg":"\u003csvg data-svg-width=\u002224\u0022 data-svg-height=\u002224\u0022 viewBox=\u00220 0 24 24\u0022 fill=\u0022none\u0022 xmlns=\u0022http://www.w3.org/2000/svg\u0022\u003e\n\u003cpath fill-rule=\u0022evenodd\u0022 clip-rule=\u0022evenodd\u0022 d=\u0022M18.6854 19.0971C20.5721 17.3191 21.75 14.7971 21.75 12C21.75 6.61522 17.3848 2.25 12 2.25C6.61522 2.25 2.25 6.61522 2.25 12C2.25 14.7971 3.42785 17.3191 5.31463 19.0971C7.06012 20.7419 9.41234 21.75 12 21.75C14.5877 21.75 16.9399 20.7419 18.6854 19.0971ZM6.14512 17.8123C7.51961 16.0978 9.63161 15 12 15C14.3684 15 16.4804 16.0978 17.8549 17.8123C16.3603 19.3178 14.289 20.25 12 20.25C9.711 20.25 7.63973 19.3178 6.14512 17.8123ZM15.75 9C15.75 11.0711 14.0711 12.75 12 12.75C9.92893 12.75 8.25 11.0711 8.25 9C8.25 6.92893 9.92893 5.25 12 5.25C14.0711 5.25 15.75 6.92893 15.75 9Z\u0022 fill=\u0022currentColor\u0022/\u003e\n\u003c/svg\u003e\n","collection":"heroicons","icon":"24/solid/user-circle","skaBlocks":{"cx":"","t":1709756495,"css":""}} -->
<div role="figure" aria-hidden="true" class="wp-block-ska-image"><svg data-svg-width="24" data-svg-height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.6854 19.0971C20.5721 17.3191 21.75 14.7971 21.75 12C21.75 6.61522 17.3848 2.25 12 2.25C6.61522 2.25 2.25 6.61522 2.25 12C2.25 14.7971 3.42785 17.3191 5.31463 19.0971C7.06012 20.7419 9.41234 21.75 12 21.75C14.5877 21.75 16.9399 20.7419 18.6854 19.0971ZM6.14512 17.8123C7.51961 16.0978 9.63161 15 12 15C14.3684 15 16.4804 16.0978 17.8549 17.8123C16.3603 19.3178 14.289 20.25 12 20.25C9.711 20.25 7.63973 19.3178 6.14512 17.8123ZM15.75 9C15.75 11.0711 14.0711 12.75 12 12.75C9.92893 12.75 8.25 11.0711 8.25 9C8.25 6.92893 9.92893 5.25 12 5.25C14.0711 5.25 15.75 6.92893 15.75 9Z" fill="currentColor"></path>
</svg></div>
<!-- /wp:ska/image -->

<!-- wp:ska/text -->
<span class="wp-block-ska-text ska-text">Item 2</span>
<!-- /wp:ska/text --></li>
<!-- /wp:ska/element -->

<!-- wp:ska/element {"skaBlocksAs":{"element":"li"}} -->
<li class="wp-block-ska-element"><!-- wp:ska/image {"mode":"icon","svg":"\u003csvg data-svg-width=\u002224\u0022 data-svg-height=\u002224\u0022 viewBox=\u00220 0 24 24\u0022 fill=\u0022none\u0022 xmlns=\u0022http://www.w3.org/2000/svg\u0022\u003e\n\u003cpath fill-rule=\u0022evenodd\u0022 clip-rule=\u0022evenodd\u0022 d=\u0022M15.9697 2.46967C16.2626 2.17678 16.7374 2.17678 17.0303 2.46967L21.5303 6.96967C21.671 7.11032 21.75 7.30109 21.75 7.5C21.75 7.69891 21.671 7.88968 21.5303 8.03033L17.0303 12.5303C16.7374 12.8232 16.2626 12.8232 15.9697 12.5303C15.6768 12.2374 15.6768 11.7626 15.9697 11.4697L19.1893 8.25L7.5 8.25C7.08579 8.25 6.75 7.91421 6.75 7.5C6.75 7.08579 7.08579 6.75 7.5 6.75L19.1893 6.75L15.9697 3.53033C15.6768 3.23744 15.6768 2.76256 15.9697 2.46967ZM8.03033 11.4697C8.32322 11.7626 8.32322 12.2374 8.03033 12.5303L4.81066 15.75H16.5C16.9142 15.75 17.25 16.0858 17.25 16.5C17.25 16.9142 16.9142 17.25 16.5 17.25H4.81066L8.03033 20.4697C8.32322 20.7626 8.32322 21.2374 8.03033 21.5303C7.73744 21.8232 7.26256 21.8232 6.96967 21.5303L2.46967 17.0303C2.17678 16.7374 2.17678 16.2626 2.46967 15.9697L6.96967 11.4697C7.26256 11.1768 7.73744 11.1768 8.03033 11.4697Z\u0022 fill=\u0022currentColor\u0022/\u003e\n\u003c/svg\u003e\n","collection":"heroicons","icon":"24/solid/arrows-right-left","skaBlocks":{"cx":"","t":1709756495,"css":""}} -->
<div role="figure" aria-hidden="true" class="wp-block-ska-image"><svg data-svg-width="24" data-svg-height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.9697 2.46967C16.2626 2.17678 16.7374 2.17678 17.0303 2.46967L21.5303 6.96967C21.671 7.11032 21.75 7.30109 21.75 7.5C21.75 7.69891 21.671 7.88968 21.5303 8.03033L17.0303 12.5303C16.7374 12.8232 16.2626 12.8232 15.9697 12.5303C15.6768 12.2374 15.6768 11.7626 15.9697 11.4697L19.1893 8.25L7.5 8.25C7.08579 8.25 6.75 7.91421 6.75 7.5C6.75 7.08579 7.08579 6.75 7.5 6.75L19.1893 6.75L15.9697 3.53033C15.6768 3.23744 15.6768 2.76256 15.9697 2.46967ZM8.03033 11.4697C8.32322 11.7626 8.32322 12.2374 8.03033 12.5303L4.81066 15.75H16.5C16.9142 15.75 17.25 16.0858 17.25 16.5C17.25 16.9142 16.9142 17.25 16.5 17.25H4.81066L8.03033 20.4697C8.32322 20.7626 8.32322 21.2374 8.03033 21.5303C7.73744 21.8232 7.26256 21.8232 6.96967 21.5303L2.46967 17.0303C2.17678 16.7374 2.17678 16.2626 2.46967 15.9697L6.96967 11.4697C7.26256 11.1768 7.73744 11.1768 8.03033 11.4697Z" fill="currentColor"></path>
</svg></div>
<!-- /wp:ska/image -->

<!-- wp:ska/text -->
<span class="wp-block-ska-text ska-text">Item 3</span>
<!-- /wp:ska/text --></li>
<!-- /wp:ska/element --></ul>
<!-- /wp:ska/element -->

Divided list with images

Item 1
Item 2
Item 3

<!-- wp:ska/element {"skaBlocksDivideWidth":{"v":{"$":{"@":"","x":"","y":"DEFAULT"}}},"skaBlocksAs":{"element":"ul"},"skaBlocks":{"cx":"[\u0026\u003eli]:flex *:[\u0026\u003e.image]:[\u0026\u003eli]:object-cover [\u0026\u003e.image]:[\u0026\u003eli]:overflow-hidden [\u0026\u003eli]:flex-row [\u0026\u003eli]:gap-3.5 [\u0026\u003eli]:items-center [\u0026\u003eli]:pt-2 first:[\u0026\u003eli]:pt-0 [\u0026\u003eli]:mb-2 last:[\u0026\u003eli]:mb-0 *:[\u0026\u003e.image]:[\u0026\u003eli]:w-full *:[\u0026\u003e.image]:[\u0026\u003eli]:h-full [\u0026\u003e.image]:[\u0026\u003eli]:size-10 [\u0026\u003eli]:text-sm [\u0026\u003eli]:font-semibold [\u0026\u003e.image]:[\u0026\u003eli]:rounded-full *:[\u0026\u003e.image]:[\u0026\u003eli]:rounded-[inherit] divide-y","t":1709756495,"css":".divide-y \u003e :not([hidden]) ~ :not([hidden]){\u002d\u002dtw-divide-y-reverse:0;border-top-width:calc(1px * calc(1 - var(\u002d\u002dtw-divide-y-reverse)));border-bottom-width:calc(1px * var(\u002d\u002dtw-divide-y-reverse))}.\\[\\\u0026\\\u003eli\\]\\:mb-2\u003eli{margin-bottom:var(\u002d\u002dska-spacing-2)}.\\[\\\u0026\\\u003eli\\]\\:flex\u003eli{display:flex}.\\[\\\u0026\\\u003eli\\]\\:flex-row\u003eli{flex-direction:row}.\\[\\\u0026\\\u003eli\\]\\:items-center\u003eli{align-items:center}.\\[\\\u0026\\\u003eli\\]\\:gap-3\\.5\u003eli{gap:var(\u002d\u002dska-spacing-3\\.5)}.\\[\\\u0026\\\u003eli\\]\\:pt-2\u003eli{padding-top:var(\u002d\u002dska-spacing-2)}.\\[\\\u0026\\\u003eli\\]\\:text-sm\u003eli{font-size:var(\u002d\u002dska-font-size-sm);line-height:var(\u002d\u002dska-font-size-sm-lh)}.\\[\\\u0026\\\u003eli\\]\\:font-semibold\u003eli{font-weight:var(\u002d\u002dska-font-weight-semibold)}.first\\:\\[\\\u0026\\\u003eli\\]\\:pt-0\u003eli:first-child{padding-top:var(\u002d\u002dska-spacing-0)}.last\\:\\[\\\u0026\\\u003eli\\]\\:mb-0\u003eli:last-child{margin-bottom:var(\u002d\u002dska-spacing-0)}.\\[\\\u0026\\\u003e\\.image\\]\\:\\[\\\u0026\\\u003eli\\]\\:size-10\u003eli\u003e.image{width:var(\u002d\u002dska-spacing-10);height:var(\u002d\u002dska-spacing-10)}.\\[\\\u0026\\\u003e\\.image\\]\\:\\[\\\u0026\\\u003eli\\]\\:overflow-hidden\u003eli\u003e.image{overflow:hidden}.\\[\\\u0026\\\u003e\\.image\\]\\:\\[\\\u0026\\\u003eli\\]\\:rounded-full\u003eli\u003e.image{border-radius:var(\u002d\u002dska-border-radius-full)}.\\*\\:\\[\\\u0026\\\u003e\\.image\\]\\:\\[\\\u0026\\\u003eli\\]\\:h-full\u003eli\u003e.image \u003e *{height:100%}.\\*\\:\\[\\\u0026\\\u003e\\.image\\]\\:\\[\\\u0026\\\u003eli\\]\\:w-full\u003eli\u003e.image \u003e *{width:100%}.\\*\\:\\[\\\u0026\\\u003e\\.image\\]\\:\\[\\\u0026\\\u003eli\\]\\:rounded-\\[inherit\\]\u003eli\u003e.image \u003e *{border-radius:inherit}.\\*\\:\\[\\\u0026\\\u003e\\.image\\]\\:\\[\\\u0026\\\u003eli\\]\\:object-cover\u003eli\u003e.image \u003e *{-o-object-fit:cover;object-fit:cover}"},"skaBlocksSelectors":{"[\u0026\u003eli]":{"skaBlocksDisplay":{"v":{"$":{"@":"flex"}}},"skaBlocksFlexDirection":{"v":{"$":{"@":"row"}}},"skaBlocksAlignItems":{"v":{"$":{"@":"center"}}},"skaBlocksGap":{"v":{"$":{"@":"3.5"}}},"skaBlocksSelectors":{"[\u0026\u003e.image]":{"skaBlocksSize":{"v":{"$":{"@":"10"}}},"skaBlocksBorderRadius":{"v":{"$":{"@":"full"}}},"skaBlocksOverflow":{"v":{"$":{"@":"hidden"}}},"skaBlocksSelectors":{"*":{"skaBlocksWidth":{"v":{"$":{"@":"full"}}},"skaBlocksHeight":{"v":{"$":{"@":"full"}}},"skaBlocksObjectFit":{"v":{"$":{"@":"cover"}}},"skaBlocksBorderRadius":{"v":{"$":{"@":"[inherit]"}},"a":["[inherit]"]}}}}},"skaBlocksMargin":{"v":{"$":{"@":"","b":"2","t":""},"last":{"b":"0"}},"t":"sides"},"skaBlocksPadding":{"v":{"$":{"@":"","t":"2"},"first":{"t":"0"}},"t":"sides"},"skaBlocksFontWeight":{"v":{"$":{"@":"semibold"}}},"skaBlocksFontSize":{"v":{"$":{"@":"sm"}}}}}} -->
<ul class="[&>li]:flex *:[&>.image]:[&>li]:object-cover [&>.image]:[&>li]:overflow-hidden [&>li]:flex-row [&>li]:gap-3.5 [&>li]:items-center [&>li]:pt-2 first:[&>li]:pt-0 [&>li]:mb-2 last:[&>li]:mb-0 *:[&>.image]:[&>li]:w-full *:[&>.image]:[&>li]:h-full [&>.image]:[&>li]:size-10 [&>li]:text-sm [&>li]:font-semibold [&>.image]:[&>li]:rounded-full *:[&>.image]:[&>li]:rounded-[inherit] divide-y wp-block-ska-element"><!-- wp:ska/element {"skaBlocksAs":{"element":"li"}} -->
<li class="wp-block-ska-element"><!-- wp:ska/image {"skaBlocks":{"cx":"","t":1709756495,"css":""},"className":"image"} -->
<div role="figure" class="wp-block-ska-image image">
<svg class="ska-placeholder" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
	<rect width="100%" height="100%" fill="#ddd"/>
	<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 512 512">
		<path style="opacity:0.1" d="m203.77 188c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.75-24-24-24zm147.55-44h-192c-17.225 0-31.555 14.325-31.555 32v160c0 17.675 14.325 32 31.55 32h192c17.675 0 32-14.325 32-32v-160c5e-3 -17.675-13.895-32-31.995-32zm8 188.65-68.4-92.95c-1.25-2.3-4.1-3.7-7.15-3.7-3.0565 0-5.91 1.384-7.605 3.6895l-53.3 72.05-18.545-23.05c-1.7205-2.1395-4.467-3.4045-7.385-3.4045-2.921 0-5.665 1.2645-7.39 3.4045l-37.76 46.905v0l-0.02-159.59c0-4.411 3.589-8 8-8h192c4.411 0 8 3.589 8 8v156.65z" stroke-width=".5"/>
	</svg>
</svg>
</div>
<!-- /wp:ska/image -->

<!-- wp:ska/text -->
<span class="wp-block-ska-text ska-text">Item 1</span>
<!-- /wp:ska/text --></li>
<!-- /wp:ska/element -->

<!-- wp:ska/element {"skaBlocksAs":{"element":"li"}} -->
<li class="wp-block-ska-element"><!-- wp:ska/image {"skaBlocks":{"cx":"","t":1709756495,"css":""},"className":"image"} -->
<div role="figure" class="wp-block-ska-image image">
<svg class="ska-placeholder" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
	<rect width="100%" height="100%" fill="#ddd"/>
	<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 512 512">
		<path style="opacity:0.1" d="m203.77 188c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.75-24-24-24zm147.55-44h-192c-17.225 0-31.555 14.325-31.555 32v160c0 17.675 14.325 32 31.55 32h192c17.675 0 32-14.325 32-32v-160c5e-3 -17.675-13.895-32-31.995-32zm8 188.65-68.4-92.95c-1.25-2.3-4.1-3.7-7.15-3.7-3.0565 0-5.91 1.384-7.605 3.6895l-53.3 72.05-18.545-23.05c-1.7205-2.1395-4.467-3.4045-7.385-3.4045-2.921 0-5.665 1.2645-7.39 3.4045l-37.76 46.905v0l-0.02-159.59c0-4.411 3.589-8 8-8h192c4.411 0 8 3.589 8 8v156.65z" stroke-width=".5"/>
	</svg>
</svg>
</div>
<!-- /wp:ska/image -->

<!-- wp:ska/text -->
<span class="wp-block-ska-text ska-text">Item 2</span>
<!-- /wp:ska/text --></li>
<!-- /wp:ska/element -->

<!-- wp:ska/element {"skaBlocksAs":{"element":"li"}} -->
<li class="wp-block-ska-element"><!-- wp:ska/image {"skaBlocks":{"cx":"","t":1709756495,"css":""},"className":"image"} -->
<div role="figure" class="wp-block-ska-image image">
<svg class="ska-placeholder" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
	<rect width="100%" height="100%" fill="#ddd"/>
	<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 512 512">
		<path style="opacity:0.1" d="m203.77 188c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.75-24-24-24zm147.55-44h-192c-17.225 0-31.555 14.325-31.555 32v160c0 17.675 14.325 32 31.55 32h192c17.675 0 32-14.325 32-32v-160c5e-3 -17.675-13.895-32-31.995-32zm8 188.65-68.4-92.95c-1.25-2.3-4.1-3.7-7.15-3.7-3.0565 0-5.91 1.384-7.605 3.6895l-53.3 72.05-18.545-23.05c-1.7205-2.1395-4.467-3.4045-7.385-3.4045-2.921 0-5.665 1.2645-7.39 3.4045l-37.76 46.905v0l-0.02-159.59c0-4.411 3.589-8 8-8h192c4.411 0 8 3.589 8 8v156.65z" stroke-width=".5"/>
	</svg>
</svg>
</div>
<!-- /wp:ska/image -->

<!-- wp:ska/text -->
<span class="wp-block-ska-text ska-text">Item 3</span>
<!-- /wp:ska/text --></li>
<!-- /wp:ska/element --></ul>
<!-- /wp:ska/element -->

List items with header & description

Nullam mollis sit amet Fusce maximus risus eu dignissim posuere. Duis eget luctus eros.
Maecenas dignissim arcu at Pellentesque tristique, urna vel pharetra scelerisque.
Cras volutpat luctus venenatis Sed volutpat gravida purus. Fusce facilisis lorem id tempus elementum.

<!-- wp:ska/element {"skaBlocksSpaceBetween":{"v":{"$":{"@":"","y":"3.5"}}},"skaBlocksAs":{"element":"ul"},"skaBlocks":{"cx":"[\u0026\u003eli]:flex [\u0026\u003eli]:flex-col [\u0026\u003eli]:items-start space-y-3.5 [\u0026_.header]:text-lg/tight [\u0026_.description]:text-sm/tight [\u0026_.header]:font-semibold [\u0026_.description]:text-site-subtext","t":1709756495,"css":".space-y-3 \u003e :not([hidden]) ~ :not([hidden]){\u002d\u002dtw-space-y-reverse:0;margin-top:calc(var(\u002d\u002dska-spacing-3) * calc(1 - var(\u002d\u002dtw-space-y-reverse)));margin-bottom:calc(var(\u002d\u002dska-spacing-3) * var(\u002d\u002dtw-space-y-reverse))}.space-y-3\\.5 \u003e :not([hidden]) ~ :not([hidden]){\u002d\u002dtw-space-y-reverse:0;margin-top:calc(var(\u002d\u002dska-spacing-3\\.5) * calc(1 - var(\u002d\u002dtw-space-y-reverse)));margin-bottom:calc(var(\u002d\u002dska-spacing-3\\.5) * var(\u002d\u002dtw-space-y-reverse))}.\\[\\\u0026\\\u003eli\\]\\:flex\u003eli{display:flex}.\\[\\\u0026\\\u003eli\\]\\:flex-col\u003eli{flex-direction:column}.\\[\\\u0026\\\u003eli\\]\\:items-start\u003eli{align-items:flex-start}.\\[\\\u0026_\\.description\\]\\:text-sm\\/tight .description{font-size:var(\u002d\u002dska-font-size-sm);line-height:1.25}.\\[\\\u0026_\\.description\\]\\:text-site-subtext .description{\u002d\u002dtw-text-opacity:1;color:rgba(var(\u002d\u002dska-rgb-site-subtext),1)}.\\[\\\u0026_\\.header\\]\\:text-lg\\/tight .header{font-size:var(\u002d\u002dska-font-size-lg);line-height:1.25}.\\[\\\u0026_\\.header\\]\\:font-semibold .header{font-weight:var(\u002d\u002dska-font-weight-semibold)}"},"skaBlocksSelectors":{"[\u0026\u003eli]":{"skaBlocksDisplay":{"v":{"$":{"@":"flex"}}},"skaBlocksFlexDirection":{"v":{"$":{"@":"col"}}},"skaBlocksAlignItems":{"v":{"$":{"@":"start"}}},"skaBlocksSelectors":[]},"[\u0026_.header]":{"skaBlocksFontWeight":{"v":{"$":{"@":"semibold"}}},"skaBlocksFontSize":{"v":{"$":{"@":"lg/tight"}}}},"[\u0026_.description]":{"skaBlocksTextColor":{"v":{"$":{"@":"site-subtext"}}},"skaBlocksFontSize":{"v":{"$":{"@":"sm/tight"}}}}}} -->
<ul class="[&>li]:flex [&>li]:flex-col [&>li]:items-start space-y-3.5 [&_.header]:text-lg/tight [&_.description]:text-sm/tight [&_.header]:font-semibold [&_.description]:text-site-subtext wp-block-ska-element"><!-- wp:ska/element {"skaBlocksAs":{"element":"li"}} -->
<li class="wp-block-ska-element"><!-- wp:ska/text {"className":"header","skaBlocks":{"cx":"","t":1709756495,"css":""}} -->
<span class="wp-block-ska-text ska-text header">Nullam mollis sit amet</span>
<!-- /wp:ska/text -->

<!-- wp:ska/text {"className":"description","skaBlocks":{"cx":"","t":1709756495,"css":""}} -->
<span class="wp-block-ska-text ska-text description">Fusce maximus risus eu dignissim posuere. Duis eget luctus eros.</span>
<!-- /wp:ska/text --></li>
<!-- /wp:ska/element -->

<!-- wp:ska/element {"skaBlocksAs":{"element":"li"}} -->
<li class="wp-block-ska-element"><!-- wp:ska/text {"className":"header","skaBlocks":{"cx":"","t":1709756495,"css":""}} -->
<span class="wp-block-ska-text ska-text header">Maecenas dignissim arcu at</span>
<!-- /wp:ska/text -->

<!-- wp:ska/text {"className":"description","skaBlocks":{"cx":"","t":1709756495,"css":""}} -->
<span class="wp-block-ska-text ska-text description">Pellentesque tristique, urna vel pharetra scelerisque.</span>
<!-- /wp:ska/text --></li>
<!-- /wp:ska/element -->

<!-- wp:ska/element {"skaBlocksAs":{"element":"li"}} -->
<li class="wp-block-ska-element"><!-- wp:ska/text {"className":"header","skaBlocks":{"cx":"","t":1709756495,"css":""}} -->
<span class="wp-block-ska-text ska-text header">Cras volutpat luctus venenatis</span>
<!-- /wp:ska/text -->

<!-- wp:ska/text {"className":"description","skaBlocks":{"cx":"","t":1709756495,"css":""}} -->
<span class="wp-block-ska-text ska-text description">Sed volutpat gravida purus. Fusce facilisis lorem id tempus elementum.</span>
<!-- /wp:ska/text --></li>
<!-- /wp:ska/element --></ul>
<!-- /wp:ska/element -->

List items with header, description and image

Nullam mollis sit amet Fusce maximus risus eu dignissim posuere. Duis eget luctus eros.
Maecenas dignissim arcu at Pellentesque tristique, urna vel pharetra scelerisque.
Cras volutpat luctus venenatis Sed volutpat gravida purus. Fusce facilisis lorem id tempus elementum.

<!-- wp:ska/element {"skaBlocksSpaceBetween":{"v":{"$":{"@":"","y":"3.5"}}},"skaBlocksAs":{"element":"ul"},"skaBlocks":{"cx":"[\u0026\u003eli]:flex [\u0026\u003e.content]:[\u0026\u003eli]:flex *:[\u0026\u003e.image]:[\u0026\u003eli]:object-cover [\u0026\u003e.image]:[\u0026\u003eli]:overflow-hidden [\u0026\u003eli]:flex-row [\u0026\u003e.content]:[\u0026\u003eli]:flex-col [\u0026\u003eli]:gap-3.5 [\u0026\u003eli]:items-center space-y-3.5 *:[\u0026\u003e.image]:[\u0026\u003eli]:w-full *:[\u0026\u003e.image]:[\u0026\u003eli]:h-full [\u0026\u003e.image]:[\u0026\u003eli]:size-12 [\u0026\u003e.header]:[\u0026\u003e.content]:[\u0026\u003eli]:text-lg/tight [\u0026\u003e.description]:[\u0026\u003e.content]:[\u0026\u003eli]:text-sm/tight [\u0026\u003e.header]:[\u0026\u003e.content]:[\u0026\u003eli]:font-semibold [\u0026\u003e.description]:[\u0026\u003e.content]:[\u0026\u003eli]:text-site-subtext [\u0026\u003e.image]:[\u0026\u003eli]:rounded-full *:[\u0026\u003e.image]:[\u0026\u003eli]:rounded-[inherit]","t":1709756495,"css":".space-y-3 \u003e :not([hidden]) ~ :not([hidden]){\u002d\u002dtw-space-y-reverse:0;margin-top:calc(var(\u002d\u002dska-spacing-3) * calc(1 - var(\u002d\u002dtw-space-y-reverse)));margin-bottom:calc(var(\u002d\u002dska-spacing-3) * var(\u002d\u002dtw-space-y-reverse))}.space-y-3\\.5 \u003e :not([hidden]) ~ :not([hidden]){\u002d\u002dtw-space-y-reverse:0;margin-top:calc(var(\u002d\u002dska-spacing-3\\.5) * calc(1 - var(\u002d\u002dtw-space-y-reverse)));margin-bottom:calc(var(\u002d\u002dska-spacing-3\\.5) * var(\u002d\u002dtw-space-y-reverse))}.\\[\\\u0026\\\u003eli\\]\\:flex\u003eli{display:flex}.\\[\\\u0026\\\u003eli\\]\\:flex-row\u003eli{flex-direction:row}.\\[\\\u0026\\\u003eli\\]\\:items-center\u003eli{align-items:center}.\\[\\\u0026\\\u003eli\\]\\:gap-3\\.5\u003eli{gap:var(\u002d\u002dska-spacing-3\\.5)}.\\[\\\u0026\\\u003e\\.content\\]\\:\\[\\\u0026\\\u003eli\\]\\:flex\u003eli\u003e.content{display:flex}.\\[\\\u0026\\\u003e\\.content\\]\\:\\[\\\u0026\\\u003eli\\]\\:flex-col\u003eli\u003e.content{flex-direction:column}.\\[\\\u0026\\\u003e\\.description\\]\\:\\[\\\u0026\\\u003e\\.content\\]\\:\\[\\\u0026\\\u003eli\\]\\:text-sm\\/tight\u003eli\u003e.content\u003e.description{font-size:var(\u002d\u002dska-font-size-sm);line-height:1.25}.\\[\\\u0026\\\u003e\\.description\\]\\:\\[\\\u0026\\\u003e\\.content\\]\\:\\[\\\u0026\\\u003eli\\]\\:text-site-subtext\u003eli\u003e.content\u003e.description{\u002d\u002dtw-text-opacity:1;color:rgba(var(\u002d\u002dska-rgb-site-subtext),1)}.\\[\\\u0026\\\u003e\\.header\\]\\:\\[\\\u0026\\\u003e\\.content\\]\\:\\[\\\u0026\\\u003eli\\]\\:text-lg\\/tight\u003eli\u003e.content\u003e.header{font-size:var(\u002d\u002dska-font-size-lg);line-height:1.25}.\\[\\\u0026\\\u003e\\.header\\]\\:\\[\\\u0026\\\u003e\\.content\\]\\:\\[\\\u0026\\\u003eli\\]\\:font-semibold\u003eli\u003e.content\u003e.header{font-weight:var(\u002d\u002dska-font-weight-semibold)}.\\[\\\u0026\\\u003e\\.image\\]\\:\\[\\\u0026\\\u003eli\\]\\:size-12\u003eli\u003e.image{width:var(\u002d\u002dska-spacing-12);height:var(\u002d\u002dska-spacing-12)}.\\[\\\u0026\\\u003e\\.image\\]\\:\\[\\\u0026\\\u003eli\\]\\:overflow-hidden\u003eli\u003e.image{overflow:hidden}.\\[\\\u0026\\\u003e\\.image\\]\\:\\[\\\u0026\\\u003eli\\]\\:rounded-full\u003eli\u003e.image{border-radius:var(\u002d\u002dska-border-radius-full)}.\\*\\:\\[\\\u0026\\\u003e\\.image\\]\\:\\[\\\u0026\\\u003eli\\]\\:h-full\u003eli\u003e.image \u003e *{height:100%}.\\*\\:\\[\\\u0026\\\u003e\\.image\\]\\:\\[\\\u0026\\\u003eli\\]\\:w-full\u003eli\u003e.image \u003e *{width:100%}.\\*\\:\\[\\\u0026\\\u003e\\.image\\]\\:\\[\\\u0026\\\u003eli\\]\\:rounded-\\[inherit\\]\u003eli\u003e.image \u003e *{border-radius:inherit}.\\*\\:\\[\\\u0026\\\u003e\\.image\\]\\:\\[\\\u0026\\\u003eli\\]\\:object-cover\u003eli\u003e.image \u003e *{-o-object-fit:cover;object-fit:cover}"},"skaBlocksSelectors":{"[\u0026\u003eli]":{"skaBlocksDisplay":{"v":{"$":{"@":"flex"}}},"skaBlocksFlexDirection":{"v":{"$":{"@":"row"}}},"skaBlocksAlignItems":{"v":{"$":{"@":"center"}}},"skaBlocksSelectors":{"[\u0026\u003e.image]":{"skaBlocksSize":{"v":{"$":{"@":"12"}}},"skaBlocksBorderRadius":{"v":{"$":{"@":"full"}}},"skaBlocksSelectors":{"*":{"skaBlocksWidth":{"v":{"$":{"@":"full"}}},"skaBlocksHeight":{"v":{"$":{"@":"full"}}},"skaBlocksBorderRadius":{"v":{"$":{"@":"[inherit]"}},"a":["[inherit]"]},"skaBlocksObjectFit":{"v":{"$":{"@":"cover"}}}}},"skaBlocksOverflow":{"v":{"$":{"@":"hidden"}}}},"[\u0026\u003e.content]":{"skaBlocksDisplay":{"v":{"$":{"@":"flex"}}},"skaBlocksFlexDirection":{"v":{"$":{"@":"col"}}},"skaBlocksSelectors":{"[\u0026\u003e.header]":{"skaBlocksFontWeight":{"v":{"$":{"@":"semibold"}}},"skaBlocksFontSize":{"v":{"$":{"@":"lg/tight"}}}},"[\u0026\u003e.description]":{"skaBlocksTextColor":{"v":{"$":{"@":"site-subtext"}}},"skaBlocksFontSize":{"v":{"$":{"@":"sm/tight"}}}}}}},"skaBlocksGap":{"v":{"$":{"@":"3.5"}}}}}} -->
<ul class="[&>li]:flex [&>.content]:[&>li]:flex *:[&>.image]:[&>li]:object-cover [&>.image]:[&>li]:overflow-hidden [&>li]:flex-row [&>.content]:[&>li]:flex-col [&>li]:gap-3.5 [&>li]:items-center space-y-3.5 *:[&>.image]:[&>li]:w-full *:[&>.image]:[&>li]:h-full [&>.image]:[&>li]:size-12 [&>.header]:[&>.content]:[&>li]:text-lg/tight [&>.description]:[&>.content]:[&>li]:text-sm/tight [&>.header]:[&>.content]:[&>li]:font-semibold [&>.description]:[&>.content]:[&>li]:text-site-subtext [&>.image]:[&>li]:rounded-full *:[&>.image]:[&>li]:rounded-[inherit] wp-block-ska-element"><!-- wp:ska/element {"skaBlocksAs":{"element":"li"}} -->
<li class="wp-block-ska-element"><!-- wp:ska/image {"skaBlocks":{"cx":"","t":1709756495,"css":""},"className":"image"} -->
<div role="figure" class="wp-block-ska-image image">
<svg class="ska-placeholder" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
	<rect width="100%" height="100%" fill="#ddd"/>
	<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 512 512">
		<path style="opacity:0.1" d="m203.77 188c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.75-24-24-24zm147.55-44h-192c-17.225 0-31.555 14.325-31.555 32v160c0 17.675 14.325 32 31.55 32h192c17.675 0 32-14.325 32-32v-160c5e-3 -17.675-13.895-32-31.995-32zm8 188.65-68.4-92.95c-1.25-2.3-4.1-3.7-7.15-3.7-3.0565 0-5.91 1.384-7.605 3.6895l-53.3 72.05-18.545-23.05c-1.7205-2.1395-4.467-3.4045-7.385-3.4045-2.921 0-5.665 1.2645-7.39 3.4045l-37.76 46.905v0l-0.02-159.59c0-4.411 3.589-8 8-8h192c4.411 0 8 3.589 8 8v156.65z" stroke-width=".5"/>
	</svg>
</svg>
</div>
<!-- /wp:ska/image -->

<!-- wp:ska/element {"className":"content","skaBlocks":{"cx":"","t":1709756495,"css":""}} -->
<div class="wp-block-ska-element content"><!-- wp:ska/text {"className":"header","skaBlocks":{"cx":"","t":1709756495,"css":""}} -->
<span class="wp-block-ska-text ska-text header">Nullam mollis sit amet</span>
<!-- /wp:ska/text -->

<!-- wp:ska/text {"className":"description","skaBlocks":{"cx":"","t":1709756495,"css":""}} -->
<span class="wp-block-ska-text ska-text description">Fusce maximus risus eu dignissim posuere. Duis eget luctus eros.</span>
<!-- /wp:ska/text --></div>
<!-- /wp:ska/element --></li>
<!-- /wp:ska/element -->

<!-- wp:ska/element {"skaBlocksAs":{"element":"li"}} -->
<li class="wp-block-ska-element"><!-- wp:ska/image {"skaBlocks":{"cx":"","t":1709756495,"css":""},"className":"image"} -->
<div role="figure" class="wp-block-ska-image image">
<svg class="ska-placeholder" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
	<rect width="100%" height="100%" fill="#ddd"/>
	<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 512 512">
		<path style="opacity:0.1" d="m203.77 188c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.75-24-24-24zm147.55-44h-192c-17.225 0-31.555 14.325-31.555 32v160c0 17.675 14.325 32 31.55 32h192c17.675 0 32-14.325 32-32v-160c5e-3 -17.675-13.895-32-31.995-32zm8 188.65-68.4-92.95c-1.25-2.3-4.1-3.7-7.15-3.7-3.0565 0-5.91 1.384-7.605 3.6895l-53.3 72.05-18.545-23.05c-1.7205-2.1395-4.467-3.4045-7.385-3.4045-2.921 0-5.665 1.2645-7.39 3.4045l-37.76 46.905v0l-0.02-159.59c0-4.411 3.589-8 8-8h192c4.411 0 8 3.589 8 8v156.65z" stroke-width=".5"/>
	</svg>
</svg>
</div>
<!-- /wp:ska/image -->

<!-- wp:ska/element {"className":"content","skaBlocks":{"cx":"","t":1709756495,"css":""}} -->
<div class="wp-block-ska-element content"><!-- wp:ska/text {"className":"header","skaBlocks":{"cx":"","t":1709756495,"css":""}} -->
<span class="wp-block-ska-text ska-text header">Maecenas dignissim arcu at</span>
<!-- /wp:ska/text -->

<!-- wp:ska/text {"className":"description","skaBlocks":{"cx":"","t":1709756495,"css":""}} -->
<span class="wp-block-ska-text ska-text description">Pellentesque tristique, urna vel pharetra scelerisque.</span>
<!-- /wp:ska/text --></div>
<!-- /wp:ska/element --></li>
<!-- /wp:ska/element -->

<!-- wp:ska/element {"skaBlocksAs":{"element":"li"}} -->
<li class="wp-block-ska-element"><!-- wp:ska/image {"skaBlocks":{"cx":"","t":1709756495,"css":""},"className":"image"} -->
<div role="figure" class="wp-block-ska-image image">
<svg class="ska-placeholder" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
	<rect width="100%" height="100%" fill="#ddd"/>
	<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 512 512">
		<path style="opacity:0.1" d="m203.77 188c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.75-24-24-24zm147.55-44h-192c-17.225 0-31.555 14.325-31.555 32v160c0 17.675 14.325 32 31.55 32h192c17.675 0 32-14.325 32-32v-160c5e-3 -17.675-13.895-32-31.995-32zm8 188.65-68.4-92.95c-1.25-2.3-4.1-3.7-7.15-3.7-3.0565 0-5.91 1.384-7.605 3.6895l-53.3 72.05-18.545-23.05c-1.7205-2.1395-4.467-3.4045-7.385-3.4045-2.921 0-5.665 1.2645-7.39 3.4045l-37.76 46.905v0l-0.02-159.59c0-4.411 3.589-8 8-8h192c4.411 0 8 3.589 8 8v156.65z" stroke-width=".5"/>
	</svg>
</svg>
</div>
<!-- /wp:ska/image -->

<!-- wp:ska/element {"className":"content","skaBlocks":{"cx":"","t":1709756495,"css":""}} -->
<div class="wp-block-ska-element content"><!-- wp:ska/text {"className":"header","skaBlocks":{"cx":"","t":1709756495,"css":""}} -->
<span class="wp-block-ska-text ska-text header">Cras volutpat luctus venenatis</span>
<!-- /wp:ska/text -->

<!-- wp:ska/text {"className":"description","skaBlocks":{"cx":"","t":1709756495,"css":""}} -->
<span class="wp-block-ska-text ska-text description">Sed volutpat gravida purus. Fusce facilisis lorem id tempus elementum.</span>
<!-- /wp:ska/text --></div>
<!-- /wp:ska/element --></li>
<!-- /wp:ska/element --></ul>
<!-- /wp:ska/element -->