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

Cards News 

<div class="card card-news">
    <figure>
        <img class="content" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg" alt="Card image cap">
        <span class="badge badge-default">25 / 05 / 2017</span>
    </figure>

    <div class="card-body">
        <p class="card-title">Nieuws item</p>
        <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="card-read-more text-right mb-0 text-uppercase">
            <a href="" aria-label="Lees meer over nieuws item">Lees meer</a>
        </p>
    </div>
</div>

Cards News

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/

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.
  • The card will fill the with of it’s parent so you have to take care of responsiveness yourself (in this example we used the bootstrap grid system to solve this)