Tailwind CSS Description Lists Blocks

Description Lists

Explore detailed and clear admin user description lists with vibrant icons, avatars, badges and links.

A profile card places labels and values in a two-column list under a cover image and avatar.

Create a responsive UI block named "User Profile Card with Description List" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/data-display/description-lists/#user-profile-card-with-description-list. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Build only this source block. Do not add unrelated page chrome, marketing sections, dashboard widgets, extra cards, extra modals, placeholder states, or footer content unless they are present in the source block.

Source metadata:
- Catalog family: data-display/description-lists
- Block ID: user-profile-card-with-description-list
- Source description: A profile card places labels and values in a two-column list under a cover image and avatar.
- Preview iframe: https://preline.co/blocks/data-display/description-lists/iframes/pro/user-profile-card-with-description-list.html (repo path: blocks/data-display/description-lists/iframes/pro/user-profile-card-with-description-list.html)
- Source markup reference:
  - partials/pro/admin-dashboard/sources/user-profile-card-with-description-list.html
  - partials/pro/sources/overlay-footer.html

Use the source HTML tab and referenced partials as the source of truth. Preserve exact visible copy, content order, hierarchy, component density, spacing relationships, borders, radii, icons, status markers, dropdown/menu rows, form states, responsive order, and interaction content. If the source imports shared partials or assets, reuse those local components/assets when the destination can import them; otherwise recreate their visible structure faithfully from the source.

Block-specific fidelity rules:
- Preserve row/list density, column meaning, trailing metadata/action gutters, truncation mechanics, sorting/filter controls, pagination, status icons, and empty/loading states.
- Text columns should truncate before reserved metadata/action lanes rather than wrapping under them or reaching the row edge.
- Source content inventory (from the source markup):
  - Card is `bg-card border border-card-line shadow-2xs rounded-xl` and stacks four regions: an `h-40` cover figure with `rounded-t-xl overflow-hidden`, the avatar, a `p-4 sm:p-8` body, and a footer.
  - The cover is a flat geometric inline SVG (`preserveAspectRatio="xMidYMid slice"`, `viewBox="0 0 1113 161"`) built from a `#B2E7FE` background plus three rotated rectangles in `#FF8F5D`, `#3ECEED`, and `#4C48FF` - keep the exact SVG rather than substituting a photo or gradient.
  - The avatar overlaps the cover via `-mt-24`: a `size-30 mx-auto border-4 border-card rounded-full` frame around `<img class="object-cover size-full rounded-full" alt="Hero Image">` sourced from `https://images.unsplash.com/photo-1670272505340-d906d8d77d03?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80`.
  - The body is a single `<dl class="grid grid-cols-2 gap-y-2 gap-x-4">` with twelve pairs, in this order: `Full name:` / `Amanda Harvey`, `Email:` / `amanda@site.com`, `Phone:` / `+1 (609) 972-22-22`, `Organization:` / `Notion`, `Department:` / `-`, `Account type:` / `Individual`, `Country:` / `United Kingdom`, `City:` / `London`, `State:` / `-`, `Address line 1:` / `45 Roker Terrace, Latheronwheel`, `Address line 2:` / `-`, `Zip code:` / `KW5 8NW`. Three fields intentionally show a bare hyphen as their value.
  - Labels are `text-end` muted `text-sm` ending with a colon; values are left-aligned `font-medium text-sm` foreground, so the two columns meet in the middle. The `Country` value additionally carries an inline 512-viewBox United Kingdom flag SVG at `shrink-0 size-4 rounded-full` before the text.
  - Footer is `p-4 flex flex-wrap justify-between gap-2 border-t border-overlay-footer`: a `Delete` button on the left styled as a layer/secondary button with destructive text, and a right-aligned pair `Cancel` (layer/secondary) then `Add user` (primary).
  - Fully static; no Preline JS plugins - the footer buttons carry no `data-hs-overlay` in this variant, and there are no dropdowns, tabs, or copy actions.

Token and Tailwind rules:
- Treat source token classes as semantic roles, not fixed class names to blindly copy.
- Map every source `primary` role to the destination project's current primary token/config/CSS variable. Active links, checked states, progress lines, focus rings, primary gradients, logo primary fills/strokes, and primary buttons must share that destination primary color.
- Do not hardcode Preline blue or emit `text-blue-*`, `bg-blue-*`, `border-blue-*`, `fill-blue-*`, `stroke-blue-*`, `from-blue-*`, `via-blue-*`, `to-blue-*`, or fixed blue hex/rgb values for primary roles unless the destination primary is explicitly blue.
- Before using source-only token classes such as `text-foreground-inverse`, `bg-layer`, `border-layer-line`, `bg-navbar`, `border-line-2`, `bg-dropdown`, or similar Preline tokens, inspect the destination Tailwind config, global CSS/theme variables, and existing components for an equivalent utility/token.
- Prefer existing destination utilities such as `text-white`, `text-primary-foreground`, `text-foreground`, `text-muted-foreground`, `bg-background`, `bg-card`, `bg-popover`, `border-border`, `bg-muted`, `bg-accent`, `ring-ring`, or app-specific tokens when they match the source role.
- If no equivalent exists, add the smallest project-appropriate token or utility before using it. Do not leave undefined source classes in the generated markup.

Asset and icon rules:
- Use exact source images, avatars, product media, branded SVGs, payment marks, channel logos, and app icons when the source provides them.
- Do not replace source assets with initials, emojis, generic icons, generated placeholders, or different stock media.
- Ordinary interface icons should match the destination icon system. If the project uses Lucide-style outline icons, keep the 24 viewBox, `fill="none"`, `stroke="currentColor"`, rounded caps/joins, and source stroke widths.
- Brand/source SVG shape is fixed content. Only map semantic colors such as primary fill/stroke to the destination token.

Behavior and accessibility:
- Preserve source interactions: links, buttons, dropdowns, tooltips, tabs, menus, drawers, modals, toggles, search, filters, form controls, validation states, loading/empty states, and open/closed defaults.
- For source behavior powered by Preline JS or a third-party package, inspect installed dependencies and existing primitives first. Reuse a destination primitive only when it can preserve the source geometry, states, accessibility, and behavior.
- Treat new dependencies as allowed by default unless the user, repository instructions, or package policy explicitly prohibit them. When no faithful equivalent exists, install/use the Preline UI runtime/plugin or the exact source third-party package; do not silently substitute ad hoc JavaScript or custom React state.
- Only under an explicit dependency prohibition may you implement a scoped framework-native equivalent. It must preserve keyboard and focus management, placement and layering, responsive behavior, and accessibility; static or simplified approximations are not acceptable.
- Use semantic HTML and accessible names. Keep `aria-current`, `aria-expanded`, `aria-haspopup`, `role`, labels, focus states, and keyboard behavior when the source exposes them or the destination primitive requires them.
- Desktop and mobile states must not overlap text, clip controls, or shift layout unexpectedly. Controls with icons, counters, badges, and labels should keep stable dimensions across hover/focus/active states.

Final QA:
- Compare the result against the source preview and HTML tab.
- Verify primary color follows the destination project, not Preline's default blue.
- Verify all emitted classes exist in the destination or are added deliberately.
- Verify responsive layout, focus states, dropdown/popover layering, long-text truncation, and source asset paths.
- Keep the final implementation scoped to this block and avoid unrelated refactors.

<div class="bg-card border border-card-line shadow-2xs rounded-xl">
                      
                      <figure class="shrink-0 h-40 overflow-hidden rounded-t-xl">
                        <svg class="w-full h-40 rounded-t-xl" preserveAspectRatio="xMidYMid slice" width="1113" height="161" viewBox="0 0 1113 161" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_697_201879)"><rect x="1" width="1112" height="348" fill="#B2E7FE"/><rect width="185.209" height="704.432" transform="matrix(0.50392 0.86375 -0.860909 0.508759 435.452 -177.87)" fill="#FF8F5D"/><rect width="184.653" height="378.667" transform="matrix(0.849839 -0.527043 0.522157 0.852849 -10.4556 -16.4521)" fill="#3ECEED"/><rect width="184.653" height="189.175" transform="matrix(0.849839 -0.527043 0.522157 0.852849 35.4456 58.5195)" fill="#4C48FF"/></g><defs><clipPath id="clip0_697_201879"><rect x="0.5" width="1112" height="161" rx="12" fill="white"/></clipPath></defs></svg>
                      </figure>

<div class="-mt-24">
                        <div class="relative flex size-30 mx-auto border-4 border-card rounded-full">
                          <img class="object-cover size-full rounded-full" src="https://images.unsplash.com/photo-1670272505340-d906d8d77d03?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Hero Image">
                        </div>
                      </div>

<div class="p-4 sm:p-8">
                        
                        <dl class="grid grid-cols-2 gap-y-2 gap-x-4">
                          <dt class="py-1 text-end text-sm text-muted-foreground-1">
                            Full name:
                          </dt>
                          <dd class="py-1 font-medium text-sm text-foreground">
                            Amanda Harvey
                          </dd>

<dt class="py-1 text-end text-sm text-muted-foreground-1">
                            Email:
                          </dt>
                          <dd class="py-1 font-medium text-sm text-foreground">
                            amanda@site.com
                          </dd>

<dt class="py-1 text-end text-sm text-muted-foreground-1">
                            Phone:
                          </dt>
                          <dd class="py-1 font-medium text-sm text-foreground">
                            +1 (609) 972-22-22
                          </dd>

<dt class="py-1 text-end text-sm text-muted-foreground-1">
                            Organization:
                          </dt>
                          <dd class="py-1 font-medium text-sm text-foreground">
                            Notion
                          </dd>

<dt class="py-1 text-end text-sm text-muted-foreground-1">
                            Department:
                          </dt>
                          <dd class="py-1 font-medium text-sm text-foreground">
                            -
                          </dd>

<dt class="py-1 text-end text-sm text-muted-foreground-1">
                            Account type:
                          </dt>
                          <dd class="py-1 font-medium text-sm text-foreground">
                            Individual
                          </dd>

