Vebego Component Library

Alert 

<div class="alert  js--clickable">
    <div class="vebego-container ">
        <span class="text">
            <h6 class="atm-heading ">This is the alert title</h6>

        </span>
        <span> <span class="atm-icon  fal fa-chevron-right  fa-lg "></span></span>

        <a href="https://www.google.nl" class="js--main-link">

        </a>
    </div>
</div>
 
<div class="alert  {{#if isLink}}js--clickable{{/if}}">
<div class="vebego-container {{modifier}}">
    <span class="text">
        {{ render '@heading' @root.heading  }}
      
    </span>
    <span>  {{ render '@icon' @root.icon-chev }}</span>

    {{#if isLink}}
        <a href="{{url}}" class="js--main-link"  {{#if isExternal}}target="_blank" rel="noopener noreferrer"{{/if}}>
       
        </a>
    {{/if}}
    </div>
</div>
 
{
  "heading": {
    "text": "This is the alert title",
    "tag": "h6"
  },
  "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
}
  • Content: 
    .alert {
    @apply text-primary max-w-full border-b text-center;
    border-bottom-color: #d6d6d6;

    .vebego-container {
        @apply flex items-center justify-center px-8 py-2;
    }

    .text {
        @apply px-8;

        h6 {
            @apply font-semibold text-primary mb-0;
        }
    }

    .atm-icon {
        @apply text-primary text-sm;
        transition: all 0.3s ease;
    }

    .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: 618 Bytes

No notes defined.