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.

Icon Utility Link List Pro

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

<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.

<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