Icon Ribbon

by Luke Harby

HTML

<link rel="stylesheet" href="https://test.eisaipro.eu/frontend/static/css/styles.modern.8b0d9da6.chunk.css">
<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="/-/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="/-/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="/-/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%;
	height: 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 (min-width:992px) {
	.ribbon-icon[data-columns="3"]...