<dt class="py-1 text-end text-sm text-muted-foreground-1">
                            Country:
                          </dt>
                          <dd class="py-1 font-medium text-sm text-foreground">
                            <span class="flex items-center gap-x-1.5"><svg class="shrink-0 size-4 rounded-full" xmlns="http://www.w3.org/2000/svg" id="flag-icon-css-gb" viewBox="0 0 512 512"><path fill="#012169" d="M0 0h512v512H0z"/><path fill="#FFF" d="M512 0v64L322 256l190 187v69h-67L254 324 68 512H0v-68l186-187L0 74V0h62l192 188L440 0z"/><path fill="#C8102E" d="M184 324l11 34L42 512H0v-3l184-185zm124-12l54 8 150 147v45L308 312zM512 0L320 196l-4-44L466 0h46zM0 1l193 189-59-8L0 49V1z"/><path fill="#FFF" d="M176 0v512h160V0H176zM0 176v160h512V176H0z"/><path fill="#C8102E" d="M0 208v96h512v-96H0zM208 0v512h96V0h-96z"/></svg> United Kingdom</span>
                          </dd>

<dt class="py-1 text-end text-sm text-muted-foreground-1">
                            City:
                          </dt>
                          <dd class="py-1 font-medium text-sm text-foreground">
                            London
                          </dd>

<dt class="py-1 text-end text-sm text-muted-foreground-1">
                            State:
                          </dt>
                          <dd class="py-1 font-medium text-sm text-foreground">
                            -
                          </dd>

<dt class="py-1 text-end text-sm text-muted-foreground-1">
                            Address line 1:
                          </dt>
                          <dd class="py-1 font-medium text-sm text-foreground">
                            45 Roker Terrace, Latheronwheel
                          </dd>

<dt class="py-1 text-end text-sm text-muted-foreground-1">
                            Address line 2:
                          </dt>
                          <dd class="py-1 font-medium text-sm text-foreground">
                            -
                          </dd>

<div class="p-4 flex flex-wrap justify-between gap-2 border-t border-overlay-footer">
                        <div>
                          <button type="button" class="py-2 px-3 inline-flex justify-center items-center text-start bg-layer border border-layer-line text-destructive text-sm font-medium rounded-lg shadow-2xs align-middle hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus">
                            Delete
                          </button>
                        </div>

<div class="flex-1 flex justify-end items-center gap-2">
                          <button type="button" class="py-2 px-3 text-nowrap inline-flex justify-center items-center text-start whitespace-nowrap bg-layer border border-layer-line text-layer-foreground text-sm font-medium rounded-lg shadow-2xs align-middle hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus disabled:opacity-50 disabled:pointer-events-none">
                            Cancel
                          </button>

Dashed Description List with Copy Actions Pro

Dashed dividers separate long field labels from copyable values in a narrow panel.

Create a responsive UI block named "Dashed Description List with Copy Actions" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/data-display/description-lists/#dashed-description-list-with-copy-actions. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Source metadata:
- Catalog family: data-display/description-lists
- Block ID: dashed-description-list-with-copy-actions
- Source description: Dashed dividers separate long field labels from copyable values in a narrow panel.
- Preview iframe: https://preline.co/blocks/data-display/description-lists/iframes/pro/dashed-description-list-with-copy-actions.html (repo path: blocks/data-display/description-lists/iframes/pro/dashed-description-list-with-copy-actions.html)
- Source markup reference:
  - partials/pro/crm-dashboard/layouts-components/user-info-description-stretched-between-list.html
  - partials/pro/crm-dashboard/sources/user-info-description-stretched-between-list-item.html

Block-specific fidelity rules:
- Preserve row/list density, column meaning, trailing metadata/action gutters, truncation mechanics, sorting/filter controls, pagination, status icons, and empty/loading states.
- Text columns should truncate before reserved metadata/action lanes rather than wrapping under them or reaching the row edge.
- Source content inventory (from the source markup):
  - Exactly four rows, in this order: `Full name:` / `Amanda Harvey`, `Email:` / `amanda@site.com`, `Phone:` / `+1 (062) 109-9222`, `Address:` / `4222 River Rd, New York, NY 31904, United States`. Every label ends with a colon and there is no heading, card, or footer around the list.
  - The list wrapper is `divide-y divide-dashed divide-line-2`, so rows are separated by dashed horizontal rules; each row is `py-3 grid grid-cols-2 gap-x-3` with the muted label in the left column and the value column as `flex justify-end gap-2`, right-aligning value plus action at every breakpoint.
  - All four rows carry a copy action: a `size-5` icon button with `js-clipboard`, `data-clipboard-target` pointing at the value span's id, `data-clipboard-action="copy"`, and `data-clipboard-success-text="Code copied"`.
  - Each copy button holds two stacked `size-3.5` icons - a clipboard icon shown by default and a check icon that is `hidden` until success - plus a Preline tooltip whose label reads `Copy ` followed by that row's field name (for example `Copy Email`).
  - Behavior needs clipboard.js and the Preline tooltip runtime; there are no dropdowns, links, editable fields, or empty-state rows in this variant.
  - The standalone preview centers the list in `w-full max-w-2xl mx-auto` with `py-10 xl:py-0 px-4 xl:px-0`; the list itself has no border, background, radius, or shadow.

<div class="divide-y divide-dashed divide-line-2">
                      
                      <div class="py-3 grid grid-cols-2 gap-x-3">
                        <span class="block text-sm text-muted-foreground-1">
                          Full name:
                        </span>

<div class="flex justify-end gap-2">
                          <span id="hs-pro-ccdcfn" class="text-sm text-foreground">Amanda Harvey</span>
                          <button type="button" class="js-clipboard [--is-toggle-tooltip:false] hs-tooltip size-5 shrink-0 inline-flex justify-center items-center gap-x-2 rounded-md text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden sm:focus:bg-muted-focus"
                            data-clipboard-target="#hs-pro-ccdcfn"
                            data-clipboard-action="copy"
                            data-clipboard-success-text="Code copied">
                            <svg class="js-clipboard-default shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
                            <svg class="js-clipboard-success hidden size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity hidden invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                              <span class="js-clipboard-success-text">Copy Full name</span>
                            </span>
                          </button>
                        </div>
                      </div>

<div class="py-3 grid grid-cols-2 gap-x-3">
                        <span class="block text-sm text-muted-foreground-1">
                          Email:
                        </span>

<div class="flex justify-end gap-2">
                          <span id="hs-pro-ccdcem" class="text-sm text-foreground">amanda@site.com</span>
                          <button type="button" class="js-clipboard [--is-toggle-tooltip:false] hs-tooltip size-5 shrink-0 inline-flex justify-center items-center gap-x-2 rounded-md text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden sm:focus:bg-muted-focus"
                            data-clipboard-target="#hs-pro-ccdcem"
                            data-clipboard-action="copy"
                            data-clipboard-success-text="Code copied">
                            <svg class="js-clipboard-default shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
                            <svg class="js-clipboard-success hidden size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity hidden invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                              <span class="js-clipboard-success-text">Copy Email</span>
                            </span>
                          </button>
                        </div>
                      </div>
                      
  
                      
                      <div class="py-3 grid grid-cols-2 gap-x-3">
                        <span class="block text-sm text-muted-foreground-1">
                          Phone:
                        </span>

<div class="flex justify-end gap-2">
                          <span id="hs-pro-ccdcph" class="text-sm text-foreground">+1 (062) 109-9222</span>
                          <button type="button" class="js-clipboard [--is-toggle-tooltip:false] hs-tooltip size-5 shrink-0 inline-flex justify-center items-center gap-x-2 rounded-md text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden sm:focus:bg-muted-focus"
                            data-clipboard-target="#hs-pro-ccdcph"
                            data-clipboard-action="copy"
                            data-clipboard-success-text="Code copied">
                            <svg class="js-clipboard-default shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
                            <svg class="js-clipboard-success hidden size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity hidden invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                              <span class="js-clipboard-success-text">Copy Phone</span>
                            </span>
                          </button>
                        </div>
                      </div>

<div class="py-3 grid grid-cols-2 gap-x-3">
                        <span class="block text-sm text-muted-foreground-1">
                          Address:
                        </span>

<div class="flex justify-end gap-2">
                          <span id="hs-pro-ccdcad" class="text-sm text-foreground">4222 River Rd, New York, NY 31904, United States</span>
                          <button type="button" class="js-clipboard [--is-toggle-tooltip:false] hs-tooltip size-5 shrink-0 inline-flex justify-center items-center gap-x-2 rounded-md text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden sm:focus:bg-muted-focus"
                            data-clipboard-target="#hs-pro-ccdcad"
                            data-clipboard-action="copy"
                            data-clipboard-success-text="Code copied">
                            <svg class="js-clipboard-default shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
                            <svg class="js-clipboard-success hidden size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity hidden invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                              <span class="js-clipboard-success-text">Copy Address</span>
                            </span>
                          </button>
                        </div>
                      </div>
                      
                    </div>

Open related CRM customer details page

Description List with Pointer Markers Pro

Small pointer markers sit between each label and value instead of using separate columns.

Create a responsive UI block named "Description List with Pointer Markers" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/data-display/description-lists/#description-list-with-pointer-markers. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Source metadata:
- Catalog family: data-display/description-lists
- Block ID: description-list-with-pointer-markers
- Source description: Small pointer markers sit between each label and value instead of using separate columns.
- Preview iframe: https://preline.co/blocks/data-display/description-lists/iframes/pro/description-list-with-pointer-markers.html (repo path: blocks/data-display/description-lists/iframes/pro/description-list-with-pointer-markers.html)
- Source markup reference:
  - partials/pro/crm-dashboard/layouts-components/description-lists-with-pointer-icon.html

<div class="flex flex-col gap-y-1">
                    
                    <div class="py-0.5 flex items-center gap-x-2">
                      <span class="flex items-center gap-x-2.5 text-xs text-muted-foreground-2">
                        <span class="size-5 flex shrink-0 justify-center items-center">
                          <svg class="shrink-0 size-3.5 text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
                        </span>
                        Total hours
                      </span>
                      <svg class="shrink-0 size-3 text-muted-foreground-2" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
                      <span class="text-sm text-foreground">
                        56h 1m
                      </span>
                    </div>

<div class="py-0.5 flex items-center gap-x-2">
                      <span class="flex items-center gap-x-2.5 text-xs text-muted-foreground-2">
                        <span class="size-5 flex shrink-0 justify-center items-center">
                          <svg class="shrink-0 size-3.5 text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg>
                        </span>
                        Days
                      </span>
                      <svg class="shrink-0 size-3 text-muted-foreground-2" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
                      <span class="text-sm text-foreground">
                        18
                      </span>
                    </div>

