UHasselt Component Library

Card: Card Full 

<div class="card card-full">
    <div class="card-container js--clickable">

        <div class="card-wrapper">
            <picture class="picture ">
                <img class="picture-image " src="//placehold.co/480x264" alt="">
            </picture>

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

        <div class="heading-container">
            <h2 class="heading title">
                Lorem ipsum dolor sit amet
            </h2>

        </div>

        <div class="information">
            <div class="info-row">
                <div><span class="icon fal fa-clock   fa-fw" aria-hidden="true"></span></div>
                <span class="text">14:00 uur - 19.00 uur</span>
            </div>

            <div class="info-row">
                <div><span class="icon fal fa-map-marker-alt   fa-fw" aria-hidden="true"></span></div>
                <span class="text">Campus Diepenbeek - gebouw D</span>
            </div>

            <div class="info-row">
                <div><span class="icon fal fa-phone-alt   fa-fw" aria-hidden="true"></span></div>
                <span class="text"><a href="tel:003211268173" class="link " aria-label="" title="+32 112 68 173">

                        <span class="text">+32 112 68 173</span>

                    </a>
                </span>
            </div>

        </div>

        <div class="btn-wrapper"> <a href="#" class="button button-black ">
                <span>
                    <span class="icon fal fa-envelope   " aria-hidden="true"></span>
                    <span class="text">
                        This is a CTA Button
                    </span>
                </span>
            </a>
        </div>
    </div>
</div>
 
