UHasselt Component Library

USP Text: Usp Text White 

<div class='usp-text white'>
    <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 class='paragraph '>
        <p>Aan de UHasselt sturen we je de wereld in via uitwisselingen met buitenlandse universiteiten en organisaties. Ook krijg je de kans om stage te doen of mee te werken aan TEDx-UHasselt.</p>
    </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": {
    "text": "Aan de UHasselt sturen we je de wereld in via uitwisselingen met buitenlandse universiteiten en organisaties. Ook krijg je de kans om stage te doen of mee te werken aan TEDx-UHasselt."
  },
  "modifier": "white"
}
  • 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.