UHasselt Component Library

FavoriteCard: Favorite Card Icon 

<div class='favorite-card'>
    <a title="Woon -en werkverkeer" href="#" class='favorite-card-first'>
        <div class='favorite-card-icon'>
            <span class="icon fal fa-car   " aria-hidden="true"></span>
        </div>

        <p class='favorite-card-first-title'>Woon -en werkverkeer</p>
    </a>

    <div class='favorite-card-icon-action'>
        <button class="link " aria-label="" title="" id="">

            <span class="text"></span>

            <div class="span-icon-only">
                <span class="icon fal fa-trash   " aria-hidden="true"></span>
            </div>
        </button>

    </div>
</div>
 
<div class='favorite-card'>
    <{{element}}
        {{#if title}}title="{{title}}"{{/if}}
        {{#if href}}href="{{href}}"{{/if}}
        {{#if target}}target="{{target}}"{{/if}}
        {{#if id}}id="{{id}}"{{/if}}
        class='favorite-card-first'
    >
        {{#if icon-label}}
            <div class='favorite-card-icon'>
                {{render '@icon' icon-label}}
            </div>
        {{/if}}

        <p class='favorite-card-first-title'>{{text}}</p>
    </{{element}}>

    <div class='favorite-card-icon-action'>
        {{render '@link--icon-only' icon-action}}
    </div>
</div>
 
{
  "element": "a",
  "href": "#",
  "title": "Woon -en werkverkeer",
  "icon-label": {
    "style": "fal",
    "icon": "fa-car"
  },
  "icon-action": {
    "element": "button",
    "action": {
      "icon": {
        "style": "fal",
        "icon": "fa-trash"
      }
    }
  },
  "text": "Woon -en werkverkeer"
}
  • Content: 
    .favorite-card {
    @apply bg-white border border-solid border-gray shadow-lg;

    display: flex;
    align-items: center;
    justify-content: space-between;

    .favorite-card-first {
        display: flex;
        flex-grow: 1;
        align-items: center;
        padding: 16px;

        @screen sm {
            padding: 34px;
        }

        .favorite-card-first-title {
            @apply text-black;

            font-size: 24px;
            font-weight: 400;
            font-family: 'Hind';
        }
    }

    .favorite-card-icon,
    .favorite-card-icon-action {
        font-size: 22px;
    }

    .favorite-card-icon {
        @apply text-red;

        margin-right: 20px;
    }

    .favorite-card-icon-action {
        @apply text-black-500;

        padding: 16px 16px 16px 0;

        @screen sm {
            padding: 34px 34px 34px 0;
        }
    }
}
  • URL: /components/raw/favorite-card/favorite-card.css
  • Filesystem Path: src\components\03-molecules\favorite-card\favorite-card.css
  • Size: 927 Bytes

No notes defined.