<div class="card card-{{modifier}}">
    <div class="card-container {{#if cta}}js--clickable{{/if}}">
        {{#if title-top}}
            <div class="card-container-title-top">{{render '@heading--h2'}}</div>
        {{/if}}

        {{#if image}}
        <div class="card-wrapper">
            {{render '@image' image}}
            {{#if date-block}}
                {{render '@date-block'}}
            {{/if}}
            {{#if tag}}
                {{render '@tag'}}
            {{/if}}
        </div>
        {{/if}}

        {{#if video}}
        <div class="card-wrapper">
            {{render '@video'}}
            {{#if date-block}}{{render '@date-block'}}{{/if}}
        </div>
        {{/if}}

        {{#if no-media}}
        <div class="card-wrapper">
            {{#if date-block}}{{render '@date-block'}}{{/if}}
            {{#if date-block-horizontal}}
                {{render '@date-block--horizontal'}}
            {{/if}}
        </div>
        {{/if}}

        {{#if heading}}
            {{#unless title-top}}
                <div class="heading-container">
                    {{render '@heading' heading}}

                    {{#if heading-icon}}
                        {{render '@icon' heading-icon}}
                    {{/if}}
                </div>
            {{/unless}}
        {{/if}}

    <div class="information">
        {{#if time}}
        <div class="info-row">
            <div>{{render '@icon' time.icon}}</div>
            <span class="text">{{time.text}}</span>
        </div>
        {{/if}}

        {{#if date}}
        <div class="info-row">
            <div>{{render '@icon' date.icon}}</div>
            <span class="text">{{date.text}}</span>
        </div>
        {{/if}}

        {{#if location}}
        <div class="info-row">
            <div>{{render '@icon' location.icon}}</div>
            <span class="text">{{location.text}}</span>
        </div>
        {{/if}}

        {{#if phone}}
        <div class="info-row">
            <div>{{render '@icon' phone.icon}}</div>
            <span class="text">{{render '@link' phone.link}}</span>
        </div>
        {{/if}}

        {{#if text}}
        {{render '@paragraph'}}
        {{/if}}

        {{#if content}}
            {{{content}}}
        {{/if}}

        {{#if quote}}
        <div class="info-row">
            <div>{{render '@icon' time.icon}}</div>
            <span class="text">{{time.text}}</span>
        </div>
        {{/if}}
    </div>

    {{#if cta}}<div class="btn-wrapper">{{render '@button' cta merge=true}}</div>{{/if}}
</div>
</div>
 
{
  "modifier": "full",
  "title-top": false,
  "date-block": true,
  "date-block-horizontal": false,
  "heading": {
    "tag": "h2",
    "text": "Lorem ipsum dolor sit amet",
    "modifier": "title"
  },
  "image": {
    "src": "//placehold.co/480x264"
  },
  "time": {
    "icon": {
      "style": "fal",
      "icon": "fa-clock",
      "modifier": "fa-fw"
    },
    "text": "14:00 uur - 19.00 uur"
  },
  "date": false,
  "location": {
    "icon": {
      "style": "fal",
      "icon": "fa-map-marker-alt",
      "modifier": "fa-fw"
    },
    "text": "Campus Diepenbeek - gebouw D"
  },
  "phone": {
    "icon": {
      "style": "fal",
      "modifier": "fa-fw",
      "icon": "fa-phone-alt"
    },
    "link": {
      "href": "tel:003211268173",
      "title": "+32 112 68 173",
      "text": "+32 112 68 173",
      "description": "Telefoon:"
    }
  },
  "cta": {
    "text": "This is a CTA Button",
    "element": "a",
    "type": "",
    "title": "",
    "target": "",
    "href": "#",
    "id": "",
    "icon": false
  },
  "quote": false,
  "no-media": false
}
  • Content: 
    .card {
    @apply flex flex-col;

    .info-row {
        @apply text-black-600;
    }

    .text {
        font-family: 'Hind';
    }

    .card-container {
        @apply bg-white border border-solid border-gray shadow-xl;

        &.js--clickable {
            @apply cursor-pointer;
        }

        .card-container-title-top {
            padding: 20px 20px 0 20px;
        }
    }

    .extra-link {
        @apply pt-8;

        .text {
            @apply underline text-red;
        }
    }

    .picture {
        @apply w-auto h-full;

        img {
            @apply w-full h-full;
            object-fit: cover;
        }
    }

    .card-wrapper {
        @apply relative order-1  mb-12;

        .date-block {
            @apply p-4 absolute -bottom-8 right-8 z-10;
        }
    }

    .heading-container {
        display: flex;
        align-items: center;
    }

    .heading-icon {
        margin-left: 16px;

        &.heading-icon-green {
            @apply text-green;
        }
    }

    .title {
        @apply relative mx-8 mb-4 order-2;
    }

    .information {
        @apply flex flex-col mx-8 mb-8 order-3;

        .info-row {
            @apply flex items-center;

            div {
                @apply mr-2 w-5 block;
            }

            .text {
                @apply block;
            }
        }

        .paragraph {
            @apply mt-4;
        }

        .paragraph:first-letter {
            text-transform: capitalize;
        }
    }

    .btn-wrapper {
        @apply relative order-4 mx-8 mb-8;
    }

    .extra-link {
        @apply relative order-5  mx-8 mb-8  text-right;
    }

    &.card-full {
        .card-wrapper {
            @apply order-1;
        }

        .information {
            @apply order-2;
        }

        .btn-wrapper {
            @apply order-4;
        }
    }

    &.card-title-top {
        .card-wrapper {
            @apply order-2;
        }

        .title {
            @apply order-1 mt-4;
        }
    }

    &.card-no-image {
        .card-container {
            .heading {
                @apply mt-8 md:mt-0;
            }
        }

        .card-wrapper {
            @apply mb-4;

            .date-block {
                @apply mt-8 ml-8  relative bottom-auto right-auto;
            }
        }
    }

    &.card-list {
        .card-container {
            .heading {
                @apply mt-8 md:mt-0;
            }
        }

        .card-wrapper {
            @apply mb-4;

            .date-block {
                @apply mt-8 ml-8  relative bottom-auto right-auto;
            }
        }
    }

    &.card-tag {
        .card-wrapper {
            @apply mb-8;
        }

        .tag {
            @apply absolute bottom-8 left-8 text-white bg-black bg-opacity-20;
        }

        .btn-wrapper {
            @apply hidden;
        }
    }

    &.card-cta {
        .card-wrapper {
            @apply order-2 mb-4;
        }

        .title {
            @apply order-1 text-red mt-4;
        }
    }

    &.card-detail,
    &.card-empty {
        .card-container {
            padding: 40px;
        }
        .card-wrapper {
            display: none;
        }

        p {
            margin: 0;
            font-size: 20px;
            line-height: 150%;
        }

        .title {
            @apply text-red;

            font-size: 32px;
            margin: 0 0 20px 0;
        }

        .paragraph {
            margin: 0;
        }

        .information {
            margin: 0;
        }

        .quote-card__container {
            display: flex;
            justify-content: space-between;
        }

        .quote-card {
            min-width: 300px;
            margin-right: -40px;
            margin-left: 10vw;
        }
    }

    &.card-small {
        .card-container {
            @apply shadow-xxs;

            padding: 16px;
        }
        .card-wrapper {
            display: none;
        }

        p {
            margin: 0;
            font-size: 20px;
            line-height: 150%;
        }

        .title {
            @apply text-red;

            order: initial;
            font-size: 16px;
            margin: 0;
        }

        .paragraph {
            margin: 0;
        }

        .information {
            margin: 0;
        }
    }

    &.card-quote {
        @apply flex flex-col;

        .card-wrapper {
            @apply mb-4;
        }

        .name {
            @apply text-red;
        }

        .function {
            @apply text-sm font-bold;
        }

        .place {
            @apply my-2;
        }

        .quote-text {
            @apply relative italic py-6;

            .icon {
                @apply absolute bottom-0 right-0 opacity-10;
            }
        }
    }

    &.card-news {
        .paragraph {
            @apply mt-0;
        }
    }
}
  • URL: /components/raw/card/card.css
  • Filesystem Path: src\components\03-molecules\card\card.css
  • Size: 5.1 KB

No notes defined.