UCEA

Theme 

<div class="container component-spacer-margin">
    <div>
        <h2 class="text-5xl mb-4">Example of data theme being applied at component level</h2>
        <div class="flex gap-12 py-12">

            <div data-theme="" class="bg-surface text-content rounded-2xl p-8 w-72 flex flex-col gap-5">
                <div class="flex items-center gap-2">
                    <div class="w-2.5 h-2.5 rounded-full bg-primary"></div>
                </div>
                <div>
                    <h2 class="text-xl font-semibold mb-1">Default theme</h2>
                    <p class="text-sm opacity-60">Your account is ready. Manage your settings below.</p>
                </div>
                <div class="flex gap-2">
                    <span class="bg-primary text-white text-xs px-3 py-0.5 rounded-full">Active</span>
                    <span class="border border-primary text-content text-xs px-3 py-0.5 rounded-full opacity-50">Pro</span>
                </div>
                <div class="border border-primary/20 rounded-lg p-3">
                    <p class="text-xs opacity-50 mb-1">Monthly usage</p>
                    <p class="text-2xl font-bold">84<span class="text-sm opacity-50">%</span></p>
                    <div class="mt-2 h-1 bg-white/10 rounded-full overflow-hidden">
                        <div class="bg-primary h-full rounded-full" style="width: 84%"></div>
                    </div>
                </div>
                <button class="bg-primary hover:bg-primary-hover text-white font-medium text-sm py-2.5 px-4 rounded-lg w-full transition-colors cursor-pointer border-0">
                    Manage account
                </button>
            </div>

            <div data-theme="a" class="bg-surface text-content rounded-2xl p-8 w-72 flex flex-col gap-5">
                <div class="flex items-center gap-2">
                    <div class="w-2.5 h-2.5 rounded-full bg-primary"></div>
                </div>
                <div>
                    <h2 class="text-xl font-semibold mb-1">Theme a</h2>
                    <p class="text-sm opacity-60">Your account is ready. Manage your settings below.</p>
                </div>
                <div class="flex gap-2">
                    <span class="bg-primary text-white text-xs px-3 py-0.5 rounded-full">Active</span>
                    <span class="border border-primary text-content text-xs px-3 py-0.5 rounded-full opacity-50">Pro</span>
                </div>
                <div class="border border-primary/20 rounded-lg p-3">
                    <p class="text-xs opacity-50 mb-1">Monthly usage</p>
                    <p class="text-2xl font-bold">84<span class="text-sm opacity-50">%</span></p>
                    <div class="mt-2 h-1 bg-white/10 rounded-full overflow-hidden">
                        <div class="bg-primary h-full rounded-full" style="width: 84%"></div>
                    </div>
                </div>
                <button class="bg-primary hover:bg-primary-hover text-white font-medium text-sm py-2.5 px-4 rounded-lg w-full transition-colors cursor-pointer border-0">
                    Manage account
                </button>
            </div>

            <div data-theme="b" class="bg-surface text-content rounded-2xl p-8 w-72 flex flex-col gap-5">
                <div class="flex items-center gap-2">
                    <div class="w-2.5 h-2.5 rounded-full bg-primary"></div>
                </div>
                <div>
                    <h2 class="text-xl font-semibold mb-1">Theme b</h2>
                    <p class="text-sm opacity-60">Your account is ready. Manage your settings below.</p>
                </div>
                <div class="flex gap-2">
                    <span class="bg-primary text-white text-xs px-3 py-0.5 rounded-full">Active</span>
                    <span class="border border-primary text-content text-xs px-3 py-0.5 rounded-full opacity-50">Pro</span>
                </div>
                <div class="border border-primary/20 rounded-lg p-3">
                    <p class="text-xs opacity-50 mb-1">Monthly usage</p>
                    <p class="text-2xl font-bold">84<span class="text-sm opacity-50">%</span></p>
                    <div class="mt-2 h-1 bg-white/10 rounded-full overflow-hidden">
                        <div class="bg-primary h-full rounded-full" style="width: 84%"></div>
                    </div>
                </div>
                <button class="bg-primary hover:bg-primary-hover text-white font-medium text-sm py-2.5 px-4 rounded-lg w-full transition-colors cursor-pointer border-0">
                    Manage account
                </button>
            </div>

        </div>
    </div>
    <div>
        <h2 class="text-5xl mb-4">Example of data theme being applied at section level</h2>
        <div class="flex gap-12 py-12" data-theme="">

            <div class="bg-surface text-content rounded-2xl p-8 w-72 flex flex-col gap-5">
                <div class="flex items-center gap-2">
                    <div class="w-2.5 h-2.5 rounded-full bg-primary"></div>
                </div>
                <div>
                    <h2 class="text-xl font-semibold mb-1">Default theme</h2>
                    <p class="text-sm opacity-60">Your account is ready. Manage your settings below.</p>
                </div>
                <div class="flex gap-2">
                    <span class="bg-primary text-white text-xs px-3 py-0.5 rounded-full">Active</span>
                    <span class="border border-primary text-content text-xs px-3 py-0.5 rounded-full opacity-50">Pro</span>
                </div>
                <div class="border border-primary/20 rounded-lg p-3">
                    <p class="text-xs opacity-50 mb-1">Monthly usage</p>
                    <p class="text-2xl font-bold">84<span class="text-sm opacity-50">%</span></p>
                    <div class="mt-2 h-1 bg-white/10 rounded-full overflow-hidden">
                        <div class="bg-primary h-full rounded-full" style="width: 84%"></div>
                    </div>
                </div>
                <button class="bg-primary hover:bg-primary-hover text-white font-medium text-sm py-2.5 px-4 rounded-lg w-full transition-colors cursor-pointer border-0">
                    Manage account
                </button>
            </div>

            <div class="bg-surface text-content rounded-2xl p-8 w-72 flex flex-col gap-5">
                <div class="flex items-center gap-2">
                    <div class="w-2.5 h-2.5 rounded-full bg-primary"></div>
                </div>
                <div>
                    <h2 class="text-xl font-semibold mb-1">Default theme</h2>
                    <p class="text-sm opacity-60">Your account is ready. Manage your settings below.</p>
                </div>
                <div class="flex gap-2">
                    <span class="bg-primary text-white text-xs px-3 py-0.5 rounded-full">Active</span>
                    <span class="border border-primary text-content text-xs px-3 py-0.5 rounded-full opacity-50">Pro</span>
                </div>
                <div class="border border-primary/20 rounded-lg p-3">
                    <p class="text-xs opacity-50 mb-1">Monthly usage</p>
                    <p class="text-2xl font-bold">84<span class="text-sm opacity-50">%</span></p>
                    <div class="mt-2 h-1 bg-white/10 rounded-full overflow-hidden">
                        <div class="bg-primary h-full rounded-full" style="width: 84%"></div>
                    </div>
                </div>
                <button class="bg-primary hover:bg-primary-hover text-white font-medium text-sm py-2.5 px-4 rounded-lg w-full transition-colors cursor-pointer border-0">
                    Manage account
                </button>
            </div>

            <div class="bg-surface text-content rounded-2xl p-8 w-72 flex flex-col gap-5">
                <div class="flex items-center gap-2">
                    <div class="w-2.5 h-2.5 rounded-full bg-primary"></div>
                </div>
                <div>
                    <h2 class="text-xl font-semibold mb-1">Default theme</h2>
                    <p class="text-sm opacity-60">Your account is ready. Manage your settings below.</p>
                </div>
                <div class="flex gap-2">
                    <span class="bg-primary text-white text-xs px-3 py-0.5 rounded-full">Active</span>
                    <span class="border border-primary text-content text-xs px-3 py-0.5 rounded-full opacity-50">Pro</span>
                </div>
                <div class="border border-primary/20 rounded-lg p-3">
                    <p class="text-xs opacity-50 mb-1">Monthly usage</p>
                    <p class="text-2xl font-bold">84<span class="text-sm opacity-50">%</span></p>
                    <div class="mt-2 h-1 bg-white/10 rounded-full overflow-hidden">
                        <div class="bg-primary h-full rounded-full" style="width: 84%"></div>
                    </div>
                </div>
                <button class="bg-primary hover:bg-primary-hover text-white font-medium text-sm py-2.5 px-4 rounded-lg w-full transition-colors cursor-pointer border-0">
                    Manage account
                </button>
            </div>

        </div>
        <div class="flex gap-12 py-12" data-theme="a">

            <div class="bg-surface text-content rounded-2xl p-8 w-72 flex flex-col gap-5">
                <div class="flex items-center gap-2">
                    <div class="w-2.5 h-2.5 rounded-full bg-primary"></div>
                </div>
                <div>
                    <h2 class="text-xl font-semibold mb-1">Theme a</h2>
                    <p class="text-sm opacity-60">Your account is ready. Manage your settings below.</p>
                </div>
                <div class="flex gap-2">
                    <span class="bg-primary text-white text-xs px-3 py-0.5 rounded-full">Active</span>
                    <span class="border border-primary text-content text-xs px-3 py-0.5 rounded-full opacity-50">Pro</span>
                </div>
                <div class="border border-primary/20 rounded-lg p-3">
                    <p class="text-xs opacity-50 mb-1">Monthly usage</p>
                    <p class="text-2xl font-bold">84<span class="text-sm opacity-50">%</span></p>
                    <div class="mt-2 h-1 bg-white/10 rounded-full overflow-hidden">
                        <div class="bg-primary h-full rounded-full" style="width: 84%"></div>
                    </div>
                </div>
                <button class="bg-primary hover:bg-primary-hover text-white font-medium text-sm py-2.5 px-4 rounded-lg w-full transition-colors cursor-pointer border-0">
                    Manage account
                </button>
            </div>

            <div class="bg-surface text-content rounded-2xl p-8 w-72 flex flex-col gap-5">
                <div class="flex items-center gap-2">
                    <div class="w-2.5 h-2.5 rounded-full bg-primary"></div>
                </div>
                <div>
                    <h2 class="text-xl font-semibold mb-1">Theme a</h2>
                    <p class="text-sm opacity-60">Your account is ready. Manage your settings below.</p>
                </div>
                <div class="flex gap-2">
                    <span class="bg-primary text-white text-xs px-3 py-0.5 rounded-full">Active</span>
                    <span class="border border-primary text-content text-xs px-3 py-0.5 rounded-full opacity-50">Pro</span>
                </div>
                <div class="border border-primary/20 rounded-lg p-3">
                    <p class="text-xs opacity-50 mb-1">Monthly usage</p>
                    <p class="text-2xl font-bold">84<span class="text-sm opacity-50">%</span></p>
                    <div class="mt-2 h-1 bg-white/10 rounded-full overflow-hidden">
                        <div class="bg-primary h-full rounded-full" style="width: 84%"></div>
                    </div>
                </div>
                <button class="bg-primary hover:bg-primary-hover text-white font-medium text-sm py-2.5 px-4 rounded-lg w-full transition-colors cursor-pointer border-0">
                    Manage account
                </button>
            </div>

            <div class="bg-surface text-content rounded-2xl p-8 w-72 flex flex-col gap-5">
                <div class="flex items-center gap-2">
                    <div class="w-2.5 h-2.5 rounded-full bg-primary"></div>
                </div>
                <div>
                    <h2 class="text-xl font-semibold mb-1">Theme a</h2>
                    <p class="text-sm opacity-60">Your account is ready. Manage your settings below.</p>
                </div>
                <div class="flex gap-2">
                    <span class="bg-primary text-white text-xs px-3 py-0.5 rounded-full">Active</span>
                    <span class="border border-primary text-content text-xs px-3 py-0.5 rounded-full opacity-50">Pro</span>
                </div>
                <div class="border border-primary/20 rounded-lg p-3">
                    <p class="text-xs opacity-50 mb-1">Monthly usage</p>
                    <p class="text-2xl font-bold">84<span class="text-sm opacity-50">%</span></p>
                    <div class="mt-2 h-1 bg-white/10 rounded-full overflow-hidden">
                        <div class="bg-primary h-full rounded-full" style="width: 84%"></div>
                    </div>
                </div>
                <button class="bg-primary hover:bg-primary-hover text-white font-medium text-sm py-2.5 px-4 rounded-lg w-full transition-colors cursor-pointer border-0">
                    Manage account
                </button>
            </div>

        </div>
        <div class="flex gap-12 py-12" data-theme="b">

            <div class="bg-surface text-content rounded-2xl p-8 w-72 flex flex-col gap-5">
                <div class="flex items-center gap-2">
                    <div class="w-2.5 h-2.5 rounded-full bg-primary"></div>
                </div>
                <div>
                    <h2 class="text-xl font-semibold mb-1">Theme b</h2>
                    <p class="text-sm opacity-60">Your account is ready. Manage your settings below.</p>
                </div>
                <div class="flex gap-2">
                    <span class="bg-primary text-white text-xs px-3 py-0.5 rounded-full">Active</span>
                    <span class="border border-primary text-content text-xs px-3 py-0.5 rounded-full opacity-50">Pro</span>
                </div>
                <div class="border border-primary/20 rounded-lg p-3">
                    <p class="text-xs opacity-50 mb-1">Monthly usage</p>
                    <p class="text-2xl font-bold">84<span class="text-sm opacity-50">%</span></p>
                    <div class="mt-2 h-1 bg-white/10 rounded-full overflow-hidden">
                        <div class="bg-primary h-full rounded-full" style="width: 84%"></div>
                    </div>
                </div>
                <button class="bg-primary hover:bg-primary-hover text-white font-medium text-sm py-2.5 px-4 rounded-lg w-full transition-colors cursor-pointer border-0">
                    Manage account
                </button>
            </div>

            <div class="bg-surface text-content rounded-2xl p-8 w-72 flex flex-col gap-5">
                <div class="flex items-center gap-2">
                    <div class="w-2.5 h-2.5 rounded-full bg-primary"></div>
                </div>
                <div>
                    <h2 class="text-xl font-semibold mb-1">Theme b</h2>
                    <p class="text-sm opacity-60">Your account is ready. Manage your settings below.</p>
                </div>
                <div class="flex gap-2">
                    <span class="bg-primary text-white text-xs px-3 py-0.5 rounded-full">Active</span>
                    <span class="border border-primary text-content text-xs px-3 py-0.5 rounded-full opacity-50">Pro</span>
                </div>
                <div class="border border-primary/20 rounded-lg p-3">
                    <p class="text-xs opacity-50 mb-1">Monthly usage</p>
                    <p class="text-2xl font-bold">84<span class="text-sm opacity-50">%</span></p>
                    <div class="mt-2 h-1 bg-white/10 rounded-full overflow-hidden">
                        <div class="bg-primary h-full rounded-full" style="width: 84%"></div>
                    </div>
                </div>
                <button class="bg-primary hover:bg-primary-hover text-white font-medium text-sm py-2.5 px-4 rounded-lg w-full transition-colors cursor-pointer border-0">
                    Manage account
                </button>
            </div>

            <div class="bg-surface text-content rounded-2xl p-8 w-72 flex flex-col gap-5">
                <div class="flex items-center gap-2">
                    <div class="w-2.5 h-2.5 rounded-full bg-primary"></div>
                </div>
                <div>
                    <h2 class="text-xl font-semibold mb-1">Theme b</h2>
                    <p class="text-sm opacity-60">Your account is ready. Manage your settings below.</p>
                </div>
                <div class="flex gap-2">
                    <span class="bg-primary text-white text-xs px-3 py-0.5 rounded-full">Active</span>
                    <span class="border border-primary text-content text-xs px-3 py-0.5 rounded-full opacity-50">Pro</span>
                </div>
                <div class="border border-primary/20 rounded-lg p-3">
                    <p class="text-xs opacity-50 mb-1">Monthly usage</p>
                    <p class="text-2xl font-bold">84<span class="text-sm opacity-50">%</span></p>
                    <div class="mt-2 h-1 bg-white/10 rounded-full overflow-hidden">
                        <div class="bg-primary h-full rounded-full" style="width: 84%"></div>
                    </div>
                </div>
                <button class="bg-primary hover:bg-primary-hover text-white font-medium text-sm py-2.5 px-4 rounded-lg w-full transition-colors cursor-pointer border-0">
                    Manage account
                </button>
            </div>

        </div>
    </div>