<div class="py-0.5 flex items-center gap-x-2">
                      <span class="flex items-center gap-x-2.5 text-xs text-muted-foreground-2">
                        <span class="size-5 flex shrink-0 justify-center items-center">
                          <svg class="shrink-0 size-3.5 text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8"></path><path d="M12 18V6"></path></svg>
                        </span>
                        Project cost
                      </span>
                      <svg class="shrink-0 size-3 text-muted-foreground-2" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
                      <span class="text-sm text-foreground">
                        $784,382,000
                      </span>
                    </div>

<div class="py-0.5 flex items-center gap-x-2">
                      <span class="flex items-center gap-x-2.5 text-xs text-muted-foreground-2">
                        <span class="size-5 flex shrink-0 justify-center items-center">
                          <svg class="shrink-0 size-3.5 text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><path d="m9 11 3 3L22 4"></path></svg>
                        </span>
                        Tasks
                      </span>
                      <svg class="shrink-0 size-3 text-muted-foreground-2" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
                      <span class="text-sm text-foreground">
                        31
                      </span>
                    </div>
                    
                  </div>

Open related CRM customer activity page

Collapsible Description List with Copy Actions Pro

A compact spec list can expand for longer field sets without losing the copy action.

Create a responsive UI block named "Collapsible Description List with Copy Actions" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/data-display/description-lists/#collapsible-description-list-with-copy-actions. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Source metadata:
- Catalog family: data-display/description-lists
- Block ID: collapsible-description-list-with-copy-actions
- Source description: A compact spec list can expand for longer field sets without losing the copy action.
- Preview iframe: https://preline.co/blocks/data-display/description-lists/iframes/pro/collapsible-description-list-with-copy-actions.html (repo path: blocks/data-display/description-lists/iframes/pro/collapsible-description-list-with-copy-actions.html)
- Source markup reference:
  - partials/pro/marketplace/layouts-components/list-description-with-horizontal-divider.html

Block-specific fidelity rules:
- Preserve row/list density, column meaning, trailing metadata/action gutters, truncation mechanics, sorting/filter controls, pagination, status icons, and empty/loading states.
- Text columns should truncate before reserved metadata/action lanes rather than wrapping under them or reaching the row edge.
- Source content inventory (from the source markup):
  - The list is a two-column `grid grid-cols-2 gap-x-3`; each label cell draws a dashed horizontal leader line with `after:absolute after:top-1/2 after:w-full after:mx-3 after:border-t after:border-dashed`, and the label text sits on an opaque background chip so the dashes stop at the text. The leader is hidden below `sm`, where labels are `text-end` instead of `text-start`.
  - Six rows are visible on first load, in order: `Article code` / `143483901`, `Color` / `White`, `Brand` / `Apple`, `Material` / `Aluminum`, `Number of Batteries` / `1 Lithium Polymer batteries required.`, `Compatible Devices` / `iPad`.
  - Five more rows live in a collapsed region that is `hidden` on first load: `Item dimensions` / `L x W x H 0.07 x 0.35 x 0.07 inches`, `Are Batteries Included` / `No`, `Batteries Required?` / `No`, `UPC` / `194253687870`, `Global Trade Identification Number` / `30194253687871` (the source uses a non-breaking space before `Number`).
  - The toggle sits below the lists and is a text-only primary link-button with a chevron that rotates 180 degrees when open; it swaps `Show more` for `Show less` and is wired with `data-hs-collapse` plus `aria-expanded="false"` and `aria-controls` pointing at the collapsed region (Preline HSCollapse).
  - Only the `Article code` row carries a copy action: a small square icon button using `js-clipboard` with `data-clipboard-target`, `data-clipboard-action="copy"`, and `data-clipboard-success-text="Code copied"`. Its default clipboard icon is swapped for a check icon on success, and its tooltip label reads `Copy link` before copying. This needs clipboard.js plus the Preline tooltip runtime.
  - The standalone preview centers the block in `w-full max-w-lg mx-auto` with `py-10 xl:py-0 px-4 xl:px-0`; there is no card, border, shadow, heading, or footer around the list.

<div class="grid grid-cols-2 gap-x-3">
                      <div class="py-1 relative overflow-hidden text-sm text-muted-foreground-1 text-end sm:text-start after:hidden sm:after:block after:absolute after:top-1/2 after:w-full after:mx-3 after:border-t after:border-dashed after:border-line-2">
                        <span class="relative z-1 pe-2 bg-background">Article code</span>
                      </div>
                      <div class="py-1 text-sm text-foreground">
                        <span id="hs-pro-shmaccl">143483901</span>
    
                        <button type="button" class="js-clipboard [--is-toggle-tooltip:false] hs-tooltip size-4 sm:size-6 shrink-0 inline-flex justify-center items-center gap-x-2 rounded-md text-foreground sm:hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden sm:focus:bg-muted-focus"
                          data-clipboard-target="#hs-pro-shmaccl"
                          data-clipboard-action="copy"
                          data-clipboard-success-text="Code copied">
                          <svg class="js-clipboard-default shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
                          <svg class="js-clipboard-success hidden size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
                          <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity hidden invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                            <span class="js-clipboard-success-text">Copy link</span>
                          </span>
                        </button>
                      </div>

<div class="py-1 relative overflow-hidden text-sm text-muted-foreground-1 text-end sm:text-start after:hidden sm:after:block after:absolute after:top-1/2 after:w-full after:mx-3 after:border-t after:border-dashed after:border-line-2">
                        <span class="relative z-1 pe-2 bg-background">Color</span>
                      </div>
                      <div class="py-1 text-sm text-foreground">
                        White
                      </div>

<div class="py-1 relative overflow-hidden text-sm text-muted-foreground-1 text-end sm:text-start after:hidden sm:after:block after:absolute after:top-1/2 after:w-full after:mx-3 after:border-t after:border-dashed after:border-line-2">
                        <span class="relative z-1 pe-2 bg-background">Brand</span>
                      </div>
                      <div class="py-1 text-sm text-foreground">
                        Apple
                      </div>

<div class="py-1 relative overflow-hidden text-sm text-muted-foreground-1 text-end sm:text-start after:hidden sm:after:block after:absolute after:top-1/2 after:w-full after:mx-3 after:border-t after:border-dashed after:border-line-2">
                        <span class="relative z-1 pe-2 bg-background">Material</span>
                      </div>
                      <div class="py-1 text-sm text-foreground">
                        Aluminum
                      </div>

<div class="py-1 relative overflow-hidden text-sm text-muted-foreground-1 text-end sm:text-start after:hidden sm:after:block after:absolute after:top-1/2 after:w-full after:mx-3 after:border-t after:border-dashed after:border-line-2">
                        <span class="relative z-1 pe-2 bg-background">Number of Batteries</span>
                      </div>
                      <div class="py-1 text-sm text-foreground">
                        1 Lithium Polymer batteries required.
                      </div>

<div class="py-1 relative overflow-hidden text-sm text-muted-foreground-1 text-end sm:text-start after:hidden sm:after:block after:absolute after:top-1/2 after:w-full after:mx-3 after:border-t after:border-dashed after:border-line-2">
                        <span class="relative z-1 pe-2 bg-background">Compatible Devices</span>
                      </div>
                      <div class="py-1 text-sm text-foreground">
                        iPad
                      </div>
                    </div>

<div id="hs-shmldwhdcid-heading" class="hs-collapse hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="hs-shmldwhdcid" role="region">
                      
                      <div class="grid grid-cols-2 gap-x-2">
                        <div class="py-1 relative overflow-hidden text-sm text-muted-foreground-1 text-end sm:text-start after:hidden sm:after:block after:absolute after:top-1/2 after:w-full after:mx-3 after:border-t after:border-dashed after:border-line-2">
                          <span class="relative z-1 pe-2 bg-background">Item dimensions</span>
                        </div>
                        <div class="py-1 text-sm text-foreground">
                          L x W x H 0.07 x 0.35 x 0.07 inches
                        </div>

<div class="py-1 relative overflow-hidden text-sm text-muted-foreground-1 text-end sm:text-start after:hidden sm:after:block after:absolute after:top-1/2 after:w-full after:mx-3 after:border-t after:border-dashed after:border-line-2">
                          <span class="relative z-1 pe-2 bg-background">Are Batteries Included</span>
                        </div>
                        <div class="py-1 text-sm text-foreground">
                          No
                        </div>

<div class="py-1 relative overflow-hidden text-sm text-muted-foreground-1 text-end sm:text-start after:hidden sm:after:block after:absolute after:top-1/2 after:w-full after:mx-3 after:border-t after:border-dashed after:border-line-2">
                          <span class="relative z-1 pe-2 bg-background">Batteries Required?</span>
                        </div>
                        <div class="py-1 text-sm text-foreground">
                          No
                        </div>

<div class="py-1 relative overflow-hidden text-sm text-muted-foreground-1 text-end sm:text-start after:hidden sm:after:block after:absolute after:top-1/2 after:w-full after:mx-3 after:border-t after:border-dashed after:border-line-2">
                          <span class="relative z-1 pe-2 bg-background">Global Trade Identification Number</span>
                        </div>
                        <div class="py-1 text-sm text-foreground">
                          30194253687871
                        </div>
                      </div>
                      
                    </div>

<div>
                      <button type="button" class="hs-collapse-toggle inline-flex items-center gap-x-1 font-medium text-sm text-primary underline-offset-4 hover:underline hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" id="hs-shmldwhdcid" aria-expanded="false" aria-controls="hs-shmldwhdcid-heading" data-hs-collapse="#hs-shmldwhdcid-heading">
                        <span class="hs-collapse-open:hidden">Show more</span>
                        <span class="hs-collapse-open:block hidden">Show less</span>
                        <svg class="hs-collapse-open:rotate-180 shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
                      </button>
                    </div>

Split User Details Description List Pro

Labels stay on one side while contact details stretch to the far edge of each row.

Create a responsive UI block named "Split User Details Description List" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/data-display/description-lists/#split-user-details-description-list. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Source metadata:
- Catalog family: data-display/description-lists
- Block ID: split-user-details-description-list
- Source description: Labels stay on one side while contact details stretch to the far edge of each row.
- Preview iframe: https://preline.co/blocks/data-display/description-lists/iframes/pro/split-user-details-description-list.html (repo path: blocks/data-display/description-lists/iframes/pro/split-user-details-description-list.html)
- Source markup reference:
  - partials/pro/work-management/sources/user-info-description-stretched-between-list.html

