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>


<!-- Card News Detail -->
<div class="card card-empty">
    <div class="card-container ">

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

        </div>

        <div class="information">

            fill this with news-article content

        </div>

    </div>
</div>


<!-- Card Detail -->
<div class="card card-detail">
    <div class="card-container ">

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

        </div>

        <div class="information">

            This could be literally anything. <h1>This is a h1 for example</h1>
            <div>and this is a div</div>

        </div>

    </div>
</div>


<!-- Card Title Top -->
<div class="card card-title-top">
    <div class="card-container js--clickable">
        <div class="card-container-title-top">
            <h2 class="heading ">
                The quick brown fox jumps over the lazy dog
            </h2>
        </div>

        <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="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-calendar-alt   fa-fw" aria-hidden="true"></span></div>
                <span class="text">9 september 2020</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>

        <div class="btn-wrapper"> <a href="#" class="button button-red ">
                <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>


<!-- Card No Image -->
<div class="card card-no-image">
    <div class="card-container js--clickable">

        <div class="card-wrapper">
            <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>


<!-- Card List -->
<div class="card card-list">
    <div class="card-container ">

        <div class="card-wrapper">

            <div class="date-block date-block-horizontal">
                <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>

    </div>
</div>


<!-- Card Small -->
<div class="card card-small">
    <div class="card-container ">

        <div class="card-wrapper">

        </div>

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

            <span class="icon fas fa-seedling   heading-icon heading-icon-green" aria-hidden="true"></span>
        </div>

        <div class="information">

            <div class='paragraph '>
                <p>Lorem ipsum dolor sit amet, <a href="/">Duis malesuada justo</a> ut tincidunt tincidunt. Vestibulum in felis quam. In <strong>varius</strong> ligula vel ultricies consequat sed orci a, sagittis finibus sem. Ut bibendum purus id sodales scelerisque.</p>
            </div>

        </div>

    </div>
</div>


<!-- Card Tag -->
<div class="card card-tag">
    <div class="card-container js--clickable">

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

            <span class="tag  ">
                This is a tag

            </span>

        </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-calendar-alt   fa-fw" aria-hidden="true"></span></div>
                <span class="text">9 september 2020</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>


<!-- Card Cta -->
<div class="card card-cta">
    <div class="card-container js--clickable">

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

        </div>

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

        </div>

        <div class="information">

            <div class='paragraph '>
                <p>Lorem ipsum dolor sit amet, <a href="/">Duis malesuada justo</a> ut tincidunt tincidunt. Vestibulum in felis quam. In <strong>varius</strong> ligula vel ultricies consequat sed orci a, sagittis finibus sem. Ut bibendum purus id sodales scelerisque.</p>
            </div>

        </div>

        <div class="btn-wrapper"> <a href="#" class="button button-red ">
                <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>


<!-- Card Quote -->
<div class="card card-quote">
    <div class="card-container ">

        <div class="card-wrapper">
            <div class="video">
                <iframe src="https://www.youtube.com/embed/8Z-96vawOGI" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </div>

        </div>

        <div class="information">

            <div class="info-row">
                <div><span class="icon far fa-external-link   " aria-hidden="true"></span></div>
                <span class="text"></span>
            </div>
        </div>

    </div>
</div>


<!-- Card News -->
<div class="card card-news">
    <div class="card-container ">

        <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='paragraph '>
                <p>Lorem ipsum dolor sit amet, <a href="/">Duis malesuada justo</a> ut tincidunt tincidunt. Vestibulum in felis quam. In <strong>varius</strong> ligula vel ultricies consequat sed orci a, sagittis finibus sem. Ut bibendum purus id sodales scelerisque.</p>
            </div>

        </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>
 
/* Card Full */
{
  "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
}


/* Card News Detail */
{
  "modifier": "empty",
  "title-top": false,
  "date-block": false,
  "date-block-horizontal": false,
  "heading": {
    "tag": "h2",
    "text": "Lorem ipsum dolor sit amet",
    "modifier": "title"
  },
  "image": false,
  "time": false,
  "date": false,
  "location": false,
  "phone": false,
  "cta": false,
  "quote": false,
  "no-media": false,
  "video": false,
  "content": "fill this with news-article content"
}


/* Card Detail */
{
  "modifier": "detail",
  "title-top": false,
  "date-block": false,
  "date-block-horizontal": false,
  "heading": {
    "tag": "h2",
    "text": "Lorem ipsum dolor sit amet",
    "modifier": "title"
  },
  "image": false,
  "time": false,
  "date": false,
  "location": false,
  "phone": false,
  "cta": false,
  "quote": false,
  "no-media": false,
  "video": false,
  "content": "This could be literally anything. <h1>This is a h1 for example</h1><div>and this is a div</div>"
}


