UHasselt Component Library

Card List 

<!-- Card List -->
<div class="card-list ">
    <div class="card-list-item js--clickable">
        <div class="wrapper">
            <div class="date-block date-block-vertical">
                <div>10 nov</div>
            </div>
            <div class="information">

                <h3 class="heading title">
                    Lorem ipsum dolor sit amet
                </h3>
                <span><span class="icon fal fa-clock   fa-fw" aria-hidden="true"></span> 14:00 uur - 19.00 uur</span>
                <span><span class="icon fal fa-map-marker-alt   fa-fw" aria-hidden="true"></span> Campus Diepenbeek - gebouw D</span>
            </div>
        </div>
        <a href="#" class="link " aria-label="" title="This is what a link looks like">

            <span class="text">Bekijk de volledige agenda</span>

        </a>

    </div>
</div>


<!-- List Simple -->
<div class="card-list list-simple">
    <div class="card-list-item js--clickable">
        <div class="wrapper">

            <div class="information">
                <span class="date">9 september 2020</span>
                <h3 class="heading title">
                    Lorem ipsum dolor sit amet
                </h3>
                <span><span class="icon fal fa-clock   fa-fw" aria-hidden="true"></span> 14:00 uur - 19.00 uur</span>
                <span><span class="icon fal fa-map-marker-alt   fa-fw" aria-hidden="true"></span> Campus Diepenbeek - gebouw D</span>
            </div>
        </div>
        <a href="#" class="link " aria-label="" title="This is what a link looks like">

            <span class="text">Bekijk de volledige agenda</span>

        </a>

    </div>
</div>


<!-- Card List Vertical -->
<div class="card-list list-vertical">
    <div class="card-list-item js--clickable">
        <div class="wrapper-vertical">

            <div>
                <div class="date-block date-block-horizontal">
                    <div>10 nov</div>
                </div>
            </div>
            <div class="information">

                <h3 class="heading title">
                    Lorem ipsum dolor sit amet
                </h3>
                <span><span class="icon fal fa-clock   fa-fw" aria-hidden="true"></span> 14:00 uur - 19.00 uur</span>
                <span><span class="icon fal fa-map-marker-alt   fa-fw" aria-hidden="true"></span> Campus Diepenbeek - gebouw D</span>
            </div>
        </div>
        <a href="#" class="link " aria-label="" title="This is what a link looks like">

            <span class="text">Bekijk de volledige agenda</span>

        </a>

    </div>
</div>


<!-- Card List No Border -->
<div class="card-list list-vertical card-list-no-border">
    <div class="card-list-item js--clickable">
        <div class="wrapper-vertical">

            <div>
                <div class="date-block date-block-horizontal">
                    <div>10 nov</div>
                </div>
            </div>
            <div class="information">

                <h3 class="heading title">
                    Lorem ipsum dolor sit amet
                </h3>
                <span><span class="icon fal fa-clock   fa-fw" aria-hidden="true"></span> 14:00 uur - 19.00 uur</span>
                <span><span class="icon fal fa-map-marker-alt   fa-fw" aria-hidden="true"></span> Campus Diepenbeek - gebouw D</span>
            </div>
        </div>
        <a href="#" class="link " aria-label="" title="This is what a link looks like">

            <span class="text">Bekijk de volledige agenda</span>

        </a>

    </div>
</div>


