Open demo

CSS code

HTML 
<div><span class="lbl">Rate card with dotted leaders</span>
<section class="ed ed-card" aria-labelledby="al-title">
  <div>
    <p class="ed-kicker">Ada Lindqvist · Brand designer</p>
    <h2 class="ed-title" id="al-title">Rates for <em>2026</em></h2>
    <p class="ed-lede">I work with small food, drink and hospitality brands, one or two projects at a time. Every project starts with a free 30-minute call.</p>
    <p class="ed-avail">Booking projects from March</p>
    <a class="ed-link" href="#">Request a quote <svg viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4 10h12M11 5l5 5-5 5"/></svg></a>
  </div>
  <ol class="ed-list">
      <li>
        <div class="ed-row"><h3>Brand identity</h3><span class="ed-dots" aria-hidden="true"></span><p class="ed-price"><small>from</small>$4,800</p></div>
        <p class="ed-desc">Logo, type and colour system, with a guidelines document your team can use.</p>
        <p class="ed-meta">5 to 6 weeks</p>
      </li>
      <li>
        <div class="ed-row"><h3>Website design</h3><span class="ed-dots" aria-hidden="true"></span><p class="ed-price"><small>from</small>$6,200</p></div>
        <p class="ed-desc">Up to eight page templates designed in Figma and handed over to your developer.</p>
        <p class="ed-meta">6 to 8 weeks</p>
      </li>
      <li>
        <div class="ed-row"><h3>Packaging</h3><span class="ed-dots" aria-hidden="true"></span><p class="ed-price"><small>from</small>$2,900</p></div>
        <p class="ed-desc">One product line across up to five pack sizes, with print-ready files.</p>
        <p class="ed-meta">3 to 4 weeks</p>
      </li>
      <li>
        <div class="ed-row"><h3>Design retainer</h3><span class="ed-dots" aria-hidden="true"></span><p class="ed-price">$1,600</p></div>
        <p class="ed-desc">Two days a month for campaigns, decks and small fixes. Cancel with a month’s notice.</p>
        <p class="ed-meta">per month</p>
      </li>
      <li>
        <div class="ed-row"><h3>Brand workshop</h3><span class="ed-dots" aria-hidden="true"></span><p class="ed-price">$950</p></div>
        <p class="ed-desc">A half-day session with your team to agree on direction before any design starts.</p>
        <p class="ed-meta">half a day</p>
      </li>
  </ol>
</section></div>

<div><span class="lbl">Numbered sessions with booking links</span>
<section class="ed" aria-labelledby="cs-title">
  <header class="ed-head"><p class="ed-kicker">Copper & Sage Studio</p><h2 class="ed-title" id="cs-title">Sessions & prices</h2><p class="ed-lede">Portraits and events in and around Bristol. Every session includes a private online gallery.</p></header>
  <ol class="ed-sessions">
    <li class="ed-sess">
      <span class="ed-num" aria-hidden="true">01</span>
      <div><h3>Portrait session</h3><p class="ed-desc">One hour in the studio, two outfits and 20 edited photographs.</p></div>
      <p class="ed-price">$280</p>
      <a class="ed-book" href="#">Book<span class="sr-only"> a portrait session</span></a>
    </li>
    <li class="ed-sess">
      <span class="ed-num" aria-hidden="true">02</span>
      <div><h3>Family session</h3><p class="ed-desc">Ninety minutes on location within 20 miles, with 40 edited photographs.</p></div>
      <p class="ed-price">$420</p>
      <a class="ed-book" href="#">Book<span class="sr-only"> a family session</span></a>
    </li>
    <li class="ed-sess">
      <span class="ed-num" aria-hidden="true">03</span>
      <div><h3>Brand day</h3><p class="ed-desc">A full day of team portraits and workplace photographs for your website.</p></div>
      <p class="ed-price">$1,450</p>
      <a class="ed-book" href="#">Book<span class="sr-only"> a brand day session</span></a>
    </li>
    <li class="ed-sess">
      <span class="ed-num" aria-hidden="true">04</span>
      <div><h3>Wedding coverage</h3><p class="ed-desc">Ceremony to first dance, about eight hours, delivered in an online gallery.</p></div>
      <p class="ed-price"><small>from</small>$2,600</p>
      <a class="ed-book" href="#">Book<span class="sr-only"> a wedding session</span></a>
    </li>
  </ol>
  <p class="ed-foot">Prices include VAT and travel within 20 miles. A 25% deposit holds your date.</p>
