Article Card

21. 2. 2019

Benefits of microservices

Some quick example text to build on the card title and make up the bulk of the card's content.

<div class="bg-dark" style="padding: 1rem">
  <div class="card card--article">
    <a href="#" class="card__link"></a>
    <a href="#" class="card__image">
      <img class="card__img card__img--xs" width="240" height="200"
           src="/images/blog.jpg"
           srcset="/images/blog.jpg 1x,
                   /images/blog.jpg 2x">
    </a>
    <div class="card__block">
      <span class="card__published">21. 2. 2019</span>
      <h4 class="card__title">Benefits of microservices</h4>
      <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>
    </div>
  </div>
</div>

Article Heading

Benefits of microservices

<div class="article">
  <h1 class="article__heading">Benefits of microservices</h1>
  <p class="article__info">20. 03. 2019</p>
</div>

Blockquote

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas lorem. Donec iaculis gravida nulla. Pellentesque arcu. Etiam quis quam. Pellentesque arcu. Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis.

<div class="article__text">
  <blockquote>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas lorem. Donec iaculis gravida
       nulla. Pellentesque arcu. Etiam quis quam. Pellentesque arcu. Nulla turpis magna, cursus sit amet,
       suscipit a, interdum id, felis.
    </p>
  </blockquote>
</div>

List

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas lorem. Donec iaculis gravida nulla. Pellentesque arcu. Etiam quis quam. Pellentesque arcu.
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas lorem. Donec iaculis gravida nulla. Pellentesque arcu. Etiam quis quam. Pellentesque arcu.
<div class="article__text">
  <ul>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas lorem. Donec iaculis gravida
       nulla. Pellentesque arcu. Etiam quis quam. Pellentesque arcu.</li>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas lorem. Donec iaculis gravida
       nulla. Pellentesque arcu. Etiam quis quam. Pellentesque arcu.</li>
  </ul>
</div>
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas lorem. Donec iaculis gravida nulla. Pellentesque arcu. Etiam quis quam. Pellentesque arcu.
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas lorem. Donec iaculis gravida nulla. Pellentesque arcu. Etiam quis quam. Pellentesque arcu.
<div class="article__text">
  <ul class="list--success">
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas lorem. Donec iaculis gravida
       nulla. Pellentesque arcu. Etiam quis quam. Pellentesque arcu.</li>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas lorem. Donec iaculis gravida
       nulla. Pellentesque arcu. Etiam quis quam. Pellentesque arcu.</li>
  </ul>
</div>
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas lorem. Donec iaculis gravida nulla. Pellentesque arcu. Etiam quis quam. Pellentesque arcu.
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas lorem. Donec iaculis gravida nulla. Pellentesque arcu. Etiam quis quam. Pellentesque arcu.
<div class="article__text">
  <ul class="list--danger">
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas lorem. Donec iaculis gravida
       nulla. Pellentesque arcu. Etiam quis quam. Pellentesque arcu.</li>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas lorem. Donec iaculis gravida
       nulla. Pellentesque arcu. Etiam quis quam. Pellentesque arcu.</li>
  </ul>
</div>