UHasselt Component Library

Study Card 

<!-- Study Card With Image -->
<section class='study-card  js--clickable'>
    <div class='left'>
        <div class="study-title">
            <h2 class="heading ">
                Bachelor in de architectuur
            </h2>
            <div></div>
        </div>
        <div class='wrap-info'>
            <h4 class="heading ">
                Academisch gerichte bacheloropleiding
            </h4>
            <div class="study-info">
                <ul>
                    <li>Campus Diepenbeek</li>
                    <li>180 - 120 SP</li>
                    <li>Nederlands</li>
                </ul>
            </div>
        </div>
        <div class='wrap-text'>
            <h5 class="heading ">
                The quick brown fox jumps over the lazy dog
            </h5>
            <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="https://www.google.nl" class="button button-red ">
                <span>
                    <span class="icon fal fa-envelope   " aria-hidden="true"></span>
                    <span class="text">
                        Meer informatie
                    </span>
                </span>
            </a>
        </div>
    </div>
    <div class='right'>
        <picture class="picture ">
            <img class="picture-image " src="https://picsum.photos/id/331/430/390" alt="Opleiding" loading="lazy">
        </picture>

    </div>
</section>


<!-- Study Card No Image -->
<section class='study-card  js--clickable'>
    <div class='left'>
        <div class="study-title">
            <h2 class="heading ">
                Bachelor in de architectuur
            </h2>
            <div></div>
        </div>
        <div class='wrap-info'>
            <h4 class="heading ">
                Academisch gerichte bacheloropleiding
            </h4>
            <div class="study-info">
                <ul>
                    <li>Campus Diepenbeek</li>
                    <li>180 - 120 SP</li>
                    <li>Nederlands</li>
                </ul>
            </div>
        </div>
        <div class='wrap-text'>
            <h5 class="heading ">
                The quick brown fox jumps over the lazy dog
            </h5>
            <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="https://www.google.nl" class="button button-red ">
                <span>
                    <span class="icon fal fa-envelope   " aria-hidden="true"></span>
                    <span class="text">
                        Meer informatie
                    </span>
                </span>
            </a>
        </div>
    </div>
</section>


<!-- Study Card No Text -->
<section class='study-card  js--clickable'>
    <div class='left'>
        <div class="study-title">
            <h2 class="heading ">
                Bachelor in de architectuur
            </h2>
            <div></div>
        </div>
        <div class='wrap-info'>
            <h4 class="heading ">
                Academisch gerichte bacheloropleiding
            </h4>
            <div class="study-info">
                <ul>
                    <li>Campus Diepenbeek</li>
                    <li>180 - 120 SP</li>
                    <li>Nederlands</li>
                </ul>
            </div>
        </div>
        <div class='wrap-text'>
        </div>
        <div class='btn-wrapper'> <a href="https://www.google.nl" class="button button-red ">
                <span>
                    <span class="icon fal fa-envelope   " aria-hidden="true"></span>
                    <span class="text">
                        Meer informatie
                    </span>
                </span>
            </a>
        </div>
    </div>
</section>


<!-- Study Card Simple -->
<section class='study-card study-card-simple js--clickable'>
    <div class='left'>
        <div class="study-title">
            <h4 class="heading ">
                Bachelor in de architectuur
            </h4>
            <div><span class="tag tag-gray ">
                    Ook in het Engels

                </span>
            </div>
        </div>
        <div class='wrap-info'>
            <h6 class="heading ">
                Academisch gerichte bacheloropleiding
            </h6>

        </div>
        <div class='wrap-text'>
        </div>
        <div class='btn-wrapper'> <a href="https://www.google.nl" class="button button-red ">
                <span>
                    <span class="icon fal fa-envelope   " aria-hidden="true"></span>
                    <span class="text">
                        Meer informatie
                    </span>
                </span>
            </a>
        </div>
    </div>
</section>


