<div class="container my-12">
<h2 class="text-center pb-12 semibold text-5xl font-heading text-alpha">Icons</h2>
<div class="space-y-12">
<div class="flex items-center justify-center w-full">
<div class="w-full">
<h3 class="text-center text-2xl text-alpha mb-4">Functional</h3>
<div class="sm:grid sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-8 gap-4">
<div class="shadow-md">
<div class="flex-1 flex bg-grey-50 h-24 justify-center items-center p-6">
<div class="h-12 w-auto">
<svg class="w-full h-full fill-current text-bravo">
<use href="/front-end/sprite.svg#icon-chevron"></use>
</svg>
</div>
</div>
<div class="block font-bold bg-white p-4">
icon-chevron
</div>
</div>
<div class="shadow-md">
<div class="flex-1 flex bg-grey-50 h-24 justify-center items-center p-6">
<div class="h-12 w-auto">
<svg class="w-full h-full fill-current text-bravo">
<use href="/front-end/sprite.svg#icon-arrow"></use>
</svg>
</div>
</div>
<div class="block font-bold bg-white p-4">
icon-arrow
</div>
</div>
<div class="shadow-md">
<div class="flex-1 flex bg-grey-50 h-24 justify-center items-center p-6">
<div class="h-12 w-auto">
<svg class="w-full h-full fill-current text-bravo">
<use href="/front-end/sprite.svg#icon-plus"></use>
</svg>
</div>
</div>
<div class="block font-bold bg-white p-4">
icon-plus
</div>
</div>
<div class="shadow-md">
<div class="flex-1 flex bg-grey-50 h-24 justify-center items-center p-6">
<div class="h-12 w-auto">
<svg class="w-full h-full fill-current text-bravo">
<use href="/front-end/sprite.svg#icon-burger"></use>
</svg>
</div>
</div>
<div class="block font-bold bg-white p-4">
icon-burger
</div>
</div>
<div class="shadow-md">
<div class="flex-1 flex bg-grey-50 h-24 justify-center items-center p-6">
<div class="h-12 w-auto">
<svg class="w-full h-full fill-current text-bravo">
<use href="/front-end/sprite.svg#icon-search"></use>
</svg>
</div>
</div>
<div class="block font-bold bg-white p-4">
icon-search
</div>
</div>
<div class="shadow-md">
<div class="flex-1 flex bg-grey-50 h-24 justify-center items-center p-6">
<div class="h-12 w-auto">
<svg class="w-full h-full fill-current text-bravo">
<use href="/front-end/sprite.svg#icon-close"></use>
</svg>
</div>
</div>
<div class="block font-bold bg-white p-4">
icon-close
</div>
</div>
<div class="shadow-md">
<div class="flex-1 flex bg-grey-50 h-24 justify-center items-center p-6">
<div class="h-12 w-auto">
<svg class="w-full h-full fill-current text-bravo">
<use href="/front-end/sprite.svg#icon-user"></use>
</svg>
</div>
</div>
<div class="block font-bold bg-white p-4">
icon-user
</div>
</div>
<div class="shadow-md">
<div class="flex-1 flex bg-grey-50 h-24 justify-center items-center p-6">
<div class="h-12 w-auto">
<svg class="w-full h-full fill-current text-bravo">
<use href="/front-end/sprite.svg#icon-external-link"></use>
</svg>
</div>
</div>
<div class="block font-bold bg-white p-4">
icon-external-link
</div>
</div>
<div class="shadow-md">
<div class="flex-1 flex bg-grey-50 h-24 justify-center items-center p-6">
<div class="h-12 w-auto">
<svg class="w-full h-full fill-current text-bravo">
<use href="/front-end/sprite.svg#icon-error"></use>
</svg>
</div>
</div>
<div class="block font-bold bg-white p-4">
icon-error
</div>
</div>
<div class="shadow-md">
<div class="flex-1 flex bg-grey-50 h-24 justify-center items-center p-6">
<div class="h-12 w-auto">
<svg class="w-full h-full fill-current text-bravo">
<use href="/front-end/sprite.svg#icon-pin"></use>
</svg>
</div>
</div>
<div class="block font-bold bg-white p-4">
icon-pin
</div>
</div>
<div class="shadow-md">
<div class="flex-1 flex bg-grey-50 h-24 justify-center items-center p-6">
<div class="h-12 w-auto">
<svg class="w-full h-full fill-current text-bravo">
<use href="/front-end/sprite.svg#icon-mail"></use>
</svg>
</div>
</div>
<div class="block font-bold bg-white p-4">
icon-mail
</div>
</div>
<div class="shadow-md">
<div class="flex-1 flex bg-grey-50 h-24 justify-center items-center p-6">
<div class="h-12 w-auto">
<svg class="w-full h-full fill-current text-bravo">
<use href="/front-end/sprite.svg#icon-phone"></use>
</svg>
</div>
</div>
<div class="block font-bold bg-white p-4">
icon-phone
</div>
</div>
<div class="shadow-md">
<div class="flex-1 flex bg-grey-50 h-24 justify-center items-center p-6">
<div class="h-12 w-auto">
<svg class="w-full h-full fill-current text-bravo">
<use href="/front-end/sprite.svg#icon-play"></use>
</svg>
</div>
</div>
<div class="block font-bold bg-white p-4">
icon-play
</div>
</div>
<div class="shadow-md">
<div class="flex-1 flex bg-grey-50 h-24 justify-center items-center p-6">
<div class="h-12 w-auto">
<svg class="w-full h-full fill-current text-bravo">
<use href="/front-end/sprite.svg#icon-quote"></use>
</svg>
</div>
</div>
<div class="block font-bold bg-white p-4">
icon-quote
</div>
</div>
<div class="shadow-md">
<div class="flex-1 flex bg-grey-50 h-24 justify-center items-center p-6">
<div class="h-12 w-auto">
<svg class="w-full h-full fill-current text-bravo">
<use href="/front-end/sprite.svg#icon-share"></use>
</svg>
</div>
</div>
<div class="block font-bold bg-white p-4">
icon-share
</div>
</div>
<div class="shadow-md">
<div class="flex-1 flex bg-grey-50 h-24 justify-center items-center p-6">
<div class="h-12 w-auto">
<svg class="w-full h-full fill-current text-bravo">
<use href="/front-end/sprite.svg#icon-facebook"></use>
</svg>
</div>
</div>
<div class="block font-bold bg-white p-4">
icon-facebook
</div>
</div>
<div class="shadow-md">
<div class="flex-1 flex bg-grey-50 h-24 justify-center items-center p-6">
<div class="h-12 w-auto">
<svg class="w-full h-full fill-current text-bravo">
<use href="/front-end/sprite.svg#icon-instagram"></use>
</svg>
</div>
</div>
<div class="block font-bold bg-white p-4">
icon-instagram
</div>
</div>
<div class="shadow-md">
<div class="flex-1 flex bg-grey-50 h-24 justify-center items-center p-6">
<div class="h-12 w-auto">
<svg class="w-full h-full fill-current text-bravo">
<use href="/front-end/sprite.svg#icon-twitter"></use>
</svg>
</div>
</div>
<div class="block font-bold bg-white p-4">
icon-twitter
</div>
</div>
<div class="shadow-md">
<div class="flex-1 flex bg-grey-50 h-24 justify-center items-center p-6">
<div class="h-12 w-auto">
<svg class="w-full h-full fill-current text-bravo">
<use href="/front-end/sprite.svg#icon-youtube"></use>
</svg>
</div>
</div>
<div class="block font-bold bg-white p-4">
icon-youtube
</div>
</div>
<div class="shadow-md">
<div class="flex-1 flex bg-grey-50 h-24 justify-center items-center p-6">
<div class="h-12 w-auto">
<svg class="w-full h-full fill-current text-bravo">
<use href="/front-end/sprite.svg#icon-download"></use>
</svg>
</div>
</div>
<div class="block font-bold bg-white p-4">
icon-download
</div>
</div>
</div>
</div>
</div>
<div class="flex items-center justify-center w-full">
<div class="w-full">
<h3 class="text-center text-2xl text-alpha mb-4">Project</h3>
<div class="sm:grid sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-8 gap-4">
<div class="shadow-md">
<div class="flex-1 flex bg-grey-50 h-24 justify-center items-center p-6">
<div class="h-12 w-auto">
<svg class="w-full h-full fill-current text-bravo">
<use href="/front-end/sprite.svg#icon-flower"></use>
</svg>
</div>
</div>
<div class="block font-bold bg-white p-4">
icon-flower
</div>
</div>
<div class="shadow-md">
<div class="flex-1 flex bg-grey-50 h-24 justify-center items-center p-6">
<div class="h-12 w-auto">
<svg class="w-full h-full fill-current text-bravo">
<use href="/front-end/sprite.svg#icon-zen"></use>
</svg>
</div>
</div>
<div class="block font-bold bg-white p-4">
icon-zen
</div>
</div>
<div class="shadow-md">
<div class="flex-1 flex bg-grey-50 h-24 justify-center items-center p-6">
<div class="h-12 w-auto">
<svg class="w-full h-full fill-current text-bravo">
<use href="/front-end/sprite.svg#icon-noodles"></use>
</svg>
</div>
</div>
<div class="block font-bold bg-white p-4">
icon-noodles
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container my-12">
<h2 class="text-center pb-12 semibold text-5xl font-heading text-alpha">Icons</h2>
<div class="space-y-12">
{% for name, data in icons %}
<div class="flex items-center justify-center w-full">
<div class="w-full">
<h3 class="text-center text-2xl text-alpha mb-4">{{ name }}</h3>
<div class="sm:grid sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-8 gap-4">
{% for item in data %}
<div class="shadow-md">
<div class="flex-1 flex bg-grey-50 h-24 justify-center items-center p-6">
<div class="h-12 w-auto">
{% render "@icon", { name: item, modifier: 'w-full h-full fill-current text-bravo' } %}
</div>
</div>
<div class="block font-bold bg-white p-4">
{{ item }}
</div>
</div>
{% endfor %}
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{
"siteName": "MentorKit Pattern Library",
"navItems": [
{
"menu_item": "About Us"
},
{
"menu_item": "Testimonials"
},
{
"menu_item": "Our Team"
},
{
"menu_item": "Contact Us"
}
],
"icons": {
"Functional": [
"icon-chevron",
"icon-arrow",
"icon-plus",
"icon-burger",
"icon-search",
"icon-close",
"icon-user",
"icon-external-link",
"icon-error",
"icon-pin",
"icon-mail",
"icon-phone",
"icon-play",
"icon-quote",
"icon-share",
"icon-facebook",
"icon-instagram",
"icon-twitter",
"icon-youtube",
"icon-download"
],
"Project": [
"icon-flower",
"icon-zen",
"icon-noodles"
]
}
}
No notes defined.