brabli
83 lines
2.8 KiB
Twig
83 lines
2.8 KiB
Twig
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>PCM Badge Bundle — Dev Preview</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
accent: '#7c3aed',
|
|
primary: '#0f172a',
|
|
},
|
|
fontSize: {
|
|
'2xs': ['0.625rem', '0.875rem'],
|
|
},
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
</head>
|
|
<body class="bg-zinc-50 text-zinc-900 p-8 font-sans">
|
|
<h1 class="text-2xl font-bold mb-2">PCM Badge Bundle</h1>
|
|
<p class="text-zinc-600 mb-8">Local dev preview. Edit <code class="bg-zinc-200 px-1 rounded">dev/templates/showcase.html.twig</code> to add new variants.</p>
|
|
|
|
<section class="mb-10">
|
|
<h2 class="text-lg font-semibold mb-3">Solid</h2>
|
|
<div class="flex flex-wrap gap-2">
|
|
{% for colour in colours %}
|
|
<twig:Pcm:Badge colour="{{ colour }}">{{ colour }}</twig:Pcm:Badge>
|
|
{% endfor %}
|
|
</div>
|
|
</section>
|
|
|
|
<section class="mb-10">
|
|
<h2 class="text-lg font-semibold mb-3">Outline</h2>
|
|
<div class="flex flex-wrap gap-2">
|
|
{% for colour in colours %}
|
|
<twig:Pcm:Badge colour="{{ colour }}" outline>{{ colour }}</twig:Pcm:Badge>
|
|
{% endfor %}
|
|
</div>
|
|
</section>
|
|
|
|
<section class="mb-10">
|
|
<h2 class="text-lg font-semibold mb-3">Solid glossy</h2>
|
|
<div class="flex flex-wrap gap-2">
|
|
{% for colour in colours %}
|
|
<twig:Pcm:Badge glossy colour="{{ colour }}">{{ colour }}</twig:Pcm:Badge>
|
|
{% endfor %}
|
|
</div>
|
|
</section>
|
|
|
|
<section class="mb-10">
|
|
<h2 class="text-lg font-semibold mb-3">Solid icon</h2>
|
|
<div class="flex flex-wrap gap-2">
|
|
{% for colour in colours %}
|
|
<twig:Pcm:Badge icon="material-symbols:add" colour="{{ colour }}">{{ colour }}</twig:Pcm:Badge>
|
|
{% endfor %}
|
|
</div>
|
|
</section>
|
|
|
|
<section class="mb-10">
|
|
<h2 class="text-lg font-semibold mb-3">Outline icon</h2>
|
|
<div class="flex flex-wrap gap-2">
|
|
{% for colour in colours %}
|
|
<twig:Pcm:Badge icon="material-symbols:add" colour="{{ colour }}" outline>{{ colour }}</twig:Pcm:Badge>
|
|
{% endfor %}
|
|
</div>
|
|
</section>
|
|
|
|
<section class="mb-10">
|
|
<h2 class="text-lg font-semibold mb-3">Solid icon glossy</h2>
|
|
<div class="flex flex-wrap gap-2">
|
|
{% for colour in colours %}
|
|
<twig:Pcm:Badge glossy icon="material-symbols:edit-outline" colour="{{ colour }}">{{ colour }}</twig:Pcm:Badge>
|
|
{% endfor %}
|
|
</div>
|
|
</section>
|
|
|
|
</body>
|
|
</html>
|