Application toolkit - Card

<div class="flex flex-col bg-white border shadow-sm rounded-xl dark:bg-gray-800 dark:border-gray-700 dark:shadow-slate-700/[.7]">
  <img class="w-full h-auto rounded-t-xl" src="/assets/images/design-system/working-group.jpg" alt="Accessibility Working Group">
  <div class="p-4 md:p-5">
    <h3 class="text-lg font-bold text-gray-800 dark:text-white">
      Accessibility Working Group
    </h3>
    <p class="mt-1 text-gray-800 dark:text-gray-400">
      We have a vibrant accessibility working group where we discuss everything we're doing to push Accessibility and inclusivity at HS2
    </p>
    <a class="mt-3 py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-hs2-secondary text-white hover:bg-hs2-secondary-hover focus:outline-none focus:ring-2 focus:ring-hs2-secondary focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800" href="#">
      Find out how to get involved in our working group
    </a>
  </div>
</div>

<div class="flex flex-col bg-white border shadow-sm rounded-xl p-4 md:p-5 dark:bg-gray-800 dark:border-gray-700 dark:shadow-slate-700/[.7] dark:text-gray-400">
  Some quick example text to build on the card title and make up the bulk of the card's content.
</div>

<div class="flex flex-col bg-white border shadow-sm rounded-xl p-4 md:p-5 dark:bg-gray-800 dark:border-gray-700 dark:shadow-slate-700/[.7]">
  <h3 class="text-lg font-bold text-gray-800 dark:text-white">
    Card title
  </h3>
  <p class="mt-1 text-xs font-medium uppercase text-gray-500 dark:text-gray-500">
    Card subtitle
  </p>
  <p class="mt-2 text-gray-800 dark:text-gray-400">
    Some quick example text to build on the card title and make up the bulk of the card's content.
  </p>
  <a class="mt-3 inline-flex items-center gap-2 mt-5 text-sm font-medium text-blue-500 hover:text-blue-700" href="#">
    Card link
    <svg class="w-2.5 h-auto" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
    </svg>
  </a>
</div>

<div class="flex flex-col bg-white border shadow-sm rounded-xl dark:bg-gray-800 dark:border-gray-700 dark:shadow-slate-700/[.7]">
  <div class="bg-gray-100 border-b rounded-t-xl py-3 px-4 md:py-4 md:px-5 dark:bg-gray-800 dark:border-gray-700">
    <p class="mt-1 text-sm text-gray-500 dark:text-gray-500">
      Featured
    </p>
  </div>
  <div class="p-4 md:p-5">
    <h3 class="text-lg font-bold text-gray-800 dark:text-white">
      Card title
    </h3>
    <p class="mt-2 text-gray-800 dark:text-gray-400">
      With supporting text below as a natural lead-in to additional content.
    </p>
    <a class="mt-3 inline-flex items-center gap-2 mt-5 text-sm font-medium text-blue-500 hover:text-blue-700" href="#">
      Card link
      <svg class="w-2.5 h-auto" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
      </svg>
    </a>
  </div>
</div>

<div class="flex flex-col bg-white border shadow-sm rounded-xl dark:bg-gray-800 dark:border-gray-700 dark:shadow-slate-700/[.7]">
  <div class="p-4 md:p-5">
    <h3 class="text-lg font-bold text-gray-800 dark:text-white">
      Card title
    </h3>
    <p class="mt-2 text-gray-800 dark:text-gray-400">
      With supporting text below as a natural lead-in to additional content.
    </p>
    <a class="mt-3 inline-flex items-center gap-2 mt-5 text-sm font-medium text-blue-500 hover:text-blue-700" href="#">
      Card link
      <svg class="w-2.5 h-auto" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
      </svg>
    </a>
  </div>
  <div class="bg-gray-100 border-t rounded-b-xl py-3 px-4 md:py-4 md:px-5 dark:bg-gray-800 dark:border-gray-700">
    <p class="mt-1 text-sm text-gray-500 dark:text-gray-500">
      Last updated 5 mins ago
    </p>
  </div>
</div>

<div class="flex flex-col bg-white border shadow-sm rounded-xl dark:bg-gray-800 dark:border-gray-700 dark:shadow-slate-700/[.7]">
  <div class="p-4 md:p-5">
    <h3 class="text-lg font-bold text-gray-800 dark:text-white">
      Card title
    </h3>
    <p class="mt-2 text-gray-800 dark:text-gray-400">
      With supporting text below as a natural lead-in to additional content.
    </p>
    <a class="mt-3 inline-flex items-center gap-2 mt-5 text-sm font-medium text-blue-500 hover:text-blue-700" href="#">
      Card link
      <svg class="w-2.5 h-auto" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
      </svg>
    </a>
  </div>
</div>

<div class="flex flex-col bg-white border shadow-sm rounded-xl dark:bg-gray-800 dark:border-gray-700 dark:shadow-slate-700/[.7]">
  <div class="p-4 md:p-7">
    <h3 class="text-lg font-bold text-gray-800 dark:text-white">
      Card title
    </h3>
    <p class="mt-2 text-gray-800 dark:text-gray-400">
      With supporting text below as a natural lead-in to additional content.
    </p>
    <a class="mt-3 inline-flex items-center gap-2 mt-5 text-sm font-medium text-blue-500 hover:text-blue-700" href="#">
      Card link
      <svg class="w-2.5 h-auto" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
      </svg>
    </a>
  </div>
</div>

