Card

These cards are an extension from Bootstrap cards, you can check its html structure here.

<a href="#" class="card">
            <div class="card-header">
                <div class="card-icon">
                    <svg>
                        <use xlink:href="#icon-resources"></use>
                    </svg>
                </div>
            </div>
            <div class="card-body">
                <h5 class="card-title text-center">Dive into a relevant theme</h5>
                <p class="card-text  text-center">Themes</p>
            </div>
        </a>

Cards are always aligned to the center using the wrapper card-grid

<div class="card-grid">
            <a href="#" class="card">
                <div class="card-header">
                    <div class="card-icon">
                        <svg>
                            <use xlink:href="#icon-themes"></use>
                        </svg>
                    </div>
                </div>
                <div class="card-body">
                    <h5 class="card-title text-center">Dive into a relevant theme</h5>
                    <p class="card-text  text-center">Themes</p>
                </div>
            </a>
            <a href="#" class="card">
                <div class="card-header">
                    <div class="card-icon">
                        <svg>
                            <use xlink:href="#icon-resources"></use>
                        </svg>
                    </div>
                </div>
                <div class="card-body">
                    <h5 class="card-title text-center">Work with our resources</h5>
                    <p class="card-text  text-center">Resources</p>
                </div>
            </a>
        </div>

You can define different header colors for cards

<div class="card-grid">
            <a href="#" class="card">
                <div class="card-header">
                    <div class="card-icon">
                        <svg>
                            <use xlink:href="#icon-themes"></use>
                        </svg>
                    </div>
                </div>
                <div class="card-body">
                    <h5 class="card-title text-center">Dive into a relevant theme</h5>
                    <p class="card-text  text-center">Themes</p>
                </div>
            </a>
            <a href="#" class="card is-themes">
                <div class="card-header">
                    <div class="card-icon">
                        <svg>
                            <use xlink:href="#icon-resources"></use>
                        </svg>
                    </div>
                </div>
                <div class="card-body">
                    <h5 class="card-title text-center">Dive into a relevant theme</h5>
                    <p class="card-text  text-center">Themes</p>
                </div>
            </a>
        </div>

<div class="card-grid">
            <a href="#" class="card">
                <div class="card-header">
                    <div class="card-icon">
                        <svg>
                            <use xlink:href="#icon-themes"></use>
                        </svg>
                    </div>
                </div>
                <div class="card-body">
                    <h5 class="card-title text-center">Dive into a relevant theme</h5>
                    <p class="card-text  text-center">Themes</p>
                </div>
            </a>
            <a href="#" class="card">
                <div class="card-header">
                    <div class="card-icon">
                        <svg>
                            <use xlink:href="#icon-resources"></use>
                        </svg>
                    </div>
                </div>
                <div class="card-body">
                    <h5 class="card-title text-center">Work with our resources</h5>
                    <p class="card-text  text-center">Resources</p>
                </div>
            </a>
            <a href="#" class="card">
                <div class="card-header">
                    <div class="card-icon">
                        <svg>
                            <use xlink:href="#icon-discussions"></use>
                        </svg>
                    </div>
                </div>
                <div class="card-body">
                    <h5 class="card-title text-center">Connect with the research community</h5>
                    <p class="card-text  text-center">Discussions</p>
                </div>
            </a>
        </div>

When card items are more then 4 the card-grid-4 css classname needs to be added

Be aware that this version needs to have a wrapper. Only add these if necessary. See implementation on homepage.

<div class="container">
            <div class="card-grid-4">
                <a href="#" class="card">
                    <div class="card-header">
                        <div class="card-icon">
                            <svg>
                                <use xlink:href="#icon-themes"></use>
                            </svg>
                        </div>
                    </div>
                    <div class="card-body">
                        <h5 class="card-title text-center">Dive into a relevant theme</h5>
                        <p class="card-text  text-center">Themes</p>
                    </div>
                </a>
                <a href="#" class="card">
                    <div class="card-header">
                        <div class="card-icon">
                            <svg>
                                <use xlink:href="#icon-resources"></use>
                            </svg>
                        </div>
                    </div>
                    <div class="card-body">
                        <h5 class="card-title text-center">Work with our resources</h5>
                        <p class="card-text  text-center">Resources</p>
                    </div>
                </a>
                <a href="#" class="card">
                    <div class="card-header">
                        <div class="card-icon">
                            <svg>
                                <use xlink:href="#icon-discussions"></use>
                            </svg>
                        </div>
                    </div>
                    <div class="card-body">
                        <h5 class="card-title text-center">Connect with the research community</h5>
                        <p class="card-text  text-center">Discussions</p>
                    </div>
                </a>
                <a href="#" class="card">
                    <div class="card-header">
                        <div class="card-icon">
                            <svg>
                                <use xlink:href="#icon-trainings"></use>
                            </svg>
                        </div>
                    </div>
                    <div class="card-body">
                        <h5 class="card-title text-center">Develop knowledge through training</h5>
                        <p class="card-text  text-center">Training</p>
                    </div>
                </a>
            </div>
        </div>