Component structure: Wrapper vs Item (UL/LI, Grid, Pill Lists) – how do you handle this?

How To
1

Hi everyone,

I’m running into this situation quite often where individual “items” only make sense in combination with a specific wrapper — typically with <ul> / <li> elements or grid / flex wrappers.

Example: a pill list

<ul class="pill-list">
  <li>Label 1</li>
  <li>Label 2</li>
  <li>Label 3</li>
</ul>

I’m currently unsure what the cleanest component split is here, especially regarding reusability, clean markup, and a good authoring experience in the builder.

How are you handling this at the moment?

  • Option A: Two components

    • PillList (UL) with a slot / child container

    • Pill (LI) as the child element

  • Option B: Only an Pill component (LI)

    • The wrapper (UL) is built normally in the layout without its own component

  • Option C: Something else

    • e.g. one component that internally renders the UL/LI structure, repeater, query loop, etc.

What has worked best for you so far — and why?

Thanks!