Nijmegen Component Library
You are viewing version 2 of the library, the latest version is

Cards Filename 

<div class="card card-filename">
    <div class="card-body">
        <p class="card-title">Dossiernaam</p>
        <figure>
            <img class="content" src="https://mdbootstrap.com/img/Photos/Vertical/mountain1.jpg" alt="Card image cap">
        </figure>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.
        </p>
        <p class="text-right mb-0 text-uppercase"><a href="" aria-label="Lees meer over dossiernaam">Lees meer</a></p>
    </div>
</div>

Cards Filename

Based on the version from MDB:
https://mdbootstrap.com/components/cards/#basic-example

Accessibility

Please note the usage of the aria-label attribute on the anchor and is there to provide a more descriptive label to assistive technology.
(http://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140408/ARIA8#ARIA8-examples)

Regarding the alt attribute on the image, please follow the decision tree as can be seen here https://www.w3.org/WAI/tutorials/images/decision-tree/

Using

To start using this component, some JavaScript is needed to ensure that the image is shown correctly on older browsers. Only one instance of this script is necessary even when using different types of cards.

<script>
    if ('objectFit' in document.documentElement.style === false) {
        $('.card figure img.content').each(function () {
            var imageUrl = $(this).prop('src');
            $(this).parent()
                .css('backgroundImage', 'url(' + imageUrl + ')')
                .addClass('compatibility-object-fit');
        });
    }
</script>

Notes

  • The card title in this component is rendered via a paragraph element, since it’s unknown in advance what the implementors document heading level structure would be, it’s not advisable to define a specific heading element (H1 - H6) in this component.
    However, the component has been structured to work with every heading (H1 - H6) level as card title, so you are free to use which heading level suits your use-case.