Icon Ribbon

by GuyNachshon

HTML

<link rel="stylesheet" href="https://test.eisaipro.eu/frontend/static/css/styles.modern.8b0d9da6.chunk.css">
<div class="container">
    <div class="row">
    <div class="row__headers">
      <div class="row__headers__tagline">Solutions</div>
      <div class="row__headers__title">Improve the benefits that health care can provide</div>
    </div>
    <div class="row__cards">
      <div class="row__cards__card"></div>
    </div>
  </div>
    <div class="row">
    <div class="row__headers">
      <div class="row__headers__tagline">Solutions</div>
      <div class="row__headers__title">Improve the benefits that health care can provide</div>
    </div>
    <div class="row__cards">
      <div class="row__cards__card"></div>
      <div class="row__cards__card"></div>
    </div>
  </div>
    <div class="row">
    <div class="row__headers">
      <div class="row__headers__tagline">Solutions</div>
      <div class="row__headers__title">Improve the benefits that health care can provide</div>
    </div>
    <div class="row__cards">
      <div class="row__cards__card"></div>
      <div class="row__cards__card"></div>
      <div class="row__cards__card"></div>
    </div>
  </div>
    <div class="row">
    <div class="row__headers">
      <div class="row__headers__tagline">Solutions</div>
      <div class="row__headers__title">Improve the benefits that health care can provide</div>
    </div>
    <div class="row__cards">
      <div class="row__cards__card"></div>
      <div class="row__cards__card"></div>
      <div class="row__cards__card"></div>
      <div class="row__cards__card"></div>
    </div>
  </div>
</div>

SCSS

@import url('https://fonts.googleapis.com/css2?family=Antonio:wght@100;200;300;400;500;600;700&family=Roboto:wght@300;400;500&display=swap');

* {
  box-sizing: border-box;
}

body {
  font-family: roboto, sans-serif;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.row {
  width: 100vw;
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  height: 200px;
  justify-content: space-between;
  align-items: center;

  &__headers {
    display: flex;
    flex-direction: column;
    
  
    &__tagline {
      font-family: antonio, sans-serif;
      font-weight: 800;
      font-size: 14px;
      line-height: 1.5rem;
    }

    &__title {
      display: flex;
      font-weight: 400;
      font-size: 24px;
      max-width: 80%;
      flex-wrap: wrap;
    }
  }

  &__cards {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    justify-content: space-between;
    &__card {
      width: 200px;
      height: 100px;
      margin: 0 20px;
      background-color: #ef546d;
    }
  }
}