Net7 UI Kit

Grid Item: Has Right Icon 

<div class="n7-grid-item grid p-4 sm:p-6 gap-4 sm:gap-6
    
    sm:grid-cols-[1fr_max-content] sm:[grid-template-columns: 1fr]

">

    <div class="sm:order-2 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 sm:order-1">
        <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>
 
{% extends "@grid-item" %}

{%block classes %}
    {{ super() }}
    sm:grid-cols-[1fr_max-content] sm:[grid-template-columns: 1fr]
{%endblock classes %}
 
{
  "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,
  "hasRightSideIcon": 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)