BlocksCard Group
Hello Yumma UI! 🎉

Card Group

Organizes multiple cards into a cohesive group with consistent spacing and layout.

Basic Card Group

Fast performance

Optimized for speed and efficiency.

Secure by default

Built with security in mind.

Fully customizable

Adapt to your needs easily.

<div class="d-g gtc-1 sm:gtc-3 g-6">
  <div class="p-6 b-1 bc-silver-4 rad-0">
    <div class="d-f ai-c jc-c d-10 rad-9 bg-silver-1 tc-slate mb-4">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="w-5 h-5"
        viewBox="0 0 256 256"
        aria-hidden="true"
      >
        <rect width="256" height="256" fill="none" />
        <polygon
          points="160 16 144 96 208 120 96 240 112 160 48 136 160 16"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="16"
        />
      </svg>
    </div>
    <h3 class="ff-s fs-md fw-600 tc-slate mb-2">Fast performance</h3>
    <p class="fs-sm tc-slate-6 m-0">Optimized for speed and efficiency.</p>
  </div>
  <div class="p-6 b-1 bc-silver-4 rad-0">
    <div class="d-f ai-c jc-c d-10 rad-9 bg-silver-1 tc-slate mb-4">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="w-5 h-5"
        viewBox="0 0 256 256"
        aria-hidden="true"
      >
        <rect width="256" height="256" fill="none" />
        <circle
          cx="128"
          cy="140"
          r="20"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="16"
        />
        <line
          x1="128"
          y1="160"
          x2="128"
          y2="184"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="16"
        />
        <rect
          x="40"
          y="88"
          width="176"
          height="128"
          rx="8"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="16"
        />
        <path
          d="M88,88V56a40,40,0,0,1,80,0V88"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="16"
        />
      </svg>
    </div>
    <h3 class="ff-s fs-md fw-600 tc-slate mb-2">Secure by default</h3>
    <p class="fs-sm tc-slate-6 m-0">Built with security in mind.</p>
  </div>
  <div class="p-6 b-1 bc-silver-4 rad-0">
    <div class="d-f ai-c jc-c d-10 rad-9 bg-silver-1 tc-slate mb-4">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="w-5 h-5"
        viewBox="0 0 256 256"
        aria-hidden="true"
      >
        <rect width="256" height="256" fill="none" />
        <circle
          cx="128"
          cy="128"
          r="80"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="16"
        />
        <line
          x1="128"
          y1="128"
          x2="232"
          y2="128"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="16"
        />
        <line
          x1="128"
          y1="128"
          x2="76"
          y2="37.93"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="16"
        />
        <line
          x1="128"
          y1="128"
          x2="76"
          y2="218.07"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="16"
        />
        <line
          x1="128"
          y1="48"
          x2="128"
          y2="24"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="16"
        />
        <line
          x1="58.72"
          y1="88"
          x2="37.93"
          y2="76"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="16"
        />
        <line
          x1="48"
          y1="128"
          x2="24"
          y2="128"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="16"
        />
        <line
          x1="58.72"
          y1="168"
          x2="37.93"
          y2="180"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="16"
        />
        <line
          x1="128"
          y1="208"
          x2="128"
          y2="232"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="16"
        />
        <line
          x1="168"
          y1="197.28"
          x2="180"
          y2="218.07"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="16"
        />
        <line
          x1="197.28"
          y1="168"
          x2="218.07"
          y2="180"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="16"
        />
        <line
          x1="197.28"
          y1="88"
          x2="218.07"
          y2="76"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="16"
        />
        <line
          x1="168"
          y1="58.72"
          x2="180"
          y2="37.93"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="16"
        />
      </svg>
    </div>
    <h3 class="ff-s fs-md fw-600 tc-slate mb-2">Fully customizable</h3>
    <p class="fs-sm tc-slate-6 m-0">Adapt to your needs easily.</p>
  </div>
</div>

Two Columns

Analytics

Track your metrics and monitor performance in real-time.

Automation

Automate workflows and save time on repetitive tasks.

Integrations

Connect with your favorite tools and services.

Collaboration

Work together with your team in real-time.