/* Card Title Top */
{
  "modifier": "title-top",
  "title-top": true,
  "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": {
    "icon": {
      "style": "fal",
      "icon": "fa-calendar-alt",
      "modifier": "fa-fw"
    },
    "text": "9 september 2020"
  },
  "location": {
    "icon": {
      "style": "fal",
      "icon": "fa-map-marker-alt",
      "modifier": "fa-fw"
    },
    "text": "Campus Diepenbeek - gebouw D"
  },
  "phone": false,
  "cta": {
    "text": "This is a CTA Button",
    "element": "a",
    "type": "",
    "title": "",
    "target": "",
    "href": "#",
    "id": "",
    "icon": false,
    "modifier": "red"
  },
  "quote": false,
  "no-media": false
}


/* Card No Image */
{
  "modifier": "no-image",
  "title-top": false,
  "date-block": true,
  "date-block-horizontal": false,
  "heading": {
    "tag": "h2",
    "text": "Lorem ipsum dolor sit amet",
    "modifier": "title"
  },
  "image": false,
  "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": true
}


/* Card List */
{
  "modifier": "list",
  "title-top": false,
  "date-block": false,
  "date-block-horizontal": true,
  "heading": {
    "tag": "h2",
    "text": "Lorem ipsum dolor sit amet",
    "modifier": "title"
  },
  "image": false,
  "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": false,
  "cta": false,
  "quote": false,
  "no-media": true
}


/* Card Small */
{
  "modifier": "small",
  "title-top": false,
  "date-block": false,
  "date-block-horizontal": false,
  "heading": {
    "tag": "h2",
    "text": "Lorem ipsum dolor sit amet",
    "modifier": "title"
  },
  "image": false,
  "time": false,
  "date": false,
  "location": false,
  "phone": false,
  "cta": false,
  "quote": false,
  "no-media": true,
  "text": true,
  "heading-icon": {
    "modifier": "heading-icon heading-icon-green",
    "style": "fas",
    "icon": "fa-seedling"
  }
}


/* Card Tag */
{
  "modifier": "tag",
  "title-top": false,
  "date-block": false,
  "date-block-horizontal": false,
  "heading": {
    "tag": "h2",
    "text": "Lorem ipsum dolor sit amet",
    "modifier": "title"
  },
  "image": {
    "src": "//placehold.co/480x264"
  },
  "time": false,
  "date": {
    "icon": {
      "style": "fal",
      "icon": "fa-calendar-alt",
      "modifier": "fa-fw"
    },
    "text": "9 september 2020"
  },
  "location": false,
  "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": true,
  "quote": false,
  "no-media": false,
  "tag": true
}


/* Card Cta */
{
  "modifier": "cta",
  "title-top": false,
  "date-block": false,
  "date-block-horizontal": false,
  "heading": {
    "tag": "h2",
    "text": "Lorem ipsum dolor sit amet",
    "modifier": "title"
  },
  "image": {
    "src": "//placehold.co/480x264"
  },
  "time": false,
  "date": false,
  "location": false,
  "phone": false,
  "cta": {
    "text": "This is a CTA Button",
    "element": "a",
    "type": "",
    "title": "",
    "target": "",
    "href": "#",
    "id": "",
    "icon": false,
    "modifier": "red"
  },
  "quote": false,
  "no-media": false,
  "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo."
}


/* Card Quote */
{
  "modifier": "quote",
  "title-top": false,
  "date-block": false,
  "date-block-horizontal": false,
  "heading": false,
  "image": false,
  "time": false,
  "date": false,
  "location": false,
  "phone": false,
  "cta": false,
  "quote": {
    "heading": {
      "text": "Peter van Mulken",
      "tag": "h2",
      "modifier": "name"
    },
    "function": "Master of Teaching in Economics (Dutch)",
    "place": "Netherlands",
    "text": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.",
    "icon": {
      "style": "fas",
      "icon": "fa-quote-right",
      "size": "fa-7x"
    }
  },
  "no-media": false,
  "video": true
}


/* Card News */
{
  "modifier": "news",
  "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": false,
  "date": false,
  "location": false,
  "phone": false,
  "cta": false,
  "quote": false,
  "no-media": false,
  "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo."
}
  • 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.