UHasselt Component Library

Alert: Alert Red 

<div class="alert  js--clickable">
    <div class="uhasselt-container red">
        <span class="icon fal fa-exclamation-triangle  fa-lg " aria-hidden="true"></span>
        <span class="text">
            <h6 class="heading ">
                This is the alert title
            </h6>
            <div class='paragraph '>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin mauris vel nisi condimentum accumsan. Phasellus eget est condimentum erat fringilla congue.</p>
            </div>

        </span>

        <a href="https://www.google.nl" class="js--main-link">
            <span class="icon fal fa-chevron-right  fa-lg " aria-hidden="true"></span>
        </a>
    </div>
</div>
 
<div class="alert  {{#if isLink}}js--clickable{{/if}}">
<div class="uhasselt-container {{modifier}}">
    {{ render '@icon' @root.icon-alert  }}
    <span class="text">
        {{ render '@heading' @root.heading  }}
        {{ render '@paragraph' @root.paragraph }}       
    </span>

    {{#if isLink}}
        <a href="{{url}}" class="js--main-link"  {{#if isExternal}}target="_blank" rel="noopener noreferrer"{{/if}}>
        {{ render '@icon' @root.icon-chev }}
        </a>
    {{/if}}
    </div>
</div>
 
{
  "heading": {
    "text": "This is the alert title",
    "tag": "h6"
  },
  "paragraph": {
    "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin mauris vel nisi condimentum accumsan. Phasellus eget est condimentum erat fringilla congue."
  },
  "icon-chev": {
    "style": "fal",
    "icon": "fa-chevron-right",
    "size": "fa-lg"
  },
  "icon-alert": {
    "style": "fal",
    "icon": "fa-exclamation-triangle",
    "size": "fa-lg"
  },
  "isLink": true,
  "url": "https://www.google.nl",
  "isExternalLink": false,
  "modifier": "red"
}
  • Content: 
    .alert {
    @apply text-white max-w-full;

    .uhasselt-container {
        @apply flex items-center px-8 py-4;
    }

    .text {
        @apply px-8 w-full;

        h6 {
            @apply font-semibold;
        }
    }

    .icon {
        @apply text-white;
        transition: all 0.3s ease;
    }

    .red {
        @apply bg-red-600;

        &:hover {
            @apply bg-red-700;
        }
    }

    .black {
        @apply bg-black;

        &:hover {
            @apply bg-black-800;
        }
    }

    .white {
        @apply bg-white text-red border border-solid border-gray;

        .icon {
            @apply text-red;
        }

        &:hover {
            @apply bg-gray-400;
        }
    }

    .js--clickable {
        cursor: pointer;
    }

    &:hover {
        @apply no-underline;

        .fa-chevron-right {
            transform: translateX(5px);
        }
    }
}
  • URL: /components/raw/alert/alert.css
  • Filesystem Path: src\components\03-molecules\alert\alert.css
  • Size: 965 Bytes

No notes defined.