<div class="flex flex-col bg-white border shadow-sm rounded-xl dark:bg-gray-800 dark:border-gray-700 dark:shadow-slate-700/[.7]">
  <div class="p-4 md:p-10">
    <h3 class="text-lg font-bold text-gray-800 dark:text-white">
      Card title
    </h3>
    <p class="mt-2 text-gray-800 dark:text-gray-400">
      With supporting text below as a natural lead-in to additional content.
    </p>
    <a class="mt-3 inline-flex items-center gap-2 mt-5 text-sm font-medium text-blue-500 hover:text-blue-700" href="#">
      Card link
      <svg class="w-2.5 h-auto" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
      </svg>
    </a>
  </div>
</div>

<div class="border rounded-xl shadow-sm p-6 dark:bg-gray-800 dark:border-gray-700">
  <div class="flex flex-col bg-white border shadow-sm rounded-xl dark:bg-gray-800 dark:border-gray-700 dark:shadow-slate-700/[.7]">
    <div class="bg-gray-100 border-b rounded-t-xl pt-3 px-4 md:pt-4 md:px-5 dark:bg-slate-800 dark:border-gray-700">
      <nav class="flex space-x-2" aria-label="Tabs">
        <a class="-mb-px py-3 px-4 bg-white text-sm font-medium text-center border border-b-transparent text-gray-500 rounded-t-lg hover:text-gray-700 focus:z-10 dark:bg-gray-800 dark:border-gray-700 dark:border-b-gray-800 dark:hover:text-gray-400" href="#">
          Active
        </a>

        <a class="-mb-px py-3 px-4 text-sm font-medium text-center border-b text-gray-500 rounded-t-lg hover:text-gray-700 focus:z-10 dark:border-gray-700 dark:hover:text-gray-400" href="#">
          Link
        </a>

        <a class="-mb-px py-3 px-4 text-sm font-medium text-center border-b text-gray-500 rounded-t-lg hover:text-gray-700 focus:z-10 dark:border-gray-700 dark:hover:text-gray-400" href="#">
          Link
        </a>
      </nav>
    </div>
    <div class="p-4 text-center md:py-7 md:px-5">
      <h3 class="text-lg font-bold text-gray-800 dark:text-white">
        Card title
      </h3>
      <p class="mt-2 text-gray-800 dark:text-gray-400">
        With supporting text below as a natural lead-in to additional content.
      </p>
      <a class="mt-3 py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-hs2-secondary text-white hover:bg-hs2-secondary-hover focus:outline-none focus:ring-2 focus:ring-hs2-secondary focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800" href="#">
        Go somewhere
      </a>
    </div>
  </div>
</div>

<div class="flex flex-col bg-white border shadow-sm rounded-xl dark:bg-gray-800 dark:border-gray-700 dark:shadow-slate-700/[.7]">
  <!-- Select (Mobile only) -->
  <div class="sm:hidden">
    <label for="hs-card-nav-tabs" class="sr-only">Select a nav</label>
    <select name="hs-card-nav-tabs" id="hs-card-nav-tabs" class="block w-full border-t-0 border-x-0 border-gray-300 rounded-t-xl focus:ring-blue-600 focus:border-blue-600">
      <option selected>My Account</option>
      <option>Company</option>
      <option>Team Members</option>
      <option>Billing</option>
    </select>
  </div>
  <!-- End Select (Mobile only) -->

  <!-- Nav Tabs (Device only) -->
  <div class="hidden sm:block">
    <nav class="relative z-0 flex border-b rounded-xl divide-x divide-gray-200 dark:border-gray-700 dark:divide-gray-700" aria-label="Tabs">
      <a class="group relative min-w-0 flex-1 bg-white py-4 px-4 border-b-2 border-b-hs2-primary text-gray-900 rounded-tl-xl text-sm font-medium text-center overflow-hidden hover:bg-gray-50 focus:z-10 dark:bg-gray-800 dark:text-gray-300" aria-current="page" href="#">
        My Account
      </a>

      <a class="group relative min-w-0 flex-1 bg-white py-4 px-4 text-gray-500 hover:text-gray-700 text-sm font-medium text-center overflow-hidden hover:bg-gray-50 focus:z-10 dark:bg-gray-800 dark:hover:text-gray-400" href="#">
        Company
      </a>

      <a class="group relative min-w-0 flex-1 bg-white py-4 px-4 text-gray-500 hover:text-gray-700 text-sm font-medium text-center overflow-hidden hover:bg-gray-50 focus:z-10 dark:bg-gray-800 dark:hover:text-gray-400" href="#">
        Team Members
      </a>

      <a class="group relative min-w-0 flex-1 bg-white py-4 px-4 text-gray-500 hover:text-gray-700 rounded-tr-xl text-sm font-medium text-center overflow-hidden hover:bg-gray-50 focus:z-10 dark:bg-gray-800 dark:hover:text-gray-400" href="#">
        Billing
      </a>
    </nav>
  </div>
  <!-- End Nav Tabs (Device only) -->

  <div class="p-4 text-center md:py-7 md:px-5">
    <h3 class="text-lg font-bold text-gray-800 dark:text-white">
      Card title
    </h3>
    <p class="mt-2 text-gray-800 dark:text-gray-400">
      With supporting text below as a natural lead-in to additional content.
    </p>
    <a class="mt-3 py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-hs2-secondary text-white hover:bg-hs2-secondary-hover focus:outline-none focus:ring-2 focus:ring-hs2-secondary focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800" href="#">
      Go somewhere
    </a>
  </div>
</div>