<div class="card-list {{modifier}}">
    <div class="card-list-item {{#if link}}js--clickable{{/if}}">
        <div class="wrapper{{#if date-block-horizontal}}-vertical{{/if}}">
            {{#if date-block}}{{ render '@date-block' }}{{/if}}
            {{#if date-block-horizontal}}
                <div>
                    {{render '@date-block--horizontal'}}
                </div>
            {{/if}}
            <div class="information">
                {{#if date}}<span class="date">{{ date.text }}</span>{{/if}}
                {{#if heading}}{{ render '@heading' heading }}{{/if}}
                {{#if time}}<span>{{ render '@icon' time.icon }} {{ time.text }}</span>{{/if}}
                {{#if location}}<span>{{ render '@icon' location.icon }} {{ location.text }}</span>{{/if}}
            </div>
        </div>
        {{#if link}}{{ render '@link' link merge=true }}{{/if}}
    </div>
</div>
 
/* Card List */
{
  "modifier": "",
  "date-block": true,
  "heading": {
    "tag": "h3",
    "text": "Lorem ipsum dolor sit amet",
    "modifier": "title"
  },
  "image": {
    "src": "//placehold.co/480x264"
  },
  "time": {
    "icon": {
      "style": "fal",
      "modifier": "fa-fw",
      "icon": "fa-clock"
    },
    "text": "14:00 uur - 19.00 uur"
  },
  "date": false,
  "location": {
    "icon": {
      "style": "fal",
      "modifier": "fa-fw",
      "icon": "fa-map-marker-alt"
    },
    "text": "Campus Diepenbeek - gebouw D"
  },
  "link": {
    "text": "Bekijk de volledige agenda",
    "icon": false
  },
  "url": "https://www.google.nl"
}


/* List Simple */
{
  "modifier": "list-simple",
  "date-block": false,
  "heading": {
    "tag": "h3",
    "text": "Lorem ipsum dolor sit amet",
    "modifier": "title"
  },
  "image": {
    "src": "//placehold.co/480x264"
  },
  "time": {
    "icon": {
      "style": "fal",
      "modifier": "fa-fw",
      "icon": "fa-clock"
    },
    "text": "14:00 uur - 19.00 uur"
  },
  "date": {
    "icon": {
      "style": "fal",
      "modifier": "fa-fw",
      "icon": "fa-calendar-alt"
    },
    "text": "9 september 2020"
  },
  "location": {
    "icon": {
      "style": "fal",
      "modifier": "fa-fw",
      "icon": "fa-map-marker-alt"
    },
    "text": "Campus Diepenbeek - gebouw D"
  },
  "link": {
    "text": "Bekijk de volledige agenda",
    "icon": false
  },
  "url": "https://www.google.nl"
}


/* Card List Vertical */
{
  "modifier": "list-vertical",
  "date-block": false,
  "heading": {
    "tag": "h3",
    "text": "Lorem ipsum dolor sit amet",
    "modifier": "title"
  },
  "image": {
    "src": "//placehold.co/480x264"
  },
  "time": {
    "icon": {
      "style": "fal",
      "modifier": "fa-fw",
      "icon": "fa-clock"
    },
    "text": "14:00 uur - 19.00 uur"
  },
  "date": false,
  "location": {
    "icon": {
      "style": "fal",
      "modifier": "fa-fw",
      "icon": "fa-map-marker-alt"
    },
    "text": "Campus Diepenbeek - gebouw D"
  },
  "link": {
    "text": "Bekijk de volledige agenda",
    "icon": false
  },
  "url": "https://www.google.nl",
  "date-block-horizontal": true
}


/* Card List No Border */
{
  "modifier": "list-vertical card-list-no-border",
  "date-block": false,
  "heading": {
    "tag": "h3",
    "text": "Lorem ipsum dolor sit amet",
    "modifier": "title"
  },
  "image": {
    "src": "//placehold.co/480x264"
  },
  "time": {
    "icon": {
      "style": "fal",
      "modifier": "fa-fw",
      "icon": "fa-clock"
    },
    "text": "14:00 uur - 19.00 uur"
  },
  "date": false,
  "location": {
    "icon": {
      "style": "fal",
      "modifier": "fa-fw",
      "icon": "fa-map-marker-alt"
    },
    "text": "Campus Diepenbeek - gebouw D"
  },
  "link": {
    "text": "Bekijk de volledige agenda",
    "icon": false
  },
  "url": "https://www.google.nl",
  "date-block-horizontal": true
}
  • Content: 
    .card-list {
    .card-list-item {
        @apply mb-8 border-b border-solid border-gray cursor-pointer shadow-none;
        transition: box-shadow 0.5s;

        &:hover {
            @apply shadow-xl;
        }

        .date-block {
            @apply mr-6 md:mr-8 mb-4;
        }

        .wrapper {
            @apply flex px-4;
        }

        .information {
            @apply flex flex-col mb-8;

            .date {
                @apply text-red;
            }

            .title {
                @apply mb-5 font-semibold text-black;
            }
        }
    }

    .link {
        @apply hidden;
    }
}

.card-list.list-simple {
    .timeloc {
        @apply ml-0;
    }
}

.card-list.card-list-no-border {
    .card-list-item {
        @apply border-none;

        position: relative;

        &::after {
            content: '';
            display: block;
            position: absolute;
            top: -8px;
            right: -8px;
            bottom: -8px;
            left: -8px;

            transition: box-shadow 250ms ease-in-out;

            @screen lg {
                top: -16px;
                right: -16px;
                bottom: -16px;
                left: -16px;
            }
        }

        &:hover {
            @apply shadow-none;

            &::after {
                @apply shadow-xl;
            }
        }
    }
}
  • URL: /components/raw/card-list/card-list.css
  • Filesystem Path: src\components\03-molecules\card-list\card-list.css
  • Size: 1.4 KB

No notes defined.