Responsive grid of feature items with a section heading. Each item shows a circular icon badge, title, and description. Uses design tokens for typography, color, and radius; no external dependencies.
| Prop | Type | Default / Req. | Description | ||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| title | String | required | The heading text displayed at the top of the panel section. | ||||||||||||||||
| items | Array | — | An array of panel items, each containing an icon, title, and description. | ||||||||||||||||
| |||||||||||||||||||
You may use these UI components in your own personal or commercial projects. You may not resell, redistribute, sublicense, or package them as standalone assets or template/library packs.
Full terms: End-User License Agreement
Below you can expand the main implementation file and any supporting components. Use the “Copy” button to grab a snippet straight to your clipboard.
These are the raw components that are required to run this example. Copy-paste them into your project. Most likely you will not change anything in these files, but you can if you want to. These are the components that are used in the main implementation file.
<template>
<section
class="font-iq-paragraph leading-iq-paragraph tracking-iq-paragraph text-iq-paragraph-color"
>
<h3
class="text-center text-4xl md:text-5xl font-bold mb-12 drop-shadow font-iq-header leading-iq-header tracking-iq-header text-iq-header-color"
>
{{ title }}
</h3>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-10">
<div v-for="(item, idx) in items" :key="idx" class="flex gap-4">
<div
class="flex-shrink-0 w-12 h-12 rounded-full flex items-center justify-center shadow-lg bg-iq-primary iq-gradient"
>
<span class="text-xl font-bold">{{ item.icon }}</span>
</div>
<div>
<h4 class="text-xl font-semibold mb-2">{{ item.title }}</h4>
<p class="text-justify">
{{ item.description }}
</p>
</div>
</div>
</div>
</section>
</template>
<script setup>
const props = defineProps({
title: {
type: String,
required: true,
},
items: {
type: Array,
validator: (value) => {
return value.every((item) => {
return (
typeof item.icon === "string" &&
typeof item.title === "string" &&
typeof item.description === "string"
);
});
},
},
});
</script>
This is the main Vue file that uses the component. Copy-paste this into your project. In this code feel free to change anything you like, such as the component name, props, or class. This is the place where you control the main component.
<script setup>
const items = ref([
{
icon: "🔄",
title: "Reusable Components",
description:
"Configure once, reuse endlessly—reservation forms, footers, galleries and more, without writing the same code twice.",
},
{
icon: "🛒",
title: "Shopping-Like Workflow",
description:
"Browse a catalog of polished sections, tweak them live, and copy-paste—no boilerplate, no surprises.",
},
{
icon: "🔓",
title: "Zero Lock-In",
description:
"Full ownership of your code, styles and architecture—no hidden generators, no vendor dependencies.",
},
{
icon: "⚡️",
title: "SEO & Performance First",
description:
"Nuxt SSR/SSG plus purged Tailwind under 10 kB means 90+ Lighthouse scores and instant crawler indexing.",
},
{
icon: "⏱️",
title: "Instant Site Creation",
description:
"From blank canvas to live hero + contact + gallery pages in seconds—no multi-hour setups.",
},
{
icon: "🎛️",
title: "Live Token Editing",
description:
"Tweak colors, spacing, typography and more with sliders—see your theme update in real time.",
},
{
icon: "📦",
title: "Plug-and-Play Integration",
description:
"Copy the exact component code and drop it into your Nuxt project—no hidden dependencies or global overrides.",
},
{
icon: "🔄",
title: "Future-Proof Flexibility",
description:
"Remix and evolve tokenized components as your brand grows—your UI adapts with you.",
},
]);
</script>
<template>
<div class="iq-card-glass max-w-7xl container mx-auto p-24">
<ListsPanel :items="items" title="Key Features" />
</div>
</template>
Decide whether you want a global design-system or a one-off inline snippet.
Complete @theme block – import once and share across every component.
Copy the code below into main.css file. It is most likely in assets/css/main.css directory.
:style binding – paste straight onto any of ours components.
Copy the code below and paste it into the :style binding of the component.
I wish I could automate every little thing—but for now you’ll need to handle these final steps by hand. Apologies for the extra work!
iq-card-* style Now that you’ve picked a card preset, copy its CSS into your @layer components block in main.css. This ensures every `iq-card` wrapper will look just right.
iq-cta iq-cta is the main call to action button class. It’s used in many places across the components. But for now it is only a single class that you can customize. You can copy the code below and paste it into your @layer components block in main.css. In future you will be able to fully customize it from our UI and choose from many presets.
I didn't have time to figure out consistency. Although there are no actions required, be mindful that the forms might not be entirely consistent with the design system. A quick once-over will keep everything looking sharp.