<div class="d-g gtc-1 sm:gtc-2 g-6">
  <div class="p-6 b-1 bc-silver-4 rad-0">
    <div class="d-f ai-c jc-c d-10 rad-9 bg-silver-1 tc-slate mb-4">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="w-5 h-5"
        viewBox="0 0 256 256"
        aria-hidden="true"
      >
        <rect width="256" height="256" fill="none" />
        <polyline
          points="224 208 32 208 32 48"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="16"
        />
        <polyline
          points="200 72 128 144 96 112 32 176"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="16"
        />
        <polyline
          points="200 112 200 72 160 72"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="16"
        />
      </svg>
    </div>
    <h3 class="ff-s fs-md fw-600 tc-slate mb-2">Analytics</h3>
    <p class="fs-sm tc-slate-6 m-0">Track your metrics and monitor performance in real-time.</p>
  </div>
  <div class="p-6 b-1 bc-silver-4 rad-0">
    <div class="d-f ai-c jc-c d-10 rad-9 bg-silver-1 tc-slate mb-4">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="w-5 h-5"
        viewBox="0 0 256 256"
        aria-hidden="true"
      >
        <rect width="256" height="256" fill="none" />
        <rect
          x="32"
          y="56"
          width="192"
          height="160"
          rx="24"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="16"
        />
        <rect
          x="72"
          y="144"
          width="112"
          height="40"
          rx="20"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="16"
        />
        <line
          x1="148"
          y1="144"
          x2="148"
          y2="184"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="16"
        />
        <line
          x1="108"
          y1="144"
          x2="108"
          y2="184"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="16"
        />
        <line
          x1="128"
          y1="56"
          x2="128"
          y2="16"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="16"
        />
        <circle cx="84" cy="108" r="12" />
        <circle cx="172" cy="108" r="12" />
      </svg>
    </div>
    <h3 class="ff-s fs-md fw-600 tc-slate mb-2">Automation</h3>
    <p class="fs-sm tc-slate-6 m-0">Automate workflows and save time on repetitive tasks.</p>
  </div>
  <div class="p-6 b-1 bc-silver-4 rad-0">
    <div class="d-f ai-c jc-c d-10 rad-9 bg-silver-1 tc-slate mb-4">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="w-5 h-5"
        viewBox="0 0 256 256"
        aria-hidden="true"
      >
        <rect width="256" height="256" fill="none" />
        <path
          d="M141.38,64.68l11-11a46.62,46.62,0,0,1,65.94,0h0a46.62,46.62,0,0,1,0,65.94L193.94,144,183.6,154.34a46.63,46.63,0,0,1-66-.05h0A46.48,46.48,0,0,1,104,120.06"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="16"
        />
        <path
          d="M114.62,191.32l-11,11a46.63,46.63,0,0,1-66-.05h0a46.63,46.63,0,0,1,.06-65.89L72.4,101.66a46.62,46.62,0,0,1,65.94,0h0A46.45,46.45,0,0,1,152,135.94"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="16"
        />
      </svg>
    </div>
    <h3 class="ff-s fs-md fw-600 tc-slate mb-2">Integrations</h3>
    <p class="fs-sm tc-slate-6 m-0">Connect with your favorite tools and services.</p>
  </div>
  <div class="p-6 b-1 bc-silver-4 rad-0">
    <div class="d-f ai-c jc-c d-10 rad-9 bg-silver-1 tc-slate mb-4">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="w-5 h-5"
        viewBox="0 0 256 256"
        aria-hidden="true"
      >
        <rect width="256" height="256" fill="none" />
        <circle
          cx="84"
          cy="108"
          r="52"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="16"
        />
        <path
          d="M10.23,200a88,88,0,0,1,147.54,0"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="16"
        />
        <path
          d="M172,160a87.93,87.93,0,0,1,73.77,40"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="16"
        />
        <path
          d="M152.69,59.7A52,52,0,1,1,172,160"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="16"
        />
      </svg>
    </div>
    <h3 class="ff-s fs-md fw-600 tc-slate mb-2">Collaboration</h3>
    <p class="fs-sm tc-slate-6 m-0">Work together with your team in real-time.</p>
  </div>
</div>