<section class='study-card {{modifier}} {{#if cta}}js--clickable{{/if}}'>
    <div class='left'>
        <div class="study-title">
            {{render '@heading--h2' heading-title merge=true}}
            <div>{{#if study-tag}}{{render '@tag--tag-grey' study-tag merge=true}}{{/if}}</div>
        </div>
        <div class='wrap-info'>
            {{render '@heading--h4' heading-degree merge=true}}
            {{#if study-info}}{{render '@study-info'}}{{/if}}
        </div>
        <div class='wrap-text'>
            {{#if paragraph}}
                {{render '@heading--h5'}}
                {{render '@paragraph'}}
            {{/if}}
        </div>
        {{#if cta}}<div class='btn-wrapper'>{{render '@button' cta merge=true}}</div>{{/if}}
    </div>
    {{#if imgurl}}
        <div class='right'>
            {{render '@image' imgurl}}
        </div>
    {{/if}}
</section>
 
/* Study Card With Image */
{
  "cta": {
    "modifier": "red",
    "text": "Meer informatie",
    "element": "a",
    "type": "",
    "title": "",
    "target": "",
    "href": "https://www.google.nl",
    "id": "",
    "icon": false
  },
  "study-info": true,
  "heading-title": {
    "text": "Bachelor in de architectuur"
  },
  "heading-degree": {
    "text": "Academisch gerichte bacheloropleiding"
  },
  "imgurl": {
    "modifier": "",
    "imageModifier": "",
    "lazy": true,
    "alt": "Opleiding",
    "src": "https://picsum.photos/id/331/430/390"
  },
  "paragraph": true
}


/* Study Card No Image */
{
  "cta": {
    "modifier": "red",
    "text": "Meer informatie",
    "element": "a",
    "type": "",
    "title": "",
    "target": "",
    "href": "https://www.google.nl",
    "id": "",
    "icon": false
  },
  "study-info": true,
  "heading-title": {
    "text": "Bachelor in de architectuur"
  },
  "heading-degree": {
    "text": "Academisch gerichte bacheloropleiding"
  },
  "paragraph": true
}


/* Study Card No Text */
{
  "cta": {
    "modifier": "red",
    "text": "Meer informatie",
    "element": "a",
    "type": "",
    "title": "",
    "target": "",
    "href": "https://www.google.nl",
    "id": "",
    "icon": false
  },
  "study-info": true,
  "heading-title": {
    "text": "Bachelor in de architectuur"
  },
  "heading-degree": {
    "text": "Academisch gerichte bacheloropleiding"
  }
}


/* Study Card Simple */
{
  "cta": {
    "modifier": "red",
    "text": "Meer informatie",
    "element": "a",
    "type": "",
    "title": "",
    "target": "",
    "href": "https://www.google.nl",
    "id": "",
    "icon": false
  },
  "study-info": false,
  "heading-title": {
    "text": "Bachelor in de architectuur",
    "tag": "h4"
  },
  "heading-degree": {
    "text": "Academisch gerichte bacheloropleiding",
    "tag": "h6"
  },
  "modifier": "study-card-simple",
  "study-tag": {
    "element": "span",
    "text": "Ook in het Engels"
  }
}
  • Content: 
    .study-card {
    @apply flex;
    @apply flex-col;
    @apply flex-col-reverse;
    @apply md:flex-row;
    @apply border border-solid border-gray;
    transition: 0.3s;
    @apply mb-8;
    @apply bg-white;

    &:hover {
        @apply shadow-lg;
    }

    .left {
        @apply w-full;
        @apply p-8;

        h2 {
            @apply mb-4 md:mb-6;
        }

        .wrap-info {
            @apply md:flex;
            @apply md:flex-wrap;
            @apply md:items-center;
            @apply md:gap-4;
            @apply mb-8;

            h4 {
                @apply mb-4 md:m-0 md:mr-4;
                @apply block;
            }
        }

        .wrap-text {
            @apply mb-6;

            h5 {
                @apply font-bold;
                @apply mb-4;
            }
        }
    }

    .right {
        @apply w-full md:w-2/5;

        .picture {
            @apply h-full;

            @media (min-width: 768px) {
                clip-path: polygon(25% 0, 100% 0, 100% 100%, 0% 100%);
            }

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

    &.study-card-simple {
        @apply mb-0 border-b-0 hover:bg-red;

        &:last-child {
            @apply border-b;
        }

        &:hover {
            .heading {
                @apply text-white;
            }
        }

        .heading {
            @apply m-0;
        }

        .left {
            @apply p-4 flex flex-col gap-4 lg:flex-row lg:justify-between lg:items-center;

            .study-title {
                @apply flex flex-col gap-4 lg:flex-row lg:items-center;
            }
        }

        .wrap-info {
            @apply m-0;

            h6.heading {
                @apply font-bold;
            }
        }

        .study-info,
        .wrap-text,
        .btn-wrapper {
            display: none;
        }
    }
}
  • URL: /components/raw/study-card/study-card.css
  • Filesystem Path: src\components\04-organisms\study-card\study-card.css
  • Size: 2 KB

No notes defined.