Development guide

Card

Het card component wordt gebruikt voor voornamelijk nieuwsartikelen. Het component bevat de volgende slots die optioneel gevuld kunnen worden:

Properties

Property Attribute Type Default Description
elementType element-type string '' Het element van de card
url url string ''
headerPrefix header-prefix string ''
header header string ''
headerSuffix header-suffix string ''
attribute attribute string ''
label label string ''
thumb thumb string ''
date date string ''
datetime datetime string ''
tags tags array []
readingTime reading-time string ''
tagsText tags-text string ''
badges badges array []
body body string ''
text text string ''

Voorbeeldcode:

<x-card
        url="#"
        title="Card title"
        date="11/03/21"
        date-time="2021-03-11T11:30:00"
        reading-time="5"
        :tags="[['name'=>'Tag 1'],['name'=>'Tag 2']]"
        >
        <x-slot name="label">
            <span>Label</span>
        </x-slot>

        <x-slot name="thumb">
            <img src="https://fakeimg.pl/800x600"
                 sizes="(min-width: 1200px) 360px, (min-width: 992px) 293px, (min-width: 768px) 310px, 100vw"
                 srcset="https://fakeimg.pl/800x600 800w,https://fakeimg.pl/400x300 400w,https://fakeimg.pl/200x150 200w"
                 alt="Card title"
            >
        </x-slot>

        <x-slot name="text">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            Architecto cumque delectus distinctio dolor laudantium nobis,
            non quaerat quos soluta vero!
            Assumenda commodi ex nesciunt numquam qui ratione suscipit ullam, voluptatibus.
        </x-slot>
    </x-card>

Resultaat:

Label
Card title
Tag 1  •  Tag 2
5 minuten lezen

Card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto cumque delectus distinctio dolor laudantium nobis, non quaerat quos soluta vero! Assumenda commodi ex nesciunt numquam qui ratione suscipit ullam, voluptatibus.
Lees verder

Voorbeeldcode:


<x-card element-type="div">
    <x-slot:header-prefix>
        <a href="#"
           title="Kies een andere zorg"
        >
            <i class="fa fa-trash-o"></i>
            <span class="sr-only" aria-hidden="true">Verwijderen</span>
        </a>
    </x-slot:header-prefix>

    <x-slot:header>
        <h2 class="title title--h4 js-set-healthcare-name">
            Voorbeeldnaam
        </h2>
    </x-slot:header>

    <x-slot:header-suffix>
        <button class="button button--bare button--link js-change-recognition-selection"
                type="button"
        >
            Wijzigen
        </button>
    </x-slot:header-suffix>

    <x-slot:body>
        <h3 class="title mb-4">Registratie(s)</h3>

        <div class="js-recognition-list vstack vstack--space-between-sm">
            <x-agb-code-request.healthcare-selection
                    title="Voorbeeld"
                    file-name="Bestandsnaam"
                    :file-size="10"
                    registration-number="545843468345"
                    hide-registration-number="546486687687"
                    registrationSince="01-12-2023"
            />
        </div>
    </x-slot:body>
</x-card>

Resultaat:

Voorbeeldnaam

Registratie(s)

Voorbeeld

Registratienummer: 545843468345
Geregistreerd sinds: 01-12-2023
Bestandsnaam (10 MB)

Voorbeeldcode:

<div class="row">
    <div class="col-xs-3">
        <x-card
                title="Voorbeeld"
        >
            <x-slot name="thumb">
                <img src="https://picsum.photos/1920/1080">
            </x-slot>

            <x-slot name="text">
                Natum adolescens voluptatum nostra maecenas consectetur expetendis. Aperiri mutat ut fuisset dicit.
                Primis persecuti mea eruditi mus dicunt eu explicari hinc.
            </x-slot>
        </x-card>
    </div>
</div>

Resultaat:

Voorbeeld

I want that Mulan McNugget sauce, Morty!
Lees verder