Icon Ribbon

by Tri Nguyen

HTML

<section class="ribbon-icon grid grid-container content-wrapper" data-columns="4" data-tracking="ribbon-icon">
    <div class="row">
        <div class="ribbon-icon__title col col--md-6">
            <p class="ribbon-icon__tagline">Solutions</p>
            <p class="h1">Improve the benefits that health care can provide Improve the benefits that health care can provide..</p>
            <p class="ribbon-icon__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cursus porta rhoncus pharetra amet, consequat ullamcorper vitae sed. Dolor sem tellus nec risus magna.</p>
        </div>
        <div class="ribbon-icon__items row col">
                <a class="ribbon-icon__items--item col col--md-3" href="/en-gb">
                    <div>
                        <img src="https://test-cd.eisaipro.eu/en-gb/-/jssmedia/Eisai-Emea/Shared/Icons/icon-microscope.svg?iar=0&amp;hash=277AE31475485774CD0094CBB39EC102">
                    </div>
                    <div>
                        <h3 class="ribbon-icon__item-title">Clinical studies</h3>
                        <p>Clinical trials, safety studies</p>
                    </div>
                </a>
                <a class="ribbon-icon__items--item col col--md-3" href="/en-gb">
                    <div>
                        <img src="https://test-cd.eisaipro.eu/en-gb/-/jssmedia/Eisai-Emea/Shared/Icons/icon-microscope.svg?iar=0&amp;hash=277AE31475485774CD0094CBB39EC102">
                    </div>
                    <div>
                        <h3 class="ribbon-icon__item-title">Clinical studies</h3>
                        <p>Clinical trials, safety studies</p>
                    </div>
                </a>
                <a class="ribbon-icon__items--item col col--md-3" href="/en-gb">
                    <div>
                        <img src="https://test-cd.eisaipro.eu/en-gb/-/jssmedia/Eisai-Emea/Shared/Icons/icon-documents.svg?iar=0&amp;hash=13316F3944BF062DA0708F1A38BDFF3D">
            ...

CSS

.ribbon-icon {
  padding-bottom: -4.5rem;
}

@media (min-width:992px) {
  .ribbon-icon {
    padding-bottom: -2.5rem;
  }
}

.ribbon-icon__title {
  margin: 0 !important;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
}

@media (min-width:768px) {
  .ribbon-icon__title {
    margin: 0 0 6rem !important;
  }
}

@media (min-width:768px) {
  .ribbon-icon__title .h1 {
    font-size: 2.5rem !important;
  }
}

.ribbon-icon__description {
  margin-bottom: 0;
}

.ribbon-icon__item-title {
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1.5rem;
}

@media (min-width:768px) {
  .ribbon-icon__item-title {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
}

.ribbon-icon__items {
  flex-direction: row-reverse !important;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
}

@media (min-width:992px) {
  .ribbon-icon__items {
    position: relative;
    top: -7rem;
  }
}

.ribbon-icon__items--item {
  position: relative;
  color: initial;
  margin: 1.25rem 0 2.25rem;
  text-decoration: none;
}

.ribbon-icon__items--item::before {
  content: "";
  border-width: 0;
  border-left: 1px solid;
  border-image: linear-gradient(#b5007c, #007da3) 0 100%;
  position: absolute;
  left: 0;
  height: calc(100% - 1.2rem);
}

.ribbon-icon__items--item:hover {
  color: initial;
}

.ribbon-icon__items--item p {
  margin: 0;
}

.ribbon-icon__items--item img,
.ribbon-icon__items--item svg {
  max-width: 3.25rem;
}

@media (min-width:768px) {

  .ribbon-icon__items--item img,
  .ribbon-icon__items--item svg {
    max-width: 5rem;
  }
}

@media (min-width:992px) {
  .ribbon-icon__items--item {
    position: relative;
    margin: 0;
    padding-bottom: 0;
  }
}

.ribbon-icon[data-columns="1"] .ribbon-icon__title {
  flex: 0 0 75%;
  max-width: 75%;
}

@media (min-width:992px) {

  .ribbon-icon[data-columns="3"] .ribbon-icon__items--item:nth-child(2),
  .ribbon-icon[data-columns="4"] .ribbon-icon__items--item:nth-child(2) {
    min-height: 30rem;
  }
}

@media...