<dl class="grid grid-cols-2 gap-x-2">
                      <dt class="py-1 text-sm text-muted-foreground-1">
                        Role:
                      </dt>
                      <dd class="py-1 inline-flex justify-end items-center gap-x-2 text-end font-medium text-sm text-foreground">
                        Front-End Developer
                      </dd>

<dt class="py-1 text-sm text-muted-foreground-1">
                        Phone:
                      </dt>
                      <dd class="py-1 inline-flex justify-end items-center gap-x-2 text-end font-medium text-sm text-foreground">
                        (892) 312-5483
                      </dd>

<dt class="py-1 text-sm text-muted-foreground-1">
                        Email:
                      </dt>
                      <dd class="py-1 inline-flex justify-end items-center gap-x-2 text-end font-medium text-sm text-foreground">
                        amanda@email.com
                      </dd>

<dt class="py-1 text-sm text-muted-foreground-1">
                        Hourly price:
                      </dt>
                      <dd class="py-1 inline-flex justify-end items-center gap-x-2 text-end font-medium text-sm text-foreground">
                        $35-$55
                      </dd>
                    </dl>

Open related talents page

User Details Description List Pro

A simple split gives labels, values, and badges their own space without extra card chrome.

Create a responsive UI block named "User Details Description List" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/data-display/description-lists/#user-details-description-list. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Source metadata:
- Catalog family: data-display/description-lists
- Block ID: user-details-description-list
- Source description: A simple split gives labels, values, and badges their own space without extra card chrome.
- Preview iframe: https://preline.co/blocks/data-display/description-lists/iframes/pro/user-details-description-list.html (repo path: blocks/data-display/description-lists/iframes/pro/user-details-description-list.html)
- Source markup reference:
  - partials/pro/admin-dashboard/layouts-components/user-info-description-list.html

Block-specific fidelity rules:
- Preserve row/list density, column meaning, trailing metadata/action gutters, truncation mechanics, sorting/filter controls, pagination, status icons, and empty/loading states.
- Text columns should truncate before reserved metadata/action lanes rather than wrapping under them or reaching the row edge.
- Source content inventory (from the source markup):
  - Exactly five rows, in this order: `User ID:` / `#96810`, `Email:` / `anna@site.com`, `Phone:` / `+1 000-00-00`, `Address:` / `4970 Park Ave W, Ohio, 44723, Untied States`, `Signed up as:` / `Valid account`. Reproduce the `Untied States` spelling from the source verbatim.
  - Each row is `py-4 grid grid-cols-3 gap-x-4 border-t border-line-2` with the muted label in `col-span-1` and the value in `col-span-2`; the top border on every row means the first row also has a rule above it and there is no bottom rule after the last row. The three-column split does not change at any breakpoint.
  - The `User ID` value is the only link: an `<a href="#">` in the primary role with `decoration-2 hover:underline font-medium focus:underline`. All other values are plain `<p>` text.
  - The `Phone` value is preceded by an inline 512-viewBox United States flag SVG at `shrink-0 size-4 rounded-full` with `gap-x-2` to the number.
  - The `Signed up as` value is a rounded-full teal pill reading `Valid account` (`py-1.5 ps-1.5 pe-2.5 text-xs font-medium bg-teal-100 text-teal-800 dark:bg-teal-500/10 dark:text-teal-500`) with a leading `size-3` filled check-circle icon; its row adds `items-center` so the pill is vertically centered against the label.
  - The `Signed up as` row uses a fixed teal success color, not the destination primary; keep it in the success/positive role.
  - Fully static; no Preline JS plugins, dropdowns, copy buttons, or toggles. The standalone preview centers the list in `w-full max-w-sm mx-auto` with `py-10 xl:py-0 px-4 xl:px-0`.

<div class="py-4 grid grid-cols-3 gap-x-4 border-t border-line-2">
                      <div class="col-span-1">
                        <p class="text-sm text-muted-foreground-1">
                          User ID:
                        </p>
                      </div>
                      <div class="col-span-2">
                        <p>
                          <a class="text-sm text-primary decoration-2 hover:underline font-medium focus:outline-hidden focus:underline" href="#">
                            #96810
                          </a>
                        </p>
                      </div>
                    </div>

<div class="py-4 grid grid-cols-3 gap-x-4 border-t border-line-2">
                      <div class="col-span-1">
                        <p class="text-sm text-muted-foreground-1">
                          Email:
                        </p>
                      </div>
                      <div class="col-span-2">
                        <p class="text-sm text-foreground">
                          anna@site.com
                        </p>
                      </div>
                    </div>

<div class="py-4 grid grid-cols-3 gap-x-4 border-t border-line-2">
                      <div class="col-span-1">
                        <p class="text-sm text-muted-foreground-1">
                          Phone:
                        </p>
                      </div>
                      <div class="col-span-2">
                        <div class="flex items-center gap-x-2">
                          <svg class="shrink-0 size-4 rounded-full" xmlns="http://www.w3.org/2000/svg" id="flag-icon-css-us" viewBox="0 0 512 512">
                            <g fill-rule="evenodd">
                              <g stroke-width="1pt">
                                <path fill="#bd3d44" d="M0 0h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0z" transform="scale(3.9385)"/>
                                <path fill="#fff" d="M0 10h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0z" transform="scale(3.9385)"/>
                              </g>
                              <path fill="#192f5d" d="M0 0h98.8v70H0z" transform="scale(3.9385)"/>
                              <path fill="#fff" d="M8.2 3l1 2.8H12L9.7 7.5l.9 2.7-2.4-1.7L6 10.2l.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7L74 8.5l-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 7.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 24.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 21.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 38.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 35.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 52.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 49.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 66.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 63.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9z" transform="scale(3.9385)"/>
                            </g>
                          </svg>
                          <span class="text-sm text-foreground">
                            +1 000-00-00
                          </span>
                        </div>
                      </div>
                    </div>

<div class="py-4 grid grid-cols-3 gap-x-4 border-t border-line-2">
                      <div class="col-span-1">
                        <p class="text-sm text-muted-foreground-1">
                          Address:
                        </p>
                      </div>
                      <div class="col-span-2">
                        <p class="text-sm text-foreground">
                          4970 Park Ave W, Ohio, 44723, Untied States
                        </p>
                      </div>
                    </div>

<div class="py-4 grid grid-cols-3 items-center gap-x-4 border-t border-line-2">
                      <div class="col-span-1">
                        <p class="text-sm text-muted-foreground-1">
                          Signed up as:
                        </p>
                      </div>
                      <div class="col-span-2">
                        <span class="py-1.5 ps-1.5 pe-2.5 inline-flex items-center gap-x-1 text-xs font-medium bg-teal-100 text-teal-800 rounded-full dark:bg-teal-500/10 dark:text-teal-500">
                          <svg class="size-3" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                            <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
                          </svg>
                          Valid account
                        </span>
                      </div>
                    </div>

Open related admin users page

Icon Description List Pro

Icons lead each row so profile details and external links read as one short stack.

Create a responsive UI block named "Icon Description List" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/data-display/description-lists/#icon-description-list. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Source metadata:
- Catalog family: data-display/description-lists
- Block ID: icon-description-list
- Source description: Icons lead each row so profile details and external links read as one short stack.
- Preview iframe: https://preline.co/blocks/data-display/description-lists/iframes/pro/icon-description-list.html (repo path: blocks/data-display/description-lists/iframes/pro/icon-description-list.html)
- Source markup reference:
  - partials/pro/admin-dashboard/sources/simple-with-icons.html

<ul class="mt-3 space-y-2">
                      <li>
                        <div class="inline-flex items-center gap-x-3 text-sm text-foreground">
                          <svg class="shrink-0 size-4 text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z"/><path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2"/><path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2"/><path d="M10 6h4"/><path d="M10 10h4"/><path d="M10 14h4"/><path d="M10 18h4"/></svg>
                          Guideline
                        </div>
                      </li>
                      <li>
                        <div class="inline-flex items-center gap-x-3 text-sm text-foreground">
                          <svg class="shrink-0 size-4 text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></svg>
                          United Kingdom
                        </div>
                      </li>
                      <li>
                        <div class="inline-flex items-center gap-x-3 text-sm text-foreground">
                          <svg class="shrink-0 size-4 text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                          Europe/London (GMT)
                        </div>
                      </li>
                      <li>
                        <div class="inline-flex items-center gap-x-3 text-sm text-foreground">
                          <svg class="shrink-0 size-4 text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
                          jamescollins@site.so
                        </div>
                      </li>
                      <li>
                        <a class="inline-flex items-center gap-x-3 text-sm text-foreground hover:text-primary-hover decoration-2 hover:underline focus:outline-hidden focus:underline" href="#">
                          <svg class="shrink-0 size-4 text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
                          https://example.so/
                        </a>
                      </li>
                      <li>
                        <a class="inline-flex items-center gap-x-3 text-sm text-foreground hover:text-primary-hover decoration-2 hover:underline focus:outline-hidden focus:underline" href="#">
                          <svg class="shrink-0 size-4 text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
                          https://dribbble.com/james/
                        </a>
                      </li>
                      <li>
                        <a class="inline-flex items-center gap-x-3 text-sm text-foreground hover:text-primary-hover decoration-2 hover:underline focus:outline-hidden focus:underline" href="#">
                          <svg class="shrink-0 size-4 text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
                          https://producthunt.com/james/
                        </a>
                      </li>
                    </ul>

Open related admin teams page

Session Details Card with Actions Pro

Session details sit inside a compact card with room for status pills and sign-out actions.

Create a responsive UI block named "Session Details Card with Actions" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/data-display/description-lists/#session-details-card-with-actions. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Source metadata:
- Catalog family: data-display/description-lists
- Block ID: session-details-card-with-actions
- Source description: Session details sit inside a compact card with room for status pills and sign-out actions.
- Preview iframe: https://preline.co/blocks/data-display/description-lists/iframes/pro/session-details-card-with-actions.html (repo path: blocks/data-display/description-lists/iframes/pro/session-details-card-with-actions.html)
- Source markup reference:
  - partials/pro/admin-dashboard/sources/description-list-alignment-with-buttons.html

