You are viewing version 3 of the library, the latest version is
<div class="card card-filename">
    <div class="card-body">
        <p class="card-title">Dossiernaam</p>
            <img class="content" src="" alt="Card image cap">
        <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 class="card-read-more text-right mb-0 text-uppercase">
            <a href="" aria-label="Lees meer over dossiernaam">Lees meer</a>

Cards Filename

Based on the version from MDB:


Please note the usage of the aria-label attribute on the anchor and is there to provide a more descriptive label to assistive technology.

Regarding the alt attribute on the image, please follow the decision tree as can be seen here


  • 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.