Tailwind CSS Utility Links Blocks

Utility Links

Utility links for back navigation, icon-based action lists, and support contact prompts.

A short back link pairs a text label with a circular leading icon.

Create a responsive UI block named "Back Navigation Link with Icon Pill" 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/ui-components/utility-links/#back-navigation-link-with-icon-pill. 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: ui-components/utility-links
- Block ID: back-navigation-link-with-icon-pill
- Source description: A short back link pairs a text label with a circular leading icon.
- Preview iframe: https://preline.co/blocks/ui-components/utility-links/iframes/pro/back-navigation-link-with-icon-pill.html (repo path: blocks/ui-components/utility-links/iframes/pro/back-navigation-link-with-icon-pill.html)
- Source markup reference:
  - partials/pro/payments-dashboard/layouts-components/go-back-button.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 source layout width, wrapper hierarchy, component geometry, responsive order, interaction contents, and exact visible copy.
- Do not replace custom source details with default badges, buttons, cards, placeholders, or unrelated components.
- Source content inventory (from the source markup):
  - The block is a single `<a>` element with the exact label `Go back` - no heading, no breadcrumb, no sibling controls.
  - Link shell is `pe-3 group inline-flex items-center gap-x-2 text-start text-sm text-foreground rounded-full` with `hover:bg-muted-hover` and `focus:outline-hidden focus:bg-muted-focus`; note there is trailing padding only, and the pill radius applies to the whole link, not just the icon.
  - The leading icon pill is a `shrink-0 size-9 inline-flex justify-center items-center bg-surface rounded-full` span that reacts to the link's group state via `group-hover:bg-surface-hover` and `group-focus:bg-surface-focus`.
  - The glyph is a Lucide-style arrow-left (`path d="m12 19-7-7 7-7"` plus `path d="M19 12H5"`) at `size-4`, `viewBox="0 0 24 24"`, `fill="none"`, `stroke="currentColor"`, `stroke-width="2"`, rounded caps and joins - not a chevron.
  - The demo `href` is `#`; wire it to the destination project's routing or history-back instead of hardcoding it.
  - Fully static: no Preline JS plugins, no tooltip, no badge, and no separate icon button - the circle and the label form one focusable link.

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.

Open related payments card details page

Icon Utility Link List Pro

A stacked link list uses leading icons, titles, and optional supporting text.

Create a responsive UI block named "Icon Utility Link 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/ui-components/utility-links/#icon-utility-link-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: ui-components/utility-links
- Block ID: icon-utility-link-list
- Source description: A stacked link list uses leading icons, titles, and optional supporting text.
- Preview iframe: https://preline.co/blocks/ui-components/utility-links/iframes/pro/icon-utility-link-list.html (repo path: blocks/ui-components/utility-links/iframes/pro/icon-utility-link-list.html)
- Source markup reference:
  - partials/pro/payments-dashboard/layouts-components/list-link-with-title-description-and-gray-bg-icon.html
  - partials/pro/payments-dashboard/sources/link-with-title-description-and-gray-bg-icon.html
  - partials/pro/payments-dashboard/sources/title-description-and-gray-bg-icon.html

Block-specific fidelity rules:
- Preserve source layout width, wrapper hierarchy, component geometry, responsive order, interaction contents, and exact visible copy.
- Do not replace custom source details with default badges, buttons, cards, placeholders, or unrelated components.
- Source content inventory (from the source markup):
  - A small section heading `Things you've done` sits above the list: `text-xs` muted, with a bottom rule (`pb-2 mt-8 mb-3 border-b`).
  - The list holds exactly one row; list wrapper is `-mx-3 flex flex-col` and the row is `p-3 flex items-center gap-x-4 rounded-2xl`.
  - Row copy in order: title `Enter your card delivery address`, supporting line `280 Suzanne Throughway, Breannabury, OR 45801, US`, then an underlined primary link `Edit address` (`mt-1 inline-block underline underline-offset-4`).
  - Leading icon is a `size-11` circle (`bg-surface text-surface-foreground rounded-full`) containing one 24-viewBox outline house-with-plus icon at `size-5`; there is no notification badge overlay, no red icon variant, and no trailing chevron on this row.
  - The row itself is a plain `div`, not an anchor or button; `Edit address` is the only interactive element and there is no hover background on the row.
  - Fully static: no Preline JS plugins and no data-hs-* attributes; the centered `max-w-2xl` page container in the demo is preview chrome, not part of the block.

