UHasselt Component Library

USP Text: Usp Text Without Text 

<div class='usp-text '>
    <div class='usp-wrapper'>
        <div class='usp-icon'><span class="icon fal fa-user-friends   " aria-hidden="true"></span></div>
        <div class='usp-heading'>
            <h3 class="heading title">
                Een persoonlijke aanpak
            </h3>
        </div>
    </div>

</div>
 
<div class='usp-text {{modifier}}'>
    <div class='usp-wrapper'>
        <div class='usp-icon'>{{render '@icon' @root.icon}}</div>
        <div class='usp-heading'>{{render '@heading' @root.heading}}</div>
    </div>

    {{#if paragraph}}
        {{render '@paragraph' @root.paragraph}}
    {{/if}}
</div>
 
{
  "heading": {
    "tag": "h3",
    "text": "Een persoonlijke aanpak",
    "modifier": "title"
  },
  "icon": {
    "style": "fal",
    "icon": "fa-user-friends"
  },
  "paragraph": null,
  "modifier": ""
}
  • Content: 
    .usp-text {
    min-width: 127px;

    .usp-wrapper {
        @apply flex items-start;

        .usp-heading {
            @apply flex-grow;
        }

        .usp-icon {
            @apply flex-none w-8 h-6 md:w-8 md:h-8;

            align-items: flex-start;
            display: flex;

            @screen md {
                align-items: center;
            }
        }
    }

    .paragraph {
        @apply ml-8;
    }

    /* Color */
    &.white {
        @apply text-white;

        .icon,
        a {
            @apply text-white;
        }

        a {
            @apply underline;
        }
    }

    &.black {
        @apply text-black;

        .icon {
            @apply text-black;
        }
    }

    &.gray {
        @apply text-black-600;

        .icon {
            @apply text-black-600;
        }
    }

    &.red-icon {
        .icon {
            @apply text-red;
        }
    }

    /* size */
    &.small {
        .usp-icon {
            @apply h-5;

            align-items: center;
        }
    }
    &.large {
        .usp-icon {
            @apply w-10 h-9;

            font-size: 24px;
        }
    }
}
  • URL: /components/raw/usp-text/usp-text.css
  • Filesystem Path: src\components\03-molecules\usp-text\usp-text.css
  • Size: 1.2 KB

No notes defined.