---
sidebar_position: 2
---

# Cards

![Cards](/img/components-cards-feature.png)

```jsx title="Frontend/sections/Features/CardsFeature.tsx"
<>
  {/* Icon Blocks */}
  <div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
    <div className="grid sm:grid-cols-2 lg:grid-cols-3 items-center gap-6 md:gap-10">
      {/* Card */}
      <div className="size-full bg-neutral shadow-lg rounded-lg p-5">
        <div className="flex items-center gap-x-4 mb-3">
          <div className="inline-flex justify-center items-center size-[62px] rounded-full border-4 border-primary/10 bg-primary/10">
            <svg
              className="flex-shrink-0 size-6 text-primary dark:text-primary/80"
              xmlns="http://www.w3.org/2000/svg"
              width={24}
              height={24}
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth={2}
              strokeLinecap="round"
              strokeLinejoin="round"
            >
              <circle cx="13.5" cy="6.5" r=".5" />
              <circle cx="17.5" cy="10.5" r=".5" />
              <circle cx="8.5" cy="7.5" r=".5" />
              <circle cx="6.5" cy="12.5" r=".5" />
              <path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z" />
            </svg>
          </div>
          <div className="flex-shrink-0">
            <h3 className="block text-lg font-semibold text-primary-content">
              Build your portfolio
            </h3>
          </div>
        </div>
        <p className="text-primary-content/80">
          The simplest way to keep your portfolio always up-to-date.
        </p>
      </div>
      {/* End Card */}
      {/* Card */}
      <div className="size-full bg-neutral shadow-lg rounded-lg p-5">
        <div className="flex items-center gap-x-4 mb-3">
          <div className="inline-flex justify-center items-center size-[62px] rounded-full border-4 border-primary/10 bg-primary/10">
            <svg
              className="flex-shrink-0 size-6 text-primary dark:text-primary/80"
              xmlns="http://www.w3.org/2000/svg"
              width={24}
              height={24}
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth={2}
              strokeLinecap="round"
              strokeLinejoin="round"
            >
              <path d="M2 3h20" />
              <path d="M21 3v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V3" />
              <path d="m7 21 5-5 5 5" />
            </svg>
          </div>
          <div className="flex-shrink-0">
            <h3 className="block text-lg font-semibold text-primary-content">
              Get freelance work
            </h3>
          </div>
        </div>
        <p className="text-primary-content/80">
          New design projects delivered to your inbox each morning.
        </p>
      </div>
      {/* End Card */}
      {/* Card */}
      <div className="size-full bg-neutral shadow-lg rounded-lg p-5">
        <div className="flex items-center gap-x-4 mb-3">
          <div className="inline-flex justify-center items-center size-[62px] rounded-full border-4 border-primary/10 bg-primary/10">
            <svg
              className="flex-shrink-0 size-6 text-primary dark:text-primary/80"
              xmlns="http://www.w3.org/2000/svg"
              width={24}
              height={24}
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth={2}
              strokeLinecap="round"
              strokeLinejoin="round"
            >
              <path d="m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7" />
              <path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" />
              <path d="M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4" />
              <path d="M2 7h20" />
              <path d="M22 7v3a2 2 0 0 1-2 2v0a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12v0a2 2 0 0 1-2-2V7" />
            </svg>
          </div>
          <div className="flex-shrink-0">
            <h3 className="block text-lg font-semibold text-primary-content">
              Sell your goods
            </h3>
          </div>
        </div>
        <p className="text-primary-content/80">
          Get your goods in front of millions of potential customers with ease.
        </p>
      </div>
      {/* End Card */}
      {/* Card */}
      <div className="size-full bg-neutral shadow-lg rounded-lg p-5">
        <div className="flex items-center gap-x-4 mb-3">
          <div className="inline-flex justify-center items-center size-[62px] rounded-full border-4 border-primary/10 bg-primary/10">
            <svg
              className="flex-shrink-0 size-6 text-primary dark:text-primary/80"
              xmlns="http://www.w3.org/2000/svg"
              width={24}
              height={24}
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth={2}
              strokeLinecap="round"
              strokeLinejoin="round"
            >
              <path d="M5.5 8.5 9 12l-3.5 3.5L2 12l3.5-3.5Z" />
              <path d="m12 2 3.5 3.5L12 9 8.5 5.5 12 2Z" />
              <path d="M18.5 8.5 22 12l-3.5 3.5L15 12l3.5-3.5Z" />
              <path d="m12 15 3.5 3.5L12 22l-3.5-3.5L12 15Z" />
            </svg>
          </div>
          <div className="flex-shrink-0">
            <h3 className="block text-lg font-semibold text-primary-content">
              Get freelance work
            </h3>
          </div>
        </div>
        <p className="text-primary-content/80">
          New design projects delivered to your inbox each morning.
        </p>
      </div>
      {/* End Card */}
      {/* Card */}
      <div className="size-full bg-neutral shadow-lg rounded-lg p-5">
        <div className="flex items-center gap-x-4 mb-3">
          <div className="inline-flex justify-center items-center size-[62px] rounded-full border-4 border-primary/10 bg-primary/10">
            <svg
              className="flex-shrink-0 size-6 text-primary dark:text-primary/80"
              xmlns="http://www.w3.org/2000/svg"
              width={24}
              height={24}
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth={2}
              strokeLinecap="round"
              strokeLinejoin="round"
            >
              <path d="M16.466 7.5C15.643 4.237 13.952 2 12 2 9.239 2 7 6.477 7 12s2.239 10 5 10c.342 0 .677-.069 1-.2" />
              <path d="m15.194 13.707 3.814 1.86-1.86 3.814" />
              <path d="M19 15.57c-1.804.885-4.274 1.43-7 1.43-5.523 0-10-2.239-10-5s4.477-5 10-5c4.838 0 8.873 1.718 9.8 4" />
            </svg>
          </div>
          <div className="flex-shrink-0">
            <h3 className="block text-lg font-semibold text-primary-content">
              Sell your goods
            </h3>
          </div>
        </div>
        <p className="text-primary-content/80">
          Get your goods in front of millions of potential customers with ease.
        </p>
      </div>
      {/* End Card */}
      {/* Card */}
      <div className="size-full bg-neutral shadow-lg rounded-lg p-5">
        <div className="flex items-center gap-x-4 mb-3">
          <div className="inline-flex justify-center items-center size-[62px] rounded-full border-4 border-primary/10 bg-primary/10">
            <svg
              className="flex-shrink-0 size-6 text-primary dark:text-primary/80"
              xmlns="http://www.w3.org/2000/svg"
              width={24}
              height={24}
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth={2}
              strokeLinecap="round"
              strokeLinejoin="round"
            >
              <path d="M8.3 10a.7.7 0 0 1-.626-1.079L11.4 3a.7.7 0 0 1 1.198-.043L16.3 8.9a.7.7 0 0 1-.572 1.1Z" />
              <rect x={3} y={14} width={7} height={7} rx={1} />
              <circle cx="17.5" cy="17.5" r="3.5" />
            </svg>
          </div>
          <div className="flex-shrink-0">
            <h3 className="block text-lg font-semibold text-primary-content">
              Build your portfolio
            </h3>
          </div>
        </div>
        <p className="text-primary-content/80">
          The simplest way to keep your portfolio always up-to-date.
        </p>
      </div>
      {/* End Card */}
    </div>
  </div>
  {/* End Icon Blocks */}
</>
```