<h3 class="pb-2 mt-8 mb-3 text-xs text-muted-foreground-1 border-b border-line-2">
                      Things you've done
                    </h3>

<div class="-mx-3 flex flex-col">
                      
                      <div class="p-3 group w-full flex items-center gap-x-4 text-start rounded-2xl">
                        <div class="shrink-0 relative">
                          <span class="shrink-0 size-11 inline-flex justify-center items-center bg-surface text-surface-foreground rounded-full">
                            <svg class="shrink-0 size-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"><path d="M13.22 2.416a2 2 0 0 0-2.511.057l-7 5.999A2 2 0 0 0 3 10v9a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7.354"/><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"/><path d="M15 6h6"/><path d="M18 3v6"/></svg>
                          </span>
                        </div>
                        <div class="grow">
                          <span class="block font-medium text-sm text-foreground">
                            Enter your card delivery address
                          </span>
                          <span class="block text-sm text-muted-foreground-1">
                            280 Suzanne Throughway, Breannabury, OR 45801, US
                          </span>
                          <a class="mt-1 inline-block font-medium text-sm text-start text-primary underline underline-offset-4 hover:text-primary-hover focus:outline-hidden" href="../../../templates/payments/payments-dashboard/order-card-address.html">
                            Edit address
                          </a>
                        </div>
                      </div>
                      
                    </div>

Support Contact Callout Link Pro

A short support callout pairs service copy with one underlined contact link.

Create a responsive UI block named "Support Contact Callout Link" 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/ui-components/utility-links/#support-contact-callout-link. 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: ui-components/utility-links
- Block ID: support-contact-callout-link
- Source description: A short support callout pairs service copy with one underlined contact link.
- Preview iframe: https://preline.co/blocks/ui-components/utility-links/iframes/pro/support-contact-callout-link.html (repo path: blocks/ui-components/utility-links/iframes/pro/support-contact-callout-link.html)
- Source markup reference:
  - partials/pro/storefront/layouts-components/simple-contact-info.html

Block-specific fidelity rules:
- Preserve source layout width, wrapper hierarchy, component geometry, responsive order, interaction contents, and exact visible copy.
- Do not replace custom source details with default badges, buttons, cards, placeholders, or unrelated components.
- Source content inventory (from the source markup):
  - Heading is an `h2` reading `Need assistance?` (`mb-2 text-sm font-medium text-foreground`).
  - Below it, a two-cell grid `grid grid-cols-1 sm:grid-cols-2 items-center gap-2`: text stacks on mobile and splits left/right from `sm` up, with the right cell `sm:text-end`.
  - Left cell has exactly two muted `text-sm` paragraphs, in this order: `Ask our customer service` then `Mon to Sun, 5 am to 8 pm PT`.
  - Right cell has exactly one link, `Contact us`, followed by a trailing 24-viewBox chevron-right icon at `size-4` inside the same anchor (`inline-flex items-center gap-x-1`).
  - The link is underlined at rest (`underline underline-offset-4`) and colored `text-foreground`; primary color appears only on hover/focus, so do not render it primary-colored by default.
  - Fully static: no Preline JS plugins, no data-hs-* attributes, no card/border/background wrapper, and no icons other than the trailing chevron.

<div>
                      <h2 class="mb-2 text-sm font-medium text-foreground">
                        Need assistance?
                      </h2>

<div class="grid grid-cols-1 sm:grid-cols-2 items-center gap-2">
                        <div>
                          <p class="text-sm text-muted-foreground-1">
                            Ask our customer service
                          </p>
                          <p class="text-sm text-muted-foreground-1">
                            Mon to Sun, 5 am to 8 pm PT
                          </p>
                        </div>
    
                        <div class="sm:text-end">
                          <a class="inline-flex justify-center items-center gap-x-1 font-medium text-sm text-foreground underline underline-offset-4 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" href="../../../templates/ecommerce/storefront/help.html">
                            Contact us
                            <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"><path d="m9 18 6-6-6-6"/></svg>
                          </a>
                        </div>
                      </div>
                    </div>

Open related storefront account page

Utility Links

Back Navigation Link with Icon Pill Pro

Icon Utility Link List Pro

Support Contact Callout Link Pro