</div>
 
{% set cards = [
    {
        theme: null,
        heading: "Default theme",
        summary: "Your account is ready. Manage your settings below.",
        usage: 84
    },
    {
        theme: "a",
        heading: "Theme a",
        summary: "Your account is ready. Manage your settings below.",
        usage: 84
    },
    {
        theme: "b",
        heading: "Theme b",
        summary: "Your account is ready. Manage your settings below.",
        usage: 84
    }
] %}

<div class="container component-spacer-margin">
  <div>
    <h2 class="text-5xl mb-4">Example of data theme being applied at component level</h2>
    <div class="flex gap-12 py-12">
        {% for card in cards %}
            <div data-theme="{{card.theme}}" class="bg-surface text-content rounded-2xl p-8 w-72 flex flex-col gap-5">
                <div class="flex items-center gap-2">
                    <div class="w-2.5 h-2.5 rounded-full bg-primary"></div>
                </div>
                <div>
                    <h2 class="text-xl font-semibold mb-1">{{ card.heading }}</h2>
                    <p class="text-sm opacity-60">{{ card.summary }}</p>
                </div>
                <div class="flex gap-2">
                    <span class="bg-primary text-white text-xs px-3 py-0.5 rounded-full">Active</span>
                    <span class="border border-primary text-content text-xs px-3 py-0.5 rounded-full opacity-50">Pro</span>
                </div>
                <div class="border border-primary/20 rounded-lg p-3">
                    <p class="text-xs opacity-50 mb-1">Monthly usage</p>
                    <p class="text-2xl font-bold">{{ card.usage }}<span class="text-sm opacity-50">%</span></p>
                    <div class="mt-2 h-1 bg-white/10 rounded-full overflow-hidden">
                        <div class="bg-primary h-full rounded-full" style="width: {{ card.usage }}%"></div>
                    </div>
                </div>
                <button class="bg-primary hover:bg-primary-hover text-white font-medium text-sm py-2.5 px-4 rounded-lg w-full transition-colors cursor-pointer border-0">
                    Manage account
                </button>
            </div>
        {% endfor %}
    </div>
  </div>
    <div>
    <h2 class="text-5xl mb-4">Example of data theme being applied at section level</h2>
    <div class="flex gap-12 py-12" data-theme="">
        {% for card in cards %}
            <div class="bg-surface text-content rounded-2xl p-8 w-72 flex flex-col gap-5">
                <div class="flex items-center gap-2">
                    <div class="w-2.5 h-2.5 rounded-full bg-primary"></div>
                </div>
                <div>
                    <h2 class="text-xl font-semibold mb-1">Default theme</h2>
                    <p class="text-sm opacity-60">{{ card.summary }}</p>
                </div>
                <div class="flex gap-2">
                    <span class="bg-primary text-white text-xs px-3 py-0.5 rounded-full">Active</span>
                    <span class="border border-primary text-content text-xs px-3 py-0.5 rounded-full opacity-50">Pro</span>
                </div>
                <div class="border border-primary/20 rounded-lg p-3">
                    <p class="text-xs opacity-50 mb-1">Monthly usage</p>
                    <p class="text-2xl font-bold">{{ card.usage }}<span class="text-sm opacity-50">%</span></p>
                    <div class="mt-2 h-1 bg-white/10 rounded-full overflow-hidden">
                        <div class="bg-primary h-full rounded-full" style="width: {{ card.usage }}%"></div>
                    </div>
                </div>
                <button class="bg-primary hover:bg-primary-hover text-white font-medium text-sm py-2.5 px-4 rounded-lg w-full transition-colors cursor-pointer border-0">
                    Manage account
                </button>
            </div>
        {% endfor %}
    </div>
    <div class="flex gap-12 py-12" data-theme="a">
        {% for card in cards %}
            <div class="bg-surface text-content rounded-2xl p-8 w-72 flex flex-col gap-5">
                <div class="flex items-center gap-2">
                    <div class="w-2.5 h-2.5 rounded-full bg-primary"></div>
                </div>
                <div>
                    <h2 class="text-xl font-semibold mb-1">Theme a</h2>
                    <p class="text-sm opacity-60">{{ card.summary }}</p>
                </div>
                <div class="flex gap-2">
                    <span class="bg-primary text-white text-xs px-3 py-0.5 rounded-full">Active</span>
                    <span class="border border-primary text-content text-xs px-3 py-0.5 rounded-full opacity-50">Pro</span>
                </div>
                <div class="border border-primary/20 rounded-lg p-3">
                    <p class="text-xs opacity-50 mb-1">Monthly usage</p>
                    <p class="text-2xl font-bold">{{ card.usage }}<span class="text-sm opacity-50">%</span></p>
                    <div class="mt-2 h-1 bg-white/10 rounded-full overflow-hidden">
                        <div class="bg-primary h-full rounded-full" style="width: {{ card.usage }}%"></div>
                    </div>
                </div>
                <button class="bg-primary hover:bg-primary-hover text-white font-medium text-sm py-2.5 px-4 rounded-lg w-full transition-colors cursor-pointer border-0">
                    Manage account
                </button>
            </div>
        {% endfor %}
    </div>
        <div class="flex gap-12 py-12" data-theme="b">
        {% for card in cards %}
            <div class="bg-surface text-content rounded-2xl p-8 w-72 flex flex-col gap-5">
                <div class="flex items-center gap-2">
                    <div class="w-2.5 h-2.5 rounded-full bg-primary"></div>
                </div>
                <div>
                    <h2 class="text-xl font-semibold mb-1">Theme b</h2>
                    <p class="text-sm opacity-60">{{ card.summary }}</p>
                </div>
                <div class="flex gap-2">
                    <span class="bg-primary text-white text-xs px-3 py-0.5 rounded-full">Active</span>
                    <span class="border border-primary text-content text-xs px-3 py-0.5 rounded-full opacity-50">Pro</span>
                </div>
                <div class="border border-primary/20 rounded-lg p-3">
                    <p class="text-xs opacity-50 mb-1">Monthly usage</p>
                    <p class="text-2xl font-bold">{{ card.usage }}<span class="text-sm opacity-50">%</span></p>
                    <div class="mt-2 h-1 bg-white/10 rounded-full overflow-hidden">
                        <div class="bg-primary h-full rounded-full" style="width: {{ card.usage }}%"></div>
                    </div>
                </div>
                <button class="bg-primary hover:bg-primary-hover text-white font-medium text-sm py-2.5 px-4 rounded-lg w-full transition-colors cursor-pointer border-0">
                    Manage account
                </button>
            </div>
        {% endfor %}
    </div>
  </div>
</div>
 
{
  "siteName": "UCEA",
  "navItems": [
    {
      "menu_item": "About Us"
    },
    {
      "menu_item": "Testimonials"
    },
    {
      "menu_item": "Our Team"
    },
    {
      "menu_item": "Contact Us"
    }
  ]
}

No notes defined.