<!-- 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>
<!-- Usp Text Black -->
<div class='usp-text black'>
<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>
<!-- 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>
<!-- Usp Text Without Text Icon Red -->
<div class='usp-text red-icon'>
<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>
<!-- Usp Text Light -->
<div class='usp-text gray'>
<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>
<!-- Usp Text Small -->
<div class='usp-text gray small'>
<div class='usp-wrapper'>
<div class='usp-icon'><span class="icon fal fa-user-friends " aria-hidden="true"></span></div>
<div class='usp-heading'>
<p class="heading title">
Een persoonlijke aanpak
</p>
</div>
</div>
</div>
<!-- Usp Text Red Large -->
<div class='usp-text red-icon large'>
<div class='usp-wrapper'>
<div class='usp-icon'><span class="icon fal fa-user-friends " aria-hidden="true"></span></div>
<div class='usp-heading'>
<h2 class="heading title">
<strong>12 Zoekresultaten voor</strong> ‘Zoekopracht’
</h2>
</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>
/* Usp Text White */
{
"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"
}
/* Usp Text Black */
{
"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": "black"
}
/* Usp Text Without Text */
{
"heading": {
"tag": "h3",
"text": "Een persoonlijke aanpak",
"modifier": "title"
},
"icon": {
"style": "fal",
"icon": "fa-user-friends"
},
"paragraph": null,
"modifier": ""
}
/* Usp Text Without Text Icon Red */
{
"heading": {
"tag": "h3",
"text": "Een persoonlijke aanpak",
"modifier": "title"
},
"icon": {
"style": "fal",
"icon": "fa-user-friends"
},
"paragraph": null,
"modifier": "red-icon"
}
/* Usp Text Light */
{
"heading": {
"tag": "h3",
"text": "Een persoonlijke aanpak",
"modifier": "title"
},
"icon": {
"style": "fal",
"icon": "fa-user-friends"
},
"paragraph": null,
"modifier": "gray"
}
/* Usp Text Small */
{
"heading": {
"tag": "p",
"text": "Een persoonlijke aanpak",
"modifier": "title"
},
"icon": {
"style": "fal",
"icon": "fa-user-friends"
},
"paragraph": null,
"modifier": "gray small"
}
/* Usp Text Red Large */
{
"heading": {
"tag": "h2",
"text": "<strong>12 Zoekresultaten voor</strong> ‘Zoekopracht’",
"modifier": "title"
},
"icon": {
"style": "fal",
"icon": "fa-user-friends"
},
"paragraph": null,
"modifier": "red-icon large"
}
.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;
}
}
}
No notes defined.