Block-specific fidelity rules:
- Preserve row/list density, column meaning, trailing metadata/action gutters, truncation mechanics, sorting/filter controls, pagination, status icons, and empty/loading states.
- Text columns should truncate before reserved metadata/action lanes rather than wrapping under them or reaching the row edge.
- Source content inventory (from the source markup):
  - The card is `p-5 space-y-4 flex flex-col bg-card border border-card-line rounded-xl` and stacks four regions in order: header row, title row, four-item list, full-width footer button.
  - Header row: a `size-9.5` rounded-lg tile with `bg-layer border border-layer-line` holding a `size-5` Lucide monitor/desktop icon on the left, and on the right a small `Sign out` button with a `size-3` log-out icon; the button is enabled on first load.
  - Title row shows `Mac` in medium foreground text next to a pill badge reading `Current session` in the primary tint (`bg-primary-100 text-primary-800`, dark `bg-primary-500/10 text-primary-500`). The alternate `Expired` badge in the neutral surface role is not rendered in this variant.
  - The list is four `<li class="flex justify-between items-center">` rows, label left and value right, in this order: `Location:` / `United Kingdom`, `Device:` / `Safari - iOS`, `IP address:` / `129.562.028.172`, `Recent activity:` / `5 minutes ago`.
  - Labels are `text-xs uppercase` in the muted role and end with a colon; values are `text-sm` foreground. Keep the labels uppercase.
  - The footer is a full-width secondary button reading `Don’t recognize something?` with a leading `size-4` info-circle icon - copy the curly apostrophe exactly.
  - Fully static; no Preline JS plugins, dropdowns, links, or toggles. Both buttons use the same layer/secondary style with `shadow-2xs`, differing only in width and icon size.

<div class="p-5 space-y-4 flex flex-col bg-card border border-card-line rounded-xl">
                    
                    <div class="flex justify-between">
                      <div class="flex flex-col justify-center items-center size-9.5 bg-layer border border-layer-line rounded-lg">
                        <svg class="size-5 text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 16V7a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v9m16 0H4m16 0 1.28 2.55a1 1 0 0 1-.9 1.45H3.62a1 1 0 0 1-.9-1.45L4 16"/></svg>
                      </div>

<div class="flex flex-wrap justify-between items-center gap-2">
                      <span class="font-medium text-foreground">
                        Mac
                      </span>
                      <span class="inline-flex items-center gap-1.5 py-px px-2 text-xs font-medium bg-primary-100 text-primary-800 rounded-full dark:bg-primary-500/10 dark:text-primary-500">
                        Current session
                      </span>
                    </div>

<ul class="space-y-2">
                      <li class="flex justify-between items-center">
                        <span class="text-xs uppercase text-muted-foreground-1">
                          Location:
                        </span>
                        <span class="text-sm text-foreground">
                          United Kingdom
                        </span>
                      </li>

<li class="flex justify-between items-center">
                        <span class="text-xs uppercase text-muted-foreground-1">
                          Device:
                        </span>
                        <span class="text-sm text-foreground">
                          Safari - iOS
                        </span>
                      </li>

<li class="flex justify-between items-center">
                        <span class="text-xs uppercase text-muted-foreground-1">
                          IP address:
                        </span>
                        <span class="text-sm text-foreground">
                          129.562.028.172
                        </span>
                      </li>

<li class="flex justify-between items-center">
                        <span class="text-xs uppercase text-muted-foreground-1">
                          Recent activity:
                        </span>
                        <span class="text-sm text-foreground">
                          5 minutes ago
                        </span>
                      </li>
                    </ul>

<button type="button" class="py-2 px-3 w-full inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus">
                      <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
                      Don’t recognize something?
                    </button>
                  </div>

Open related admin account profile page

Skill List with Logos and Icons Free

Grouped rows hold tools, platforms, and skill tags without turning into plain text paragraphs.

Create a responsive UI block named "Skill List with Logos and Icons" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/data-display/description-lists/#skill-list-with-logos-and-icons. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Source metadata:
- Catalog family: data-display/description-lists
- Block ID: skill-list-with-logos-and-icons
- Source description: Grouped rows hold tools, platforms, and skill tags without turning into plain text paragraphs.
- Preview iframe: https://preline.co/blocks/data-display/description-lists/iframes/free/skill-list-with-logos-and-icons.html (repo path: blocks/data-display/description-lists/iframes/free/skill-list-with-logos-and-icons.html)
- Source markup reference:
  - partials/blocks/sources/pages/dl-skills-with-logo-and-icons.html

Block-specific fidelity rules:
- Preserve row/list density, column meaning, trailing metadata/action gutters, truncation mechanics, sorting/filter controls, pagination, status icons, and empty/loading states.
- Text columns should truncate before reserved metadata/action lanes rather than wrapping under them or reaching the row edge.
- Source content inventory (from the source markup):
  - Five `<dl class="flex flex-col sm:flex-row gap-1">` groups inside a `space-y-3` wrapper; each `<dt>` is `min-w-40` so the value columns align, and the pairs stack vertically below `sm`.
  - Group labels in order, each ending with a colon: `Design Tools:`, `Development:`, `Collaboration:`, `Design Expertise:`, `Soft Skills:`.
  - Group items in order: Design Tools = `Figma`, `Sketch`; Development = `HTML`, `CSS`, `Tailwind CSS`, `React`, `Vue`; Collaboration = `Notion`, `Mailchimp`, `Slack`; Design Expertise = `UI/UX Design`, `Design Systems`, `Custom Illustrations`, `Responsive Design`; Soft Skills = `Strong communication`, `Problem-solving`, `Attention to detail`, `Time management`.
  - Separators are CSS-generated: every `<li>` carries `me-1 after:content-[',']`, so a comma follows every item including the last one in each group. Do not hand-write commas or drop the trailing one.
  - Only the first three groups have icons - a `shrink-0 size-4 me-1` brand SVG before each of `Figma`, `Sketch`, `HTML`, `CSS`, `Tailwind CSS`, `React`, `Vue`, `Notion`, `Mailchimp`, `Slack`. The Design Expertise and Soft Skills items are text-only.
  - Brand marks are inline single-color SVGs driven by `fill="currentColor"` (the Notion mark adds `class="fill-foreground"`); keep the exact paths rather than substituting a generic icon set or colored brand logos.
  - Fully static; no Preline JS plugins, links, hover states, or truncation. The standalone preview centers it in `w-full max-w-xl mx-auto` with `py-10 xl:py-0 px-4 xl:px-0`.

<div class="space-y-3">
  <dl class="flex flex-col sm:flex-row gap-1">
    <dt class="min-w-40">
      <span class="block text-sm text-muted-foreground-1">Design Tools:</span>
    </dt>
    <dd>
      <ul>
        <li class="me-1 after:content-[','] inline-flex items-center text-sm text-foreground">
          <svg class="shrink-0 size-4 me-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 5.5A3.5 3.5 0 0 1 8.5 2H12v7H8.5A3.5 3.5 0 0 1 5 5.5z"/><path d="M12 2h3.5a3.5 3.5 0 1 1 0 7H12V2z"/><path d="M12 12.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 1 1-7 0z"/><path d="M5 19.5A3.5 3.5 0 0 1 8.5 16H12v3.5a3.5 3.5 0 1 1-7 0z"/><path d="M5 12.5A3.5 3.5 0 0 1 8.5 9H12v7H8.5A3.5 3.5 0 0 1 5 12.5z"/></svg>
          Figma
        </li>
        <li class="me-1 after:content-[','] inline-flex items-center text-sm text-foreground">
          <svg class="shrink-0 size-4 me-1" width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.0597 0.32329C11.02 0.31932 10.98 0.31932 10.9403 0.32329L5.3403 0.883285C5.17075 0.900245 5.0164 0.988485 4.91578 1.126L0.119634 7.68074C0.0464736 7.77832 0.00235197 7.89893 9.11713e-05 8.02973C3.03713e-05 8.03325 0 8.03679 0 8.04031L4.76837e-06 8.04274C0.000580768 8.18808 0.0528336 8.32124 0.139339 8.42477L10.5367 21.0616C10.6506 21.2001 10.8206 21.2803 11 21.2803C11.1794 21.2803 11.3494 21.2001 11.4633 21.0616L21.8606 8.42479C21.9472 8.32125 21.9994 8.18808 22 8.04274V8.03301C21.9998 8.0237 21.9995 8.0144 21.999 8.00511C21.992 7.8838 21.949 7.77216 21.8803 7.68072L17.0842 1.126C16.9835 0.988485 16.8293 0.900245 16.6597 0.883285L11.0597 0.32329ZM16.48 7.44031V7.40407L16.4757 7.44031H16.48ZM16.4947 7.28026H20.1003L16.9992 3.04205L16.4947 7.28026ZM15.9131 2.01461L11.8709 1.61039L15.2795 7.33684L15.9131 2.01461ZM10.1291 1.61039L6.0869 2.01461L6.7205 7.33684L10.1291 1.61039ZM5.00074 3.04205L1.89962 7.28026H5.50528L5.00074 3.04205ZM1.87066 8.64031L9.81378 18.2942L5.75794 8.70733C5.74859 8.68525 5.74102 8.66285 5.73518 8.64031H1.87066ZM7.24088 8.64031L11 18.3739L14.7591 8.64031H7.24088ZM16.2648 8.64031C16.259 8.66285 16.2514 8.68525 16.2421 8.70733L12.1862 18.2942L20.1293 8.64031H16.2648ZM11 2.49337L13.9446 7.44031H8.05539L11 2.49337Z" fill="currentColor"/></svg>
          Sketch
        </li>
      </ul>
    </dd>
  </dl>

