Vebego Component Library

Compliment Card: Wide 

<div class="mol-compliments-card wide">
    <h4>Een complimentje voor…<br><strong>Sanne Bisschoff</strong></h4>

    <div class="compliment-content">

        <div class="atm-paragraph text-md">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur interdum nulla, ut pretium nibh semper sed. Vivamus porta lectus sit amet accumsan convallis. Duis hendrerit risus justo, quis euismod nisi pellentesque et. Suspendisse quis ultrices orci. Praesent vitae fermentum eros. Quisque elementum, ante nec tincidunt pellentesque, diam elit semper erat, sit amet dapibus erat risus id nisl.</p>
        </div>

        <div class="author">Maria Koenen - Public Services</div>
    </div>
</div>
 
<div class="mol-compliments-card{{#if modifier}} {{modifier}}{{/if}}">
    {{#if name}}
    <h4>Een complimentje voor…<br><strong>{{name}}</strong></h4>
    {{/if}}

    <div class="compliment-content">
        {{#if image}}
            {{render '@image'}}
        {{/if}}

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

        {{#if author}}
        <div class="author">{{author}}</div>
        {{/if}}
    </div>
</div>
 
{
  "name": "Sanne Bisschoff",
  "message": "Sanne, jouw inzet en oog voor detail maken echt het verschil. Je staat altijd klaar om anderen te helpen, zelfs als je het zelf druk hebt. Je bent een stille kracht binnen het team en dat wordt enorm gewaardeerd.",
  "author": "Maria Koenen - Public Services",
  "modifier": "wide"
}
  • Content: 
    .mol-compliments-card {
    @apply bg-[#4a2a7c] text-white flex flex-col p-6 gap-8 md:min-h-[25rem];

    h4 {
        @apply text-white text-[0.9rem] leading-normal bg-[rgba(0,0,0,0.2)] max-w-[14rem] mt-0 px-6 p-2 rounded-[2rem] self-start;
        
        strong
        {
            @apply font-semibold text-[1rem];
            word-break: break-word;
        }
    }

    .compliment-content {
        @apply flex flex-col flex-1 gap-4;

        p {
            @apply text-[1.2rem];
            line-height: 1.4;
        }

        .author {
            @apply flex flex-1 text-[0.9rem] mt-4 self-start;
            align-items: end;
            word-break: break-word;
        }
    }

    &.wide {
        @apply col-span-full flex flex-col gap-4 md:flex-row md:gap-20 md:min-h-[15rem];

        h4 {
            @apply flex-[2];
            strong {
                word-break: break-word;
            }
        }
        .compliment-content {
            @apply flex;
        }
        .author {
            @apply flex self-start align-bottom;
            align-items: flex-end;
        }
    }

    &.image {
        @apply p-0;

        h4 {
            @apply hidden;
        }
        .atm-image {
            @apply w-full h-full object-cover;       
            img
            {
               @apply w-full h-full object-cover; 
            }
        }

        .compliment-content {
            @apply gap-0;
            p,
            .author {
                @apply hidden;
            }
        }
    }
}
  • URL: /components/raw/compliments-card/compliments-card.css
  • Filesystem Path: src\components\03-molecules\compliments-card\compliments-card.css
  • Size: 1.6 KB

No notes defined.