</section></div>
CSS 
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Editorial price lists: a rate card with dotted leaders, and a numbered list of sessions. Plain HTML and CSS. */
.ed{--ed-ink:#1c1917;--ed-muted:#5c554d;--ed-accent:#9a3412;--ed-rule:#d6cdbf;--ed-dots:#a99f91;--ed-serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;color:var(--ed-ink)}
.ed *,.ed *::before,.ed *::after{box-sizing:border-box}
:where(.ed) h2,:where(.ed) h3,:where(.ed) p{margin:0}

.ed-kicker{font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ed-accent)}
.ed-title{margin-top:14px;font-family:var(--ed-serif);font-size:clamp(2.1rem,5vw,3rem);font-weight:400;line-height:1.05;letter-spacing:-.01em}
.ed-title em{color:var(--ed-accent)}
.ed-price{font-family:var(--ed-serif);font-size:1.3rem;white-space:nowrap}
.ed-price small{margin-right:4px;font-family:inherit;font-size:.85rem;font-style:italic;color:var(--ed-muted)}
.ed-link{display:inline-flex;align-items:center;gap:8px;color:var(--ed-ink);font-weight:700;text-decoration:underline;text-decoration-color:var(--ed-accent);text-decoration-thickness:2px;text-underline-offset:5px}
.ed-link svg{transition:transform .2s}
.ed-link:hover svg{transform:translateX(3px)}
.ed-link:focus-visible{outline:2px solid var(--ed-accent);outline-offset:4px;border-radius:2px}
/* 1. rate card */
.ed-card{display:grid;grid-template-columns:1fr;gap:36px 56px}
@media (min-width:992px){.ed-card{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.ed-lede{margin-top:18px;font-size:1rem;line-height:1.65;color:var(--ed-muted);max-width:40ch}
.ed-avail{display:flex;align-items:center;gap:10px;margin:22px 0 26px;font-size:.9rem}
.ed-avail::before{content:"";width:9px;height:9px;border-radius:50%;background:#15803d;box-shadow:0 0 0 4px rgba(21,128,61,.18)}
.ed-list{margin:0;padding:0;list-style:none;border-top:2px solid var(--ed-ink)}
.ed-list>li{padding:20px 0 22px;border-bottom:1px solid var(--ed-rule)}
.ed-row{display:flex;align-items:baseline;gap:12px}
.ed-row h3{font-family:var(--ed-serif);font-size:1.4rem;font-weight:400;line-height:1.2}
.ed-dots{flex:1;min-width:20px;border-bottom:2px dotted var(--ed-dots);transform:translateY(-5px)}
.ed-desc{margin-top:6px;max-width:48ch;font-size:.94rem;line-height:1.55;color:var(--ed-muted)}
.ed-meta{margin-top:8px;font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ed-accent)}
/* 2. numbered sessions */
.ed-head{max-width:560px;margin:0 auto 34px;text-align:center}
.ed-head .ed-lede{margin:14px auto 0}
.ed-sessions{margin:0;padding:0;list-style:none;border-top:2px solid var(--ed-ink)}
.ed-sess{display:grid;grid-template-columns:3.2rem minmax(0,1fr) auto auto;align-items:baseline;gap:6px 28px;padding:24px 0;border-bottom:1px solid var(--ed-rule)}
.ed-num{font-family:var(--ed-serif);font-size:1.15rem;font-style:italic;color:var(--ed-accent)}
.ed-sess h3{font-family:var(--ed-serif);font-size:1.45rem;font-weight:400;line-height:1.2}
.ed-sess .ed-desc{margin-top:4px}
.ed-book{font-size:.9rem;font-weight:700;color:var(--ed-ink);text-decoration:underline;text-decoration-color:var(--ed-accent);text-decoration-thickness:2px;text-underline-offset:5px;white-space:nowrap}
.ed-book:hover{color:var(--ed-accent)}
.ed-book:focus-visible{outline:2px solid var(--ed-accent);outline-offset:4px;border-radius:2px}
.ed-foot{margin-top:18px;font-size:.86rem;line-height:1.5;color:var(--ed-muted);text-align:center}
@media (max-width:639.98px){.ed-sess{grid-template-columns:2.2rem minmax(0,1fr);gap:8px 14px}.ed-sess .ed-price,.ed-sess .ed-book{grid-column:2}}
@media (prefers-reduced-motion:reduce){.ed-link svg{transition:none}.ed-link:hover svg{transform:none}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<div><span class="lbl">Rate card with dotted leaders</span>
<section class="ed row ed-card" aria-labelledby="al-title">
  <div class="col-12 col-lg-5">
    <p class="ed-kicker">Ada Lindqvist · Brand designer</p>
    <h2 class="ed-title" id="al-title">Rates for <em>2026</em></h2>
    <p class="ed-lede">I work with small food, drink and hospitality brands, one or two projects at a time. Every project starts with a free 30-minute call.</p>
    <p class="ed-avail d-flex align-items-center">Booking projects from March</p>
    <a class="icon-link icon-link-hover ed-link" href="#">Request a quote <svg class="bi" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4 10h12M11 5l5 5-5 5"/></svg></a>
  </div>
  <div class="col-12 col-lg-7">
  <ol class="ed-list list-unstyled">
      <li>
        <div class="ed-row d-flex align-items-baseline"><h3>Brand identity</h3><span class="ed-dots" aria-hidden="true"></span><p class="ed-price"><small>from</small>$4,800</p></div>
        <p class="ed-desc">Logo, type and colour system, with a guidelines document your team can use.</p>
        <p class="ed-meta">5 to 6 weeks</p>
      </li>
      <li>
        <div class="ed-row d-flex align-items-baseline"><h3>Website design</h3><span class="ed-dots" aria-hidden="true"></span><p class="ed-price"><small>from</small>$6,200</p></div>
        <p class="ed-desc">Up to eight page templates designed in Figma and handed over to your developer.</p>
        <p class="ed-meta">6 to 8 weeks</p>
      </li>
      <li>
        <div class="ed-row d-flex align-items-baseline"><h3>Packaging</h3><span class="ed-dots" aria-hidden="true"></span><p class="ed-price"><small>from</small>$2,900</p></div>
        <p class="ed-desc">One product line across up to five pack sizes, with print-ready files.</p>
        <p class="ed-meta">3 to 4 weeks</p>
      </li>
      <li>
        <div class="ed-row d-flex align-items-baseline"><h3>Design retainer</h3><span class="ed-dots" aria-hidden="true"></span><p class="ed-price">$1,600</p></div>
        <p class="ed-desc">Two days a month for campaigns, decks and small fixes. Cancel with a month’s notice.</p>
        <p class="ed-meta">per month</p>
      </li>
      <li>
        <div class="ed-row d-flex align-items-baseline"><h3>Brand workshop</h3><span class="ed-dots" aria-hidden="true"></span><p class="ed-price">$950</p></div>
        <p class="ed-desc">A half-day session with your team to agree on direction before any design starts.</p>
        <p class="ed-meta">half a day</p>
      </li>
  </ol>
  </div>
</section></div>

<div><span class="lbl">Numbered sessions with booking links</span>
<section class="ed" aria-labelledby="cs-title">
  <header class="ed-head text-center"><p class="ed-kicker">Copper & Sage Studio</p><h2 class="ed-title" id="cs-title">Sessions & prices</h2><p class="ed-lede">Portraits and events in and around Bristol. Every session includes a private online gallery.</p></header>
  <ol class="list-group list-group-flush ed-sessions">
    <li class="list-group-item ed-sess">
      <span class="ed-num" aria-hidden="true">01</span>
      <div><h3>Portrait session</h3><p class="ed-desc">One hour in the studio, two outfits and 20 edited photographs.</p></div>
      <p class="ed-price">$280</p>
      <a class="ed-book" href="#">Book<span class="visually-hidden"> a portrait session</span></a>
    </li>
    <li class="list-group-item ed-sess">
      <span class="ed-num" aria-hidden="true">02</span>
      <div><h3>Family session</h3><p class="ed-desc">Ninety minutes on location within 20 miles, with 40 edited photographs.</p></div>
      <p class="ed-price">$420</p>
      <a class="ed-book" href="#">Book<span class="visually-hidden"> a family session</span></a>
    </li>
    <li class="list-group-item ed-sess">
      <span class="ed-num" aria-hidden="true">03</span>
      <div><h3>Brand day</h3><p class="ed-desc">A full day of team portraits and workplace photographs for your website.</p></div>
      <p class="ed-price">$1,450</p>
      <a class="ed-book" href="#">Book<span class="visually-hidden"> a brand day session</span></a>
    </li>
    <li class="list-group-item ed-sess">
      <span class="ed-num" aria-hidden="true">04</span>
      <div><h3>Wedding coverage</h3><p class="ed-desc">Ceremony to first dance, about eight hours, delivered in an online gallery.</p></div>
      <p class="ed-price"><small>from</small>$2,600</p>
      <a class="ed-book" href="#">Book<span class="visually-hidden"> a wedding session</span></a>
    </li>
  </ol>
  <p class="ed-foot text-center">Prices include VAT and travel within 20 miles. A 25% deposit holds your date.</p>
</section></div>
CSS 
/* Editorial price lists on Bootstrap's grid, .list-group-flush and .icon-link, restyled through their CSS variables. */
.ed{--ed-ink:#1c1917;--ed-muted:#5c554d;--ed-accent:#9a3412;--ed-rule:#d6cdbf;--ed-dots:#a99f91;--ed-serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;color:var(--ed-ink)}
:where(.ed) h2,:where(.ed) h3,:where(.ed) p{margin:0}

.ed-kicker{font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ed-accent)}
.ed .ed-title{margin-top:14px;font-family:var(--ed-serif);font-size:clamp(2.1rem,5vw,3rem);font-weight:400;line-height:1.05;letter-spacing:-.01em}
.ed-title em{color:var(--ed-accent)}
.ed-price{font-family:var(--ed-serif);font-size:1.3rem;white-space:nowrap}
.ed-price small{margin-right:4px;font-size:.85rem;font-style:italic;color:var(--ed-muted)}
.ed-link{--bs-icon-link-transform:translateX(3px);color:var(--ed-ink);font-weight:700;text-decoration-color:var(--ed-accent);text-decoration-thickness:2px;text-underline-offset:5px}
.ed-link:hover{color:var(--ed-ink)}
.ed-link>.bi{width:16px;height:16px}
.ed-link:focus-visible{outline:2px solid var(--ed-accent);outline-offset:4px;border-radius:2px;box-shadow:none}
.ed-card{--bs-gutter-x:24px;--bs-gutter-y:36px}
@media (min-width:992px){.ed-card{--bs-gutter-x:56px}}
.ed .ed-lede{margin-top:18px;font-size:1rem;line-height:1.65;color:var(--ed-muted);max-width:40ch}
.ed .ed-avail{gap:10px;margin:22px 0 26px;font-size:.9rem}
.ed-avail::before{content:"";width:9px;height:9px;border-radius:50%;background:#15803d;box-shadow:0 0 0 4px rgba(21,128,61,.18)}
.ed-list{margin:0;border-top:2px solid var(--ed-ink)}
.ed-list>li{padding:20px 0 22px;border-bottom:1px solid var(--ed-rule)}
.ed-row{gap:12px}
.ed-row h3{font-family:var(--ed-serif);font-size:1.4rem;font-weight:400;line-height:1.2}
.ed-dots{flex:1;min-width:20px;border-bottom:2px dotted var(--ed-dots);transform:translateY(-5px)}
.ed .ed-desc{margin-top:6px;max-width:48ch;font-size:.94rem;line-height:1.55;color:var(--ed-muted)}
.ed .ed-meta{margin-top:8px;font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ed-accent)}
.ed-head{max-width:560px;margin:0 auto 34px}
.ed-head .ed-lede{margin:14px auto 0}
.ed-sessions{--bs-list-group-bg:transparent;--bs-list-group-color:var(--ed-ink);--bs-list-group-border-color:var(--ed-rule);--bs-list-group-item-padding-x:0;--bs-list-group-item-padding-y:24px;border-top:2px solid var(--ed-ink)}
.ed-sessions>.list-group-item:last-child{border-bottom-width:1px}
.ed-sess{display:grid;grid-template-columns:3.2rem minmax(0,1fr) auto auto;align-items:baseline;gap:6px 28px}
.ed-num{font-family:var(--ed-serif);font-size:1.15rem;font-style:italic;color:var(--ed-accent)}
.ed-sess h3{font-family:var(--ed-serif);font-size:1.45rem;font-weight:400;line-height:1.2}
.ed-sess .ed-desc{margin-top:4px}
.ed-book{font-size:.9rem;font-weight:700;color:var(--ed-ink);text-decoration-color:var(--ed-accent);text-decoration-thickness:2px;text-underline-offset:5px;white-space:nowrap}
.ed-book:hover{color:var(--ed-accent)}
.ed-book:focus-visible{outline:2px solid var(--ed-accent);outline-offset:4px;border-radius:2px}
.ed .ed-foot{margin-top:18px;font-size:.86rem;line-height:1.5;color:var(--ed-muted)}
@media (max-width:639.98px){.ed-sess{grid-template-columns:2.2rem minmax(0,1fr);gap:8px 14px}.ed-sess .ed-price,.ed-sess .ed-book{grid-column:2}}
@media (prefers-reduced-motion:reduce){.ed-link>.bi{transition:none}.ed-link.icon-link-hover:hover>.bi,.ed-link.icon-link-hover:focus-visible>.bi{transform:none}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#5c554d] uppercase">Rate card with dotted leaders</span>
<section class="grid grid-cols-1 gap-x-14 gap-y-9 text-[#1c1917] min-[992px]:grid-cols-[minmax(0,5fr)_minmax(0,7fr)]" aria-labelledby="al-title">
  <div>
    <p class="text-[.76rem] font-bold tracking-[.16em] text-[#9a3412] uppercase">Ada Lindqvist · Brand designer</p>
    <h2 class="mt-3.5 font-['Iowan_Old_Style','Palatino_Linotype',Palatino,Georgia,serif] text-[clamp(2.1rem,5vw,3rem)] leading-[1.05] font-normal tracking-[-.01em]" id="al-title">Rates for <em class="text-[#9a3412]">2026</em></h2>
    <p class="mt-[18px] max-w-[40ch] text-base leading-[1.65] text-[#5c554d]">I work with small food, drink and hospitality brands, one or two projects at a time. Every project starts with a free 30-minute call.</p>
    <p class="mt-[22px] mb-[26px] flex items-center gap-2.5 text-[.9rem] before:size-[9px] before:rounded-full before:bg-[#15803d] before:shadow-[0_0_0_4px_rgba(21,128,61,.18)] before:content-['']">Booking projects from March</p>
    <a class="group inline-flex items-center gap-2 font-bold text-[#1c1917] underline decoration-[#9a3412] decoration-2 underline-offset-[5px] focus-visible:rounded-[2px] focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[#9a3412]" href="#">Request a quote <svg class="transition-transform duration-200 group-hover:translate-x-[3px] motion-reduce:transition-none motion-reduce:group-hover:translate-x-0" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4 10h12M11 5l5 5-5 5"/></svg></a>
  </div>
  <ol class="border-t-2 border-[#1c1917]">
      <li class="border-b border-[#d6cdbf] pt-5 pb-[22px]">
        <div class="flex items-baseline gap-3"><h3 class="font-['Iowan_Old_Style','Palatino_Linotype',Palatino,Georgia,serif] text-[1.4rem] leading-[1.2] font-normal">Brand identity</h3><span class="min-w-5 flex-1 -translate-y-[5px] border-b-2 border-dotted border-[#a99f91]" aria-hidden="true"></span><p class="font-['Iowan_Old_Style','Palatino_Linotype',Palatino,Georgia,serif] text-[1.3rem] whitespace-nowrap"><small class="mr-1 text-[.85rem] text-[#5c554d] italic">from</small>$4,800</p></div>
        <p class="mt-1.5 max-w-[48ch] text-[.94rem] leading-[1.55] text-[#5c554d]">Logo, type and colour system, with a guidelines document your team can use.</p>
        <p class="mt-2 text-[.74rem] font-bold tracking-[.12em] text-[#9a3412] uppercase">5 to 6 weeks</p>
      </li>
      <li class="border-b border-[#d6cdbf] pt-5 pb-[22px]">
        <div class="flex items-baseline gap-3"><h3 class="font-['Iowan_Old_Style','Palatino_Linotype',Palatino,Georgia,serif] text-[1.4rem] leading-[1.2] font-normal">Website design</h3><span class="min-w-5 flex-1 -translate-y-[5px] border-b-2 border-dotted border-[#a99f91]" aria-hidden="true"></span><p class="font-['Iowan_Old_Style','Palatino_Linotype',Palatino,Georgia,serif] text-[1.3rem] whitespace-nowrap"><small class="mr-1 text-[.85rem] text-[#5c554d] italic">from</small>$6,200</p></div>
        <p class="mt-1.5 max-w-[48ch] text-[.94rem] leading-[1.55] text-[#5c554d]">Up to eight page templates designed in Figma and handed over to your developer.</p>
        <p class="mt-2 text-[.74rem] font-bold tracking-[.12em] text-[#9a3412] uppercase">6 to 8 weeks</p>
      </li>
      <li class="border-b border-[#d6cdbf] pt-5 pb-[22px]">
        <div class="flex items-baseline gap-3"><h3 class="font-['Iowan_Old_Style','Palatino_Linotype',Palatino,Georgia,serif] text-[1.4rem] leading-[1.2] font-normal">Packaging</h3><span class="min-w-5 flex-1 -translate-y-[5px] border-b-2 border-dotted border-[#a99f91]" aria-hidden="true"></span><p class="font-['Iowan_Old_Style','Palatino_Linotype',Palatino,Georgia,serif] text-[1.3rem] whitespace-nowrap"><small class="mr-1 text-[.85rem] text-[#5c554d] italic">from</small>$2,900</p></div>
        <p class="mt-1.5 max-w-[48ch] text-[.94rem] leading-[1.55] text-[#5c554d]">One product line across up to five pack sizes, with print-ready files.</p>
        <p class="mt-2 text-[.74rem] font-bold tracking-[.12em] text-[#9a3412] uppercase">3 to 4 weeks</p>
      </li>
      <li class="border-b border-[#d6cdbf] pt-5 pb-[22px]">
        <div class="flex items-baseline gap-3"><h3 class="font-['Iowan_Old_Style','Palatino_Linotype',Palatino,Georgia,serif] text-[1.4rem] leading-[1.2] font-normal">Design retainer</h3><span class="min-w-5 flex-1 -translate-y-[5px] border-b-2 border-dotted border-[#a99f91]" aria-hidden="true"></span><p class="font-['Iowan_Old_Style','Palatino_Linotype',Palatino,Georgia,serif] text-[1.3rem] whitespace-nowrap">$1,600</p></div>
        <p class="mt-1.5 max-w-[48ch] text-[.94rem] leading-[1.55] text-[#5c554d]">Two days a month for campaigns, decks and small fixes. Cancel with a month’s notice.</p>
        <p class="mt-2 text-[.74rem] font-bold tracking-[.12em] text-[#9a3412] uppercase">per month</p>
      </li>
      <li class="border-b border-[#d6cdbf] pt-5 pb-[22px]">
        <div class="flex items-baseline gap-3"><h3 class="font-['Iowan_Old_Style','Palatino_Linotype',Palatino,Georgia,serif] text-[1.4rem] leading-[1.2] font-normal">Brand workshop</h3><span class="min-w-5 flex-1 -translate-y-[5px] border-b-2 border-dotted border-[#a99f91]" aria-hidden="true"></span><p class="font-['Iowan_Old_Style','Palatino_Linotype',Palatino,Georgia,serif] text-[1.3rem] whitespace-nowrap">$950</p></div>
        <p class="mt-1.5 max-w-[48ch] text-[.94rem] leading-[1.55] text-[#5c554d]">A half-day session with your team to agree on direction before any design starts.</p>
        <p class="mt-2 text-[.74rem] font-bold tracking-[.12em] text-[#9a3412] uppercase">half a day</p>
      </li>
  </ol>
</section></div>

<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#5c554d] uppercase">Numbered sessions with booking links</span>
<section class="text-[#1c1917]" aria-labelledby="cs-title">
  <header class="mx-auto mb-[34px] max-w-[560px] text-center"><p class="text-[.76rem] font-bold tracking-[.16em] text-[#9a3412] uppercase">Copper & Sage Studio</p><h2 class="mt-3.5 font-['Iowan_Old_Style','Palatino_Linotype',Palatino,Georgia,serif] text-[clamp(2.1rem,5vw,3rem)] leading-[1.05] font-normal tracking-[-.01em]" id="cs-title">Sessions & prices</h2><p class="mx-auto mt-3.5 max-w-[40ch] text-base leading-[1.65] text-[#5c554d]">Portraits and events in and around Bristol. Every session includes a private online gallery.</p></header>
  <ol class="border-t-2 border-[#1c1917]">
    <li class="grid grid-cols-[3.2rem_minmax(0,1fr)_auto_auto] items-baseline gap-x-7 gap-y-1.5 border-b border-[#d6cdbf] py-6 max-sm:grid-cols-[2.2rem_minmax(0,1fr)] max-sm:gap-x-3.5 max-sm:gap-y-2">
      <span class="font-['Iowan_Old_Style','Palatino_Linotype',Palatino,Georgia,serif] text-[1.15rem] text-[#9a3412] italic" aria-hidden="true">01</span>
      <div><h3 class="font-['Iowan_Old_Style','Palatino_Linotype',Palatino,Georgia,serif] text-[1.45rem] leading-[1.2] font-normal">Portrait session</h3><p class="mt-1 max-w-[48ch] text-[.94rem] leading-[1.55] text-[#5c554d]">One hour in the studio, two outfits and 20 edited photographs.</p></div>
      <p class="font-['Iowan_Old_Style','Palatino_Linotype',Palatino,Georgia,serif] text-[1.3rem] whitespace-nowrap max-sm:col-start-2">$280</p>
      <a class="text-[.9rem] font-bold whitespace-nowrap text-[#1c1917] hover:text-[#9a3412] max-sm:col-start-2 underline decoration-[#9a3412] decoration-2 underline-offset-[5px] focus-visible:rounded-[2px] focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[#9a3412]" href="#">Book<span class="sr-only"> a portrait session</span></a>
    </li>
    <li class="grid grid-cols-[3.2rem_minmax(0,1fr)_auto_auto] items-baseline gap-x-7 gap-y-1.5 border-b border-[#d6cdbf] py-6 max-sm:grid-cols-[2.2rem_minmax(0,1fr)] max-sm:gap-x-3.5 max-sm:gap-y-2">
      <span class="font-['Iowan_Old_Style','Palatino_Linotype',Palatino,Georgia,serif] text-[1.15rem] text-[#9a3412] italic" aria-hidden="true">02</span>
      <div><h3 class="font-['Iowan_Old_Style','Palatino_Linotype',Palatino,Georgia,serif] text-[1.45rem] leading-[1.2] font-normal">Family session</h3><p class="mt-1 max-w-[48ch] text-[.94rem] leading-[1.55] text-[#5c554d]">Ninety minutes on location within 20 miles, with 40 edited photographs.</p></div>
      <p class="font-['Iowan_Old_Style','Palatino_Linotype',Palatino,Georgia,serif] text-[1.3rem] whitespace-nowrap max-sm:col-start-2">$420</p>
      <a class="text-[.9rem] font-bold whitespace-nowrap text-[#1c1917] hover:text-[#9a3412] max-sm:col-start-2 underline decoration-[#9a3412] decoration-2 underline-offset-[5px] focus-visible:rounded-[2px] focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[#9a3412]" href="#">Book<span class="sr-only"> a family session</span></a>
    </li>
    <li class="grid grid-cols-[3.2rem_minmax(0,1fr)_auto_auto] items-baseline gap-x-7 gap-y-1.5 border-b border-[#d6cdbf] py-6 max-sm:grid-cols-[2.2rem_minmax(0,1fr)] max-sm:gap-x-3.5 max-sm:gap-y-2">
      <span class="font-['Iowan_Old_Style','Palatino_Linotype',Palatino,Georgia,serif] text-[1.15rem] text-[#9a3412] italic" aria-hidden="true">03</span>
      <div><h3 class="font-['Iowan_Old_Style','Palatino_Linotype',Palatino,Georgia,serif] text-[1.45rem] leading-[1.2] font-normal">Brand day</h3><p class="mt-1 max-w-[48ch] text-[.94rem] leading-[1.55] text-[#5c554d]">A full day of team portraits and workplace photographs for your website.</p></div>
      <p class="font-['Iowan_Old_Style','Palatino_Linotype',Palatino,Georgia,serif] text-[1.3rem] whitespace-nowrap max-sm:col-start-2">$1,450</p>
      <a class="text-[.9rem] font-bold whitespace-nowrap text-[#1c1917] hover:text-[#9a3412] max-sm:col-start-2 underline decoration-[#9a3412] decoration-2 underline-offset-[5px] focus-visible:rounded-[2px] focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[#9a3412]" href="#">Book<span class="sr-only"> a brand day session</span></a>
    </li>
    <li class="grid grid-cols-[3.2rem_minmax(0,1fr)_auto_auto] items-baseline gap-x-7 gap-y-1.5 border-b border-[#d6cdbf] py-6 max-sm:grid-cols-[2.2rem_minmax(0,1fr)] max-sm:gap-x-3.5 max-sm:gap-y-2">
      <span class="font-['Iowan_Old_Style','Palatino_Linotype',Palatino,Georgia,serif] text-[1.15rem] text-[#9a3412] italic" aria-hidden="true">04</span>
      <div><h3 class="font-['Iowan_Old_Style','Palatino_Linotype',Palatino,Georgia,serif] text-[1.45rem] leading-[1.2] font-normal">Wedding coverage</h3><p class="mt-1 max-w-[48ch] text-[.94rem] leading-[1.55] text-[#5c554d]">Ceremony to first dance, about eight hours, delivered in an online gallery.</p></div>
      <p class="font-['Iowan_Old_Style','Palatino_Linotype',Palatino,Georgia,serif] text-[1.3rem] whitespace-nowrap max-sm:col-start-2"><small class="mr-1 text-[.85rem] text-[#5c554d] italic">from</small>$2,600</p>
      <a class="text-[.9rem] font-bold whitespace-nowrap text-[#1c1917] hover:text-[#9a3412] max-sm:col-start-2 underline decoration-[#9a3412] decoration-2 underline-offset-[5px] focus-visible:rounded-[2px] focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[#9a3412]" href="#">Book<span class="sr-only"> a wedding session</span></a>
    </li>
  </ol>
  <p class="mt-[18px] text-center text-[.86rem] leading-normal text-[#5c554d]">Prices include VAT and travel within 20 miles. A 25% deposit holds your date.</p>
</section></div>

About this set

Price lists for freelancers, studios and service businesses, set like a page from a magazine instead of a row of SaaS cards. Rate card with dotted leaders is a brand designer’s rates: an introduction with availability and a Request a quote link on the left, and five services on the right, each with a serif name, a dotted leader running to the price, a short description and the timescale. Prices that start from a figure say so in an italic from. Numbered sessions with booking links is a photography studio’s session list with italic serif numbers, the name and what is included, the price and a Book link on every row, closed by a line about VAT, travel and the deposit. On phones the price and link drop under the description. Both lists are ordered lists with a heading for every service, and each Book link carries visually hidden text naming its session. The serif is a system stack, so nothing is downloaded. In Bootstrap the session list is a flush .list-group and the quote link is an .icon-link. No JavaScript.

What’s included

  • A rate card with dotted leaders and a numbered session list
  • System serif stack, no web font to download
  • Every service is a heading inside an ordered list
  • Book links name their session for screen readers
  • Bootstrap version uses the grid, .list-group-flush and .icon-link

Accessibility

Services are headings inside ordered lists, so they can be found from a screen reader's heading list. The dotted leaders and row numbers are hidden from assistive technology, and each Book link adds visually hidden text such as a portrait session. Links show a 2px outline on keyboard focus, and the arrow nudge on the quote link is switched off under prefers-reduced-motion.

Customise it

Change --ed-accent, --ed-rule, --ed-dots and --ed-serif on .ed for colour and type. In Bootstrap the session rows use --bs-list-group-* variables; in Tailwind edit the font-[...] serif utility and the #9a3412 accent.