Vebego Component Library

Service List 

<ul class="mol-service-list">
    <li>
        <div class="icon-container">
            <img src='../../assets/img/vebego_graphic.svg' alt='' />
            <i class="atm-icon  fa fa-regular fa-road   "></i>

        </div>
        <div class="atm-heading h5">Biodiversity</div>
    </li>
    <li>
        <i class="atm-icon  fa fa-regular fa-road   "></i>

        <div class="text-content">
            <div class="atm-heading h6">Municipalities</div>

            <i class="atm-icon  fa fa-regular fa-road   "></i>

        </div>
        <a href="#"></a>
    </li>
    <li>
        <i class="atm-icon  fa fa-regular fa-road   "></i>

        <div class="text-content">
            <div class="atm-heading h6">Schools</div>

            <i class="atm-icon  fa fa-regular fa-road   "></i>

        </div>
        <a href="#"></a>
    </li>
    <li>
        <i class="atm-icon  fa fa-regular fa-road   "></i>

        <div class="text-content">
            <div class="atm-heading h6">Theme parks</div>

            <i class="atm-icon  fa fa-regular fa-road   "></i>

        </div>
        <a href="#"></a>
    </li>
</ul>
 
<ul class="mol-service-list">
    <li>
        <div class="icon-container">
            <img src='{{path logoSrc}}' alt='{{logoAlt}}' />
            {{render '@icon' @root.icon }}
        </div>
        {{ render '@heading' heading merge=true}}</li>
    {{#each items}}
        <li>
            {{render '@icon' @root.icon }}
            <div class="text-content">
                {{render '@heading' heading merge=true }}
                {{text }}
                {{render '@icon' @root.icon }}
            </div>
            <a href="#"></a>
        </li>
    {{/each}}
</ul>
 
{
  "logoSrc": "/assets/img/vebego_graphic.svg",
  "logoAlt": "",
  "heading": {
    "tag": "div",
    "modifier": "h5",
    "text": "Biodiversity"
  },
  "items": [
    {
      "heading": {
        "tag": "div",
        "modifier": "h6",
        "text": "Municipalities"
      }
    },
    {
      "heading": {
        "tag": "div",
        "modifier": "h6",
        "text": "Schools"
      }
    },
    {
      "heading": {
        "tag": "div",
        "modifier": "h6",
        "text": "Theme parks",
        "icon": {
          "style": "fa",
          "icon": "fa-regular fa-chevron-right"
        }
      }
    }
  ],
  "icon": {
    "style": "fa",
    "icon": "fa-regular fa-road"
  }
}
  • Content: 
    .mol-service-list {
    @apply rounded-lg border-solid border overflow-hidden w-full;

    li {
        @apply grid;
        grid-template-columns: max-content auto;
        @apply first:p-0 p-8 border-b border-shade first:flex first:items-center relative;
        @apply transition-all duration-200;

        a {
            @apply absolute top-0 left-0 w-full h-full;
        }

        .icon-container {
            @apply relative;

            .atm-icon {
                @apply absolute top-1/2 left-8 transform -translate-x-1/2 -translate-y-1/2 text-h2;
                color: white !important;
            }
        }

        &:hover {
            .atm-icon {
                @apply text-secondary-col-1;
            }
            .text-content {
                .atm-heading {
                    @apply text-secondary-col-1;
                }
                .atm-icon {
                    @apply -right-1;
                }
            }
        }

        .text-content {
            @apply flex justify-between items-center relative;
            grid-area: 1/2;

            .atm-icon {
                @apply absolute text-h6 right-0;
            }
        }

        .atm-icon {
            @apply text-h4 transition-all duration-200;
        }

        .atm-heading {
            @apply mb-0 ml-3 text-black;
        }
    }

    li:last-child {
        @apply border-b-0;
    }
}
  • URL: /components/raw/service-list/service-list.css
  • Filesystem Path: src\components\03-molecules\service-list\service-list.css
  • Size: 1.5 KB

No notes defined.