Cards

Simple card

Card title

Card content here ipsum dolor sit amet consectetur adipiscing elit in porta elementum rutrum eget lectus sem fringilla natoque habitasse convallis viverra, mus laoreet semper sociis praesent arcu dictum fermentum. Fringilla vestibulum maecenas sociosqu tempor vehicula rutrum suscipit nunc netus congue eget nisl massa, tortor lectus sollicitudin feugiat elementum eleifend curae torquent ridiculus dignissim commodo. Mauris netus libero torquent pellentesque lobortis placerat, nisi sodales laoreet aliquam suscipit sed, porttitor ultrices ac accumsan egestas

A card with title + content

<div class="card">
  <div class="card__content">
    <h2 class="card__title">
      <a href="#">Title / link</a>
    </h2>
    <p>Text here</p>
  </div>
</div>

Image + simple content

Card title

A card with image + title + content

            <div class="card">
              <div class="card__image">
                <a href="#">Image here</a>
              </div>
              <div class="card__content">
                <h2 class="card__title">
                  <a href="#">Title / link</a>
                </h2>
                <p>Text here</p>
              </div>
            </div>

Image + content + author

Card title

Author name

Author can be placed after closing p tag or in a footer etc

            <div class="card">
              <div class="card__image">
                <a href="#">Image here</a>
              </div>
              <div class="card__content">
                <h2 class="card__title">
                  <a href="#">Title / link</a>
                </h2>
                <div class="author author--card">
                  <a href="#">Author name / link</a>
                </div>
                <p>Text here</p>
              </div>
            </div>

Image + content + author + date

Card title

Author name

03.07.2018

Author & dates can be placed after closing p tag or in a footer etc

            <div class="card">
              <div class="card__image">
                <a href="#">Image here</a>
              </div>
              <div class="card__content">
                <h2 class="card__title">
                  <a href="#">Title / link</a>
                </h2>
                <div class="author author--card">
                  <a href="#">Author name / link</a>
                </div>
                <div class="date date--card">
                  01.01.2018
                </div>
                <p>Text here</p>
              </div>
            </div>

Image + content + author + date + footer

Card title

Author name

03.07.2018

Footer can contain a link/button/text/cta

            <div class="card">
              <div class="card__image">
                <a href="#">Image here</a>
              </div>
              <div class="card__content">
                <h2 class="card__title">
                  <a href="#">Title / link</a>
                </h2>
                <div class="author author--card">
                  <a href="#">Author name / link</a>
                </div>
                <div class="date date--card">
                  01.01.2018
                </div>
                <p>Text here</p>
              </div>
              <footer class="card__footer">
                Footer content
              </footer>
            </div>

Header + image + content + footer

Card title

Header can contain a heading/button/link

            <div class="card">
            <header class="card__header">
              Header content
            </header>
              <div class="card__image">
                <a href="#">Image here</a>
              </div>
              <div class="card__content">
                <h2 class="card__title">
                  <a href="#">Title / link</a>
                </h2>
                <p>Text here</p>
              </div>
              <footer class="card__footer">
                Footer content
              </footer>
            </div>