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

Meta Block 

<div class="container">
    <div class="meta-blocks">
        <h2 class="meta-blocks--title">Samengevat</h2>
        <div class="meta-blocks--container">
            <div class="meta-blocks--content row">
                <div class="col-xs-12 col-md-4 meta-blocks--col">
                    <h3 class="meta-blocks--content-heading">Aanbieder</h3>
                    <p>Korfbalvereniging De Hazenkamp</p>
                </div>
                <div class="col-xs-12 col-md-4 meta-blocks--col">
                    <h3 class="meta-blocks--content-heading">Datum</h3>
                    <p>Zaterdag, 17 September</p>
                    <a href="#">Toevoegen aan agenda</a>
                </div>
                <div class="col-xs-12 col-md-4 meta-blocks--col">
                    <h3 class="meta-blocks--content-heading">Deelname</h3>
                    <p>Gratis</p>
                </div>
                <div class="col-xs-12 col-md-4 meta-blocks--col">
                    <h3 class="meta-blocks--content-heading">Voor wie</h3>
                    <p>Alle leeftijden</p>
                </div>
                <div class="col-xs-12 col-md-4 meta-blocks--col">
                    <h3 class="meta-blocks--content-heading">Adres</h3>
                    <p>Drieskensacker 1140, Nijmegen</p>
                    <a href="#">Kaart bekijken</a>
                </div>
            </div>
        </div>
    </div>
</div>

Meta block

notes

  • It’s not required to use a H2 heading, you can select a heading of your choice.
  • The content of the content block can be whatever you need. Keep in mind that the first element needs the class meta-blocks--content-heading in order to make it bold.