Net7 UI Kit

Utilities 

<div class="p-6">
    <div class="pb-6 grid gap-2">
        <h1 class="text-3xl font-medium">Custom utilities</h1>
    </div>
    <div class="grid gap-6">

        <div class="grid gap-2">
            <h2 class="text-lg"><strong>Custom class name</strong></h2>
            <p>class: <strong>custom-class</strong></p>
            <p>usecase: utility class usecase description</p>
        </div>

    </div>
</div>
 
<div class="p-6">
    <div class="pb-6 grid gap-2">
        <h1 class="text-3xl font-medium">Custom utilities</h1>
    </div>
    <div class="grid gap-6">
    {% for util in utils %}
        <div class="grid gap-2">
            <h2 class="text-lg"><strong>{{ util.name }}</strong></h2>
            <p>class: <strong>{{ util.class }}</strong></p>
            <p>usecase: {{ util.usecase }}</p>
        </div>
    {% endfor %}
    </div>
</div>
 
{
  "utils": [
    {
      "name": "Custom class name",
      "class": "custom-class",
      "usecase": "utility class usecase description"
    }
  ]
}
  • Content: 
    /**
 * CUSTOM UTILITIES
 *
*/
@layer utilities {
     /* Override generic styles for text field */
     .n7-page-body h2 {
        @apply text-3xl md:text-4xl mb-8;
    }

    .n7-page-body * + h2 {
        @apply mt-16;
    }

    .n7-page-body h3 {
        @apply text-2xl md:text-3xl mb-6;
    }

    .n7-page-body * + h3 {
        @apply mt-12;
    }

    .n7-page-body h4 {
        @apply text-xl md:text-2xl mb-4 font-medium;
    }

    .n7-page-body * + h4 {
        @apply mt-8;
    }

    .n7-page-body h5 {
        @apply text-lg md:text-xl mb-3 font-medium;
    }

    .n7-page-body * + h5 {
        @apply mt-7;
    }

    .n7-page-body h6 {
        @apply text-base md:text-lg mb-2.5 font-medium;
    }

    .n7-page-body * + h6 {
        @apply mt-6;
    }

    .n7-page-body ol,
    .n7-page-body ul,
    .n7-page-body p {
        @apply text-sm md:text-base lg:text-lg leading-relaxed md:leading-relaxed lg:leading-relaxed;
    }

    .n7-page-body p + p,
    .n7-page-body * + ol,
    .n7-page-body * + ul
        {
        @apply mt-7 md:mt-8 lg:mt-9;
    }

    .n7-page-body ol {
        @apply list-decimal;
    }

    .n7-page-body ul {
        @apply list-disc;
    }

    .n7-page-body ol,
    .n7-page-body ul
    {
        @apply ml-[1em];
    }

    .n7-page-body ol li + li,
    .n7-page-body ul li + li {
        @apply mt-3;
    }

    .n7-page-body a {
        @apply n7-link-primary underline hover:n7-link-primary-hover;
    }
}
  • URL: /components/raw/utilities/utilities.css
  • Filesystem Path: components/01-design-system/utilities/utilities.css
  • Size: 1.5 KB

Custom Tailwind utilities