<dl class="flex flex-col sm:flex-row gap-1">
    <dt class="min-w-40">
      <span class="block text-sm text-muted-foreground-1">Development:</span>
    </dt>
    <dd>
      <ul>
        <li class="me-1 after:content-[','] inline-flex items-center text-sm text-foreground">
          <svg class="shrink-0 size-4 me-1" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.41014 21.6082L1.5 0H22.5L20.5899 21.5965L11.9826 24" fill="currentColor"/><path d="M12.5 22V2H20.5L18.9734 20.083" fill="currentColor"/><path d="M5.5 4H12.5V6.64672H8.55789L8.81579 9.35756H12.5V11.9984H6.2614M6.38421 13.3276H9.18421L9.3807 15.4438L12.5 16.2367V19L6.77719 17.4843" fill="white" fill-opacity="0.8"/><path d="M18.5 4H12.5V6.64877H18.2786M18.0624 9.36173H12.5V12.0105H15.4525L15.1731 15.4527L12.5 16.2462V19L17.4033 17.4948" fill="white"/></svg>
          HTML
        </li>
        <li class="me-1 after:content-[','] inline-flex items-center text-sm text-foreground">
          <svg class="shrink-0 size-4 me-1" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.3448 21.6009L1.41895 0H22.5809L20.653 21.5975L11.987 24L3.3448 21.6009Z" fill="currentColor"/><path d="M19.0026 20.2227L20.6501 1.7666H12V22.1641L19.0026 20.2227Z" fill="currentColor"/><path d="M5.83407 9.77721L6.0715 12.4264H12V9.77721H5.83407ZM5.59778 7.06432H12V4.41504H5.35693L5.59778 7.06432ZM12 16.6576L11.9884 16.6607L9.03789 15.864L8.84931 13.7511H6.18981L6.56101 17.9108L11.9878 19.4174L12 19.414V16.6576Z" fill="white" fill-opacity="0.8"/><path d="M11.9907 9.77721V12.4264H15.253L14.9455 15.8623L11.9907 16.6598V19.4161L17.4218 17.9108L17.4617 17.4632L18.0842 10.4886L18.1489 9.77721L18.6271 4.41504H11.9907V7.06432H15.7238L15.4827 9.77721H11.9907Z" fill="white"/></svg>
          CSS
        </li>
        <li class="me-1 after:content-[','] inline-flex items-center text-sm text-foreground">
          <svg class="shrink-0 size-4 me-1" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 5C8.8 5 6.8 6.6 6 9.8C7.2 8.2 8.6 7.6 10.2 8C11.1129 8.228 11.7653 8.89067 12.4876 9.62356C13.664 10.8178 15.0258 12.2 18 12.2C21.2 12.2 23.2 10.6 24 7.4C22.8 9 21.4 9.6 19.8 9.2C18.8871 8.972 18.2347 8.30933 17.5124 7.57644C16.336 6.38222 14.9742 5 12 5ZM6 12.2C2.8 12.2 0.8 13.8 0 17C1.2 15.4 2.6 14.8 4.2 15.2C5.11289 15.4284 5.76533 16.0907 6.48756 16.8236C7.664 18.0178 9.02578 19.4 12 19.4C15.2 19.4 17.2 17.8 18 14.6C16.8 16.2 15.4 16.8 13.8 16.4C12.8871 16.172 12.2347 15.5093 11.5124 14.7764C10.336 13.5822 8.97422 12.2 6 12.2Z" fill="currentColor"/></svg>
          Tailwind CSS
        </li>
        <li class="me-1 after:content-[','] inline-flex items-center text-sm text-foreground">
          <svg class="shrink-0 size-4 me-1" width="160" height="143" viewBox="0 0 160 143" fill="none"><path d="M160 71.2597C160 60.6604 146.726 50.6156 126.376 44.3865C131.072 23.6445 128.985 7.14227 119.788 1.85895C117.668 0.619648 115.19 0.0326126 112.483 0.0326126V7.30534C113.983 7.30534 115.19 7.59886 116.201 8.15328C120.636 10.6971 122.56 20.3832 121.06 32.8414C120.701 35.9071 120.114 39.1358 119.397 42.4297C113.004 40.8642 106.025 39.6576 98.6873 38.8748C94.2845 32.8414 89.7187 27.3624 85.1203 22.5683C95.7521 12.6865 105.732 7.27273 112.515 7.27273V0C103.547 0 91.806 6.39217 79.9348 17.4806C68.0636 6.4574 56.3229 0.130453 47.3543 0.130453V7.40318C54.1052 7.40318 64.1174 12.7843 74.7493 22.6009C70.1834 27.395 65.6176 32.8414 61.2801 38.8748C53.9095 39.6576 46.9303 40.8642 40.5381 42.4623C39.788 39.201 39.2336 36.0375 38.8422 33.0045C37.3094 20.5463 39.201 10.8602 43.6038 8.28373C44.5821 7.6967 45.8541 7.43579 47.3543 7.43579V0.163066C44.6148 0.163066 42.1362 0.750101 39.9837 1.9894C30.8194 7.27273 28.7648 23.7424 33.4937 44.4191C13.2083 50.6808 0 60.693 0 71.2597C0 81.8589 13.2735 91.9038 33.6241 98.1329C28.9278 118.875 31.0151 135.377 40.212 140.66C42.3318 141.9 44.8104 142.487 47.5499 142.487C56.5186 142.487 68.2593 136.095 80.1305 125.006C92.0016 136.029 103.742 142.356 112.711 142.356C115.45 142.356 117.929 141.769 120.082 140.53C129.246 135.247 131.3 118.777 126.572 98.1003C146.792 91.8712 160 81.8263 160 71.2597ZM117.538 49.5067C116.331 53.7138 114.831 58.0514 113.135 62.3889C111.798 59.7799 110.395 57.1708 108.863 54.5618C107.362 51.9527 105.764 49.4089 104.166 46.9303C108.797 47.6152 113.265 48.4631 117.538 49.5067ZM102.601 84.2397C100.057 88.6425 97.448 92.817 94.7411 96.6979C89.8818 97.1219 84.9572 97.3502 80 97.3502C75.0754 97.3502 70.1508 97.1219 65.3241 96.7305C62.6172 92.8496 59.9755 88.7077 57.4317 84.3375C54.9531 80.0652 52.7028 75.7277 50.6482 71.3575C52.6702 66.9874 54.9531 62.6172 57.3991 58.3449C59.9429 53.9421 62.552 49.7676 65.2589 45.8867C70.1182 45.4627 75.0428 45.2344 80 45.2344C84.9246 45.2344 89.8492 45.4627 94.6759 45.8541C97.3828 49.735 100.024 53.8769 102.568 58.247C105.047 62.5194 107.297 66.8569 109.352 71.2271C107.297 75.5972 105.047 79.9674 102.601 84.2397ZM113.135 80C114.896 84.3701 116.396 88.7403 117.636 92.98C113.363 94.0236 108.863 94.9042 104.199 95.5891C105.797 93.0779 107.395 90.5014 108.895 87.8598C110.395 85.2507 111.798 82.609 113.135 80ZM80.0652 114.798C77.0322 111.667 73.9992 108.178 70.9988 104.362C73.934 104.492 76.9344 104.59 79.9674 104.59C83.033 104.59 86.066 104.525 89.0338 104.362C86.0987 108.178 83.0656 111.667 80.0652 114.798ZM55.8011 95.5891C51.17 94.9042 46.702 94.0563 42.4297 93.0126C43.6364 88.8055 45.1366 84.468 46.8325 80.1305C48.1696 82.7395 49.572 85.3486 51.1048 87.9576C52.6376 90.5667 54.203 93.1105 55.8011 95.5891ZM79.9022 27.7212C82.9352 30.852 85.9682 34.3416 88.9686 38.1574C86.0334 38.0269 83.033 37.9291 80 37.9291C76.9344 37.9291 73.9014 37.9943 70.9336 38.1574C73.8687 34.3416 76.9018 30.852 79.9022 27.7212ZM55.7685 46.9303C54.1704 49.4415 52.5724 52.0179 51.0722 54.6596C49.572 57.2687 48.1696 59.8777 46.8325 62.4868C45.0713 58.1166 43.5711 53.7464 42.3318 49.5067C46.6042 48.4957 51.1048 47.6152 55.7685 46.9303ZM26.2536 87.7619C14.7085 82.8373 7.24011 76.3799 7.24011 71.2597C7.24011 66.1394 14.7085 59.6494 26.2536 54.7574C29.0583 53.5508 32.1239 52.4745 35.2874 51.4635C37.1464 57.8557 39.5923 64.5088 42.6254 71.3249C39.625 78.1084 37.2116 84.7289 35.3853 91.0885C32.1566 90.0774 29.0909 88.9686 26.2536 87.7619ZM43.7994 134.366C39.364 131.822 37.4399 122.136 38.9401 109.678C39.2988 106.612 39.8859 103.384 40.6034 100.09C46.9955 101.655 53.9747 102.862 61.3127 103.645C65.7155 109.678 70.2813 115.157 74.8797 119.951C64.2479 129.833 54.2682 135.247 47.4847 135.247C46.0171 135.214 44.7778 134.921 43.7994 134.366ZM121.158 109.515C122.691 121.973 120.799 131.659 116.396 134.236C115.418 134.823 114.146 135.084 112.646 135.084C105.895 135.084 95.8826 129.702 85.2507 119.886C89.8166 115.092 94.3824 109.645 98.7199 103.612C106.091 102.829 113.07 101.623 119.462 100.024C120.212 103.318 120.799 106.482 121.158 109.515ZM133.714 87.7619C130.909 88.9686 127.843 90.0448 124.68 91.0558C122.821 84.6637 120.375 78.0106 117.342 71.1945C120.342 64.4109 122.756 57.7905 124.582 51.4309C127.811 52.4419 130.876 53.5508 133.746 54.7574C145.291 59.682 152.76 66.1394 152.76 71.2597C152.727 76.3799 145.259 82.87 133.714 87.7619Z" fill="currentColor"/><path d="M79.9674 86.1639C88.1988 86.1639 94.8716 79.4911 94.8716 71.2597C94.8716 63.0284 88.1988 56.3555 79.9674 56.3555C71.7361 56.3555 65.0632 63.0284 65.0632 71.2597C65.0632 79.4911 71.7361 86.1639 79.9674 86.1639Z" fill="currentColor"/></svg>
          React
        </li>
        <li class="me-1 after:content-[','] inline-flex items-center text-sm text-foreground">
          <svg class="shrink-0 size-4 me-1" width="164" height="143" viewBox="0 0 164 143" fill="none"><path d="M81.1349 139.508L2.87045 4.50153C2.48398 3.83487 2.96501 3 3.73559 3H62.4308C62.7837 3 63.1104 3.18601 63.2906 3.48946L81.1286 33.5324C81.5188 34.1895 82.4718 34.1839 82.8542 33.5224L100.211 3.4995C100.39 3.19038 100.72 3 101.077 3H160.264C161.035 3 161.516 3.83487 161.13 4.50154L82.8651 139.508C82.4799 140.172 81.5201 140.172 81.1349 139.508Z" stroke="currentColor" stroke-width="5" stroke-linecap="round"/><path d="M81.1292 86.9894L33.8644 4.99943C33.4801 4.33276 33.9612 3.5 34.7307 3.5H62.9276C63.2822 3.5 63.6103 3.6878 63.7899 3.99358L81.1259 33.5116C81.515 34.1742 82.4751 34.1685 82.8564 33.5013L99.7121 4.00386C99.8901 3.69229 100.221 3.5 100.58 3.5H128.778C129.546 3.5 130.027 4.32894 129.647 4.99559L82.8641 86.9856C82.4813 87.6564 81.5149 87.6586 81.1292 86.9894Z" fill="currentColor"/></svg>
          Vue
        </li>
      </ul>
    </dd>
  </dl>

