<div class="n7-grid-item grid p-4 sm:p-6 gap-4 sm:gap-6
">
<div class=" w-14 h-14 sm:w-24 sm:h-24 rounded n7-background-02 shadow-lg p-3 sm:p-6">
<svg class="n7-icon inline-block align-middle fill-current sm:w-12 sm:h-12 w-8 h-8" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--presentation-chart-bar" />
</svg>
</div>
<div class="content-start grid gap-4">
<h3 class="font-bold text-xl sm:text-2xl gap-4">
<a class="hover:underline" href="">
Nunc aliquam phasellus molestie blandit. Nisi amet id maecenas diam
</a>
</h3>
<p class="font-normal text-base sm:text-lg">
Neque blandit pellentesque nunc sed amet. Nisl semper sed aliquam amet proin purus augue et.
</p>
</div>
</div>
<div class="n7-grid-item grid p-4 sm:p-6 gap-4 sm:gap-6{% block classes %}{% if classes %} {{ classes }}{% endif %}{% endblock classes %}
">
{% if icon %}
<div class="{% if hasLeftIcon %}sm:order-1{% elseif hasRightSideIcon %}sm:order-2{% endif %}{% if iconSize %} {{ iconSize }}{% endif %}{% if iconRadius %} {{ iconRadius }}{% else %} rounded{% endif %}{% if iconBg %} {{ iconBg }}{% else %} n7-background-02{% endif %}{%if shadow %} shadow-lg{% endif %} p-3 sm:p-6">
{% render '@icon', { id: icon, size: 'sm:w-12 sm:h-12 w-8 h-8' }, true %}
</div>
{% endif %}
<div class="content-start grid{% if contentGap %} {{ contentGap }}{% else %} gap-4{% endif %}{% if hasLeftIcon %} sm:order-2{% elseif hasRightSideIcon %} sm:order-1{% endif %}">
<h3 class="font-bold text-xl sm:text-2xl{% if HeadingAlignment %} {{ HeadingAlignment }}{% endif %}{% if headingGap %} {{ headingGap }}{% else %} gap-4{% endif %}{% if headingClasses %} {{ headingClasses }}{% endif %}{% block titleClasses %}{% if titleClasses %} {{ titleClasses }}{% endif %}{% endblock titleClasses %}">
<a class="hover:underline{% if headingLinkIcon %} flex items-end{% endif %}" href="">
{{ heading | safe }}
{% block headingLinkIcon %}
{% if headingLinkIcon %}
{% render '@icon', { id: headingLinkIcon, classes: 'ml-auto', size: 'w-4 h-4 md:w-5 md:h-5' }, true %}
{% endif %}
{% endblock %}
</a>
</h3>
{% block content %}
{% if description %}
<p class="font-normal text-base sm:text-lg{%if descriptionClasses %} {{ descriptionClasses }}{% endif %}{% if headingLinkIcon %} pr-8 sm:pr-12{% endif %}">
{{ description }}
</p>
{% endif %}
{% endblock %}
</div>
</div>
{
"heading": "Nunc aliquam phasellus molestie blandit. Nisi amet id maecenas diam",
"description": "Neque blandit pellentesque nunc sed amet. Nisl semper sed aliquam amet proin purus augue et.",
"icon": "outline--presentation-chart-bar",
"iconSize": "w-14 h-14 sm:w-24 sm:h-24",
"shadow": true
}
/**
* GRID ITEM
*
*/
@layer components {
}
For development - Variable and configuration settings:
Blocks: