Net7 UI Kit

Grid Item: Default 

<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 component configurations

Settings for development in nunjucks

For development - Variable and configuration settings:

  • classes: value - add eventual classes
  • heading: value - title
  • headingClasses: value - add/change heading classes if needed
  • HeadingAlignmen: value
  • titleClasses: value - add/change title classes if needed
  • contentGap: value - change content gap class if needed, default gap-4
  • contentClasses: value - add more classes to content wrapper if needed
  • headingGap: value - change heading elements gap class if needed, default gap-4
  • headingLinkIcon: icon id - use if heading link needs icon (arrow etc)
  • description: value - description text - text set in config
  • descriptionClasses: value - add/change description classes if needed
  • icon: iconId - set top icon id and manage top icon visualization
  • iconSize: value - set icon width and height classes if needed (defaults are w-24 h-24)
  • iconRadius: value - manage top icon border radius - default rounded
  • iconBg: value - manage top icon background color - default n7-background-02
  • hasLeftIcon: true (manage class for side icon - grid class)
  • hasRightSideIcon: true (manage class for right side icon - grid class)
  • shadow: true - add a shadow under the icon

Blocks:

  • classes
  • titleClasses
  • contentWrapperStart (add a wrapper if needed around content)
  • headingLinkIcon
  • content
  • contentWrapperEnd (close wrapper around content)
  • additionalContent (if other content is needed in card variant)