<dl class="flex flex-col sm:flex-row gap-1">
    <dt class="min-w-40">
      <span class="block text-sm text-muted-foreground-1">Collaboration:</span>
    </dt>
    <dd>
      <ul>
        <li class="me-1 after:content-[','] inline-flex items-center text-sm text-foreground">
          <svg class="shrink-0 size-4 me-1" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.7438 0.940745C6.84695 1.30308 2.6841 1.63631 2.48837 1.67533C1.9396 1.77319 1.44038 2.14544 1.20563 2.63537L1 3.06646L1.01982 13.3407L1.04893 23.615L1.36234 24.2517C1.53886 24.6042 2.73365 26.2499 4.0362 27.9439C6.61221 31.2836 6.79802 31.47 7.77726 31.5679C8.06156 31.597 10.1966 31.4991 12.5081 31.3622C14.8295 31.2154 18.5508 30.99 20.7842 30.863C30.3233 30.2839 29.8334 30.3328 30.3815 29.8627C31.0672 29.2947 31.0183 30.2251 31.0474 17.7377C31.0672 7.15003 31.0573 6.45509 30.9006 6.13177C30.7148 5.76943 30.3815 5.51487 26.0329 2.45885C23.1243 0.421704 22.9186 0.313932 21.6155 0.294111C21.0772 0.274911 16.6307 0.568497 11.7438 0.940745ZM22.752 2.28232C23.1633 2.46814 26.1704 4.56412 26.6108 4.9661C26.7284 5.08378 26.7675 5.18164 26.7086 5.24048C26.5717 5.35817 7.96245 6.465 7.42421 6.38634C7.17956 6.34732 6.81722 6.20052 6.61159 6.06302C5.75932 5.48514 3.64413 3.75149 3.64413 3.62452C3.64413 3.29129 3.57538 3.29129 11.8714 2.69421C13.4582 2.58644 16.0633 2.39071 17.6502 2.26312C21.0871 1.98874 22.1159 1.99865 22.752 2.28232ZM28.6677 7.63996C28.8046 7.77685 28.9223 8.04132 28.9613 8.29589C28.9904 8.53125 29.0102 12.9189 28.9904 18.0313C28.9613 26.8067 28.9514 27.3555 28.7848 27.61C28.6869 27.7667 28.4912 27.9333 28.3438 27.9823C27.9331 28.1489 8.43318 29.2557 8.03183 29.138C7.84601 29.0891 7.59083 28.9324 7.45394 28.7955L7.21858 28.541L7.18947 19.0799C7.16965 12.4395 7.18947 9.5012 7.26813 9.23672C7.32697 9.041 7.47376 8.80564 7.60136 8.72759C7.77788 8.60991 8.93364 8.51205 12.9101 8.2773C15.7016 8.1206 20.0206 7.85613 22.4987 7.70933C28.3933 7.34638 28.3741 7.34638 28.6677 7.63996Z" class="fill-foreground" fill="currentColor"></path><path d="M23.4277 10.8818C22.3698 10.9506 21.4296 11.0484 21.3218 11.1073C20.9985 11.2739 20.8028 11.5483 20.7638 11.8617C20.7347 12.185 20.8325 12.224 21.8898 12.3516L22.35 12.4104V16.5925C22.35 19.0799 22.311 20.7256 22.2621 20.6767C22.2131 20.6178 20.8226 18.5027 19.167 15.9756C17.512 13.4392 16.1407 11.3525 16.1209 11.3333C16.1011 11.3135 15.024 11.3724 13.7313 11.4609C12.1445 11.5687 11.273 11.6666 11.0965 11.7644C10.8122 11.9112 10.4988 12.4303 10.4988 12.7734C10.4988 12.979 10.871 13.0868 11.6545 13.0868H12.0658V25.1139L11.4 25.3196C10.8809 25.4763 10.7044 25.5741 10.6165 25.7698C10.4598 26.1031 10.4697 26.4066 10.6264 26.4066C10.6852 26.4066 11.792 26.3378 13.0649 26.2598C15.582 26.113 15.8657 26.0442 16.1302 25.5252C16.2088 25.3685 16.277 25.2019 16.277 25.1529C16.277 25.1139 15.9345 24.9962 15.5226 24.8984C15.1014 24.8005 14.6802 24.7027 14.5923 24.6828C14.4257 24.6339 14.4157 24.3304 14.4157 20.1186V15.6033L17.3931 20.2753C20.5173 25.1721 20.9093 25.7308 21.3893 25.9755C21.987 26.2889 23.5051 26.0733 24.2688 25.5741L24.5042 25.4273L24.524 18.7479L24.5531 12.0586L25.0722 11.9608C25.6891 11.8431 25.9734 11.5594 25.9734 11.0695C25.9734 10.7561 25.9536 10.7362 25.66 10.7462C25.4847 10.7542 24.4757 10.813 23.4277 10.8818Z" class="fill-foreground" fill="currentColor"></path></svg>
          Notion
        </li>
        <li class="me-1 after:content-[','] inline-flex items-center text-sm text-foreground">
          <svg class="shrink-0 size-4 me-1" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.62424 14.7793C7.64424 14.7993 7.64424 14.8393 7.62424 14.8793C7.54424 15.0193 7.38424 15.0993 7.22424 15.0793C6.92424 15.0393 6.70424 14.7993 6.72424 14.4993C6.72424 14.2993 6.76424 14.1193 6.82424 13.9193C6.92424 13.6793 6.82424 13.4193 6.62424 13.2793C6.50424 13.1993 6.34424 13.1793 6.20424 13.1993C6.06424 13.2193 5.94424 13.3193 5.86425 13.4393C5.80425 13.5393 5.76425 13.6393 5.74425 13.7393C5.74425 13.7593 5.72425 13.7793 5.72425 13.7793C5.68425 13.8993 5.60425 13.9393 5.54425 13.9393C5.52425 13.9393 5.48425 13.9193 5.46425 13.8593C5.40425 13.5193 5.52425 13.1793 5.74425 12.9193C5.94424 12.6993 6.22424 12.5993 6.52424 12.6393C6.82424 12.6793 7.10424 12.8793 7.22424 13.1593C7.36424 13.4993 7.32424 13.8793 7.14424 14.1993C7.12424 14.2193 7.12424 14.2593 7.10424 14.2793C7.04424 14.3993 7.02424 14.5593 7.10424 14.6793C7.16424 14.7593 7.24424 14.7993 7.34424 14.7993C7.38424 14.7993 7.42424 14.7993 7.46424 14.7793C7.54424 14.7393 7.60424 14.7393 7.62424 14.7793ZM20.8442 15.0993C20.8242 15.7193 20.6842 16.3193 20.4642 16.8993C19.3442 19.5993 16.6642 21.0993 13.4642 20.9993C10.4842 20.9193 7.94424 19.3393 6.84424 16.7593C6.14424 16.7393 5.46425 16.4593 4.96425 15.9993C4.42425 15.5393 4.08425 14.8993 4.00425 14.1993C3.94425 13.7193 4.00425 13.2393 4.18425 12.7793L3.56425 12.2593C0.68425 9.85935 9.62424 -0.100651 12.4642 2.39935C12.4842 2.41935 13.4442 3.35935 13.4442 3.35935C13.4442 3.35935 13.9642 3.13935 13.9842 3.13935C16.4842 2.09935 18.5242 2.59935 18.5242 4.25935C18.5242 5.11935 17.9842 6.11935 17.1042 7.03935C17.4642 7.39935 17.7042 7.83935 17.8242 8.31935C17.9242 8.65935 17.9642 8.99935 17.9842 9.35935C18.0042 9.71935 18.0242 10.5393 18.0242 10.5393C18.0442 10.5393 18.3042 10.6193 18.3842 10.6393C18.9042 10.7593 19.3642 10.9793 19.7642 11.3193C19.9842 11.5193 20.1042 11.7993 20.1642 12.0793C20.2242 12.4593 20.1242 12.8393 19.9042 13.1393C19.9642 13.2793 20.0042 13.3993 20.0642 13.5393C20.1442 13.7793 20.1842 13.9793 20.2042 13.9993C20.4242 14.0393 20.8442 14.3593 20.8442 15.0993ZM8.24424 13.6193C8.04424 12.3593 7.20424 11.9193 6.62424 11.8793C6.48424 11.8793 6.34424 11.8793 6.18424 11.9193C5.16425 12.1193 4.56425 12.9993 4.68425 14.1393C4.86425 15.1993 5.72425 15.9993 6.78424 16.0593C6.88424 16.0593 6.98424 16.0593 7.08424 16.0393C8.14424 15.8793 8.40424 14.7393 8.24424 13.6193ZM10.0042 5.61935C10.8842 4.89935 11.8042 4.25935 12.7842 3.69935C12.7842 3.69935 12.0042 2.79935 11.7642 2.71935C10.3242 2.31935 7.20424 4.47935 5.20425 7.33935C4.40425 8.49935 3.24425 10.5393 3.80425 11.5793C4.00425 11.8193 4.22425 12.0193 4.46425 12.2193C4.82425 11.6993 5.38425 11.3393 6.02424 11.2193C6.80424 9.03935 8.18424 7.09935 10.0042 5.61935ZM13.1242 15.5993C13.2042 15.9393 13.4642 16.2193 13.8042 16.2993C13.9842 16.3593 14.1442 16.4193 14.3442 16.4393C16.6242 16.8393 18.7642 15.5193 19.2442 15.1993C19.2842 15.1793 19.3042 15.1993 19.2842 15.2393C19.2642 15.2593 19.2442 15.2793 19.2442 15.2993C18.6642 16.0593 17.0842 16.9393 15.0242 16.9393C14.1242 16.9393 13.2242 16.6193 12.9042 16.1393C12.3842 15.3793 12.8842 14.2793 13.7242 14.3993C13.7242 14.3993 14.0242 14.4393 14.1042 14.4393C15.4242 14.5593 16.7642 14.3593 17.9842 13.8193C19.1442 13.2793 19.5842 12.6793 19.5242 12.1993C19.5042 12.0593 19.4242 11.9193 19.3242 11.7993C19.0042 11.5393 18.6242 11.3593 18.2242 11.2793C18.0442 11.2193 17.9242 11.1993 17.7842 11.1593C17.5442 11.0793 17.4242 11.0193 17.4042 10.5593C17.3842 10.3593 17.3642 9.67935 17.3442 9.37935C17.3242 8.87935 17.2642 8.19935 16.8442 7.91935C16.7442 7.83935 16.6042 7.79935 16.4842 7.79935C16.4042 7.79935 16.3442 7.79935 16.2642 7.81935C16.0442 7.85935 15.8642 7.97935 15.7042 8.13935C15.3042 8.49935 14.7842 8.67935 14.2442 8.63935C13.9442 8.61935 13.6442 8.57935 13.2842 8.55935C13.2242 8.55935 13.1442 8.55935 13.0842 8.53935C12.1242 8.55935 11.3442 9.27935 11.2242 10.2393C11.0242 11.6593 12.0442 12.3793 12.3442 12.8193C12.3842 12.8793 12.4242 12.9393 12.4242 13.0193C12.4242 13.0993 12.3842 13.1793 12.3242 13.2193C11.5042 14.1393 11.2042 15.4193 11.5242 16.6193C11.5642 16.7593 11.6042 16.8993 11.6642 17.0393C12.4042 18.7793 14.7242 19.5993 16.9842 18.8593C17.2842 18.7593 17.5642 18.6393 17.8442 18.4993C18.3442 18.2593 18.7842 17.9193 19.1642 17.5193C19.7442 16.9393 20.1242 16.1793 20.2642 15.3593C20.3242 14.8993 20.2242 14.7393 20.1042 14.6593C20.0042 14.5993 19.9042 14.5793 19.7842 14.5993C19.7242 14.2393 19.6242 13.8993 19.4842 13.5793C18.8442 14.0593 18.1042 14.4393 17.3242 14.6593C16.3842 14.9193 15.4242 15.0193 14.4442 14.9793C13.8242 14.9193 13.4042 14.7393 13.2442 15.2593C14.1842 15.5793 15.1842 15.6793 16.1842 15.5593C16.2042 15.5593 16.2442 15.5793 16.2442 15.5993C16.2442 15.6193 16.2242 15.6393 16.2042 15.6593C16.1242 15.6393 14.9642 16.1793 13.1242 15.5993ZM9.74424 7.37935C10.5042 6.83935 11.3842 6.45935 12.2842 6.25935C13.3242 6.01935 14.3842 6.01935 15.4242 6.25935C15.4642 6.25935 15.4842 6.19935 15.4442 6.17935C14.9042 5.89935 14.3242 5.73935 13.7042 5.71935C13.6842 5.71935 13.6642 5.69935 13.6642 5.67935V5.65935C13.7642 5.53935 13.8642 5.41935 13.9842 5.33935C14.0042 5.31935 14.0042 5.29935 13.9842 5.29935L13.9642 5.27935C13.2242 5.35935 12.5242 5.59935 11.8842 6.01935C11.8642 6.01935 11.8442 6.01935 11.8442 6.01935V5.99935C11.8842 5.81935 11.9642 5.63935 12.0642 5.45935C12.0642 5.43935 12.0642 5.41935 12.0442 5.41935H12.0242C11.1242 5.91935 10.3242 6.57935 9.66424 7.35935C9.64424 7.37935 9.64424 7.39935 9.66424 7.39935C9.70424 7.39935 9.72424 7.39935 9.74424 7.37935ZM15.7442 12.1993C15.8642 12.2793 16.0442 12.2593 16.1442 12.1393C16.2042 12.0193 16.1242 11.8793 15.9642 11.7993C15.8442 11.7193 15.6642 11.7393 15.5642 11.8593C15.5042 11.9593 15.5842 12.1193 15.7442 12.1993ZM16.2442 10.3793C16.2842 10.5793 16.3642 10.7793 16.4842 10.9393C16.6042 10.9193 16.7442 10.9193 16.8642 10.9393C16.9442 10.7193 16.9442 10.4793 16.8842 10.2593C16.7842 9.83935 16.6642 9.59935 16.4242 9.63935C16.1642 9.67935 16.1442 9.97935 16.2442 10.3793ZM16.7842 11.3393C16.6242 11.2993 16.4442 11.3793 16.3842 11.5593C16.3442 11.7193 16.4242 11.8993 16.6042 11.9593C16.7842 12.0193 16.9442 11.9193 17.0042 11.7393C17.0042 11.7193 17.0242 11.6793 17.0242 11.6593C17.0242 11.4993 16.9242 11.3593 16.7842 11.3393Z" fill="currentColor"/><path d="M12.5642 11.2989C12.5242 11.2989 12.5042 11.2789 12.5042 11.2589C12.4842 11.1789 12.6042 11.0789 12.7042 10.9789C13.0442 10.7189 13.5042 10.6789 13.8842 10.8389C14.0642 10.9189 14.2242 11.0389 14.3242 11.1989C14.3642 11.2589 14.3642 11.3189 14.3442 11.3389C14.3042 11.3789 14.2042 11.3389 14.0242 11.2589C13.8242 11.1589 13.5842 11.0989 13.3642 11.1189C13.1042 11.1589 12.8242 11.2189 12.5642 11.2989ZM14.2842 11.6589C14.1242 11.4989 13.9042 11.4189 13.7042 11.4589C13.5442 11.4789 13.4042 11.5389 13.2842 11.6389C13.2242 11.6789 13.1842 11.7389 13.1842 11.8189C13.1842 11.8389 13.1842 11.8589 13.2042 11.8589C13.2242 11.8589 13.2242 11.8789 13.2442 11.8789C13.3042 11.8789 13.3642 11.8589 13.4042 11.8389C13.6442 11.7589 13.8842 11.7189 14.1242 11.7589C14.2442 11.7789 14.2842 11.7789 14.3242 11.7389C14.3042 11.6989 14.3042 11.6789 14.2842 11.6589Z" fill="currentColor"/></svg>
          Mailchimp
        </li>
        <li class="me-1 after:content-[','] inline-flex items-center text-sm text-foreground">
          <svg class="shrink-0 size-4 me-1" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.79945 0C7.47279 0.000978593 6.39908 1.07548 6.40006 2.39951C6.39908 3.72355 7.47377 4.79804 8.80043 4.79902H11.2009V2.40049C11.2019 1.07645 10.1272 0.00195719 8.79945 0ZM8.79945 6.4H2.4004C1.07371 6.40098 -0.000977873 7.47548 2.67973e-06 8.79953C-0.00195842 10.1236 1.07273 11.198 2.39942 11.2H8.79945C10.1262 11.199 11.2009 10.1245 11.1999 8.8005C11.2009 7.47547 10.1262 6.40098 8.79945 6.4Z" fill="currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="M24 8.79953C24.001 7.47548 22.9263 6.40098 21.5996 6.4C20.2729 6.40098 19.1982 7.47548 19.1992 8.79953V11.2H21.5996C22.9263 11.199 24.001 10.1246 24 8.79953ZM17.6 8.79953V2.39951C17.6009 1.07645 16.5272 0.00195719 15.2006 0C13.8738 0.000978593 12.7991 1.07548 12.8001 2.39951V8.79953C12.7981 10.1236 13.8728 11.198 15.1996 11.2C16.5262 11.199 17.6009 10.1246 17.6 8.79953Z" fill="currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="M15.1996 24C16.5262 23.999 17.6009 22.9245 17.5999 21.6005C17.6009 20.2765 16.5262 19.2019 15.1996 19.201H12.7992V21.6005C12.7981 22.9235 13.8729 23.9981 15.1996 24ZM15.1996 17.5991H21.5996C22.9263 17.5981 24.001 16.5236 24 15.1995C24.0019 13.8755 22.9273 12.801 21.6006 12.799H15.2006C13.8739 12.8 12.7992 13.8745 12.8002 15.1985C12.7992 16.5235 13.8729 17.5981 15.1996 17.5991Z" fill="currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="M6.70464e-07 15.1995C-0.000979883 16.5236 1.07371 17.5981 2.40039 17.5991C3.72708 17.5981 4.80176 16.5236 4.80079 15.1995V12.8H2.40039C1.07371 12.801 -0.000979883 13.8755 6.70464e-07 15.1995ZM6.40006 15.1995V21.5995C6.39811 22.9235 7.47279 23.9981 8.79945 24C10.1262 23.999 11.2009 22.9245 11.1999 21.6005V15.2015C11.2018 13.8774 10.1272 12.803 8.80043 12.801C7.47279 12.801 6.39908 13.8755 6.40006 15.1995Z" fill="currentColor"/></svg>
          Slack
        </li>
      </ul>
    </dd>
  </dl>

<dl class="flex flex-col sm:flex-row gap-1">
    <dt class="min-w-40">
      <span class="block text-sm text-muted-foreground-1">Design Expertise:</span>
    </dt>
    <dd>
      <ul>
        <li class="me-1 after:content-[','] inline-flex items-center text-sm text-foreground">
          UI/UX Design
        </li>
        <li class="me-1 after:content-[','] inline-flex items-center text-sm text-foreground">
          Design Systems
        </li>
        <li class="me-1 after:content-[','] inline-flex items-center text-sm text-foreground">
          Custom Illustrations
        </li>
        <li class="me-1 after:content-[','] inline-flex items-center text-sm text-foreground">
          Responsive Design
        </li>
      </ul>
    </dd>
  </dl>

<dl class="flex flex-col sm:flex-row gap-1">
    <dt class="min-w-40">
      <span class="block text-sm text-muted-foreground-1">Soft Skills:</span>
    </dt>
    <dd>
      <ul>
        <li class="me-1 after:content-[','] inline-flex items-center text-sm text-foreground">
          Strong communication
        </li>
        <li class="me-1 after:content-[','] inline-flex items-center text-sm text-foreground">
          Problem-solving
        </li>
        <li class="me-1 after:content-[','] inline-flex items-center text-sm text-foreground">
          Attention to detail
        </li>
        <li class="me-1 after:content-[','] inline-flex items-center text-sm text-foreground">
          Time management
        </li>
      </ul>
    </dd>
  </dl>
</div>