<div class="multi-column-content multi-column-content--alternative">
<div class="multi-column-content__column">
<div class="multi-column-content__column-media">
<img src="../../img/icons/multicolor-icon-office-of-dei.svg" alt="" />
</div>
<div class="multi-column-content__column--content">
<h3 class="multi-column-content__column--title">Office of Diversity, Equity and Inclusion</h3>
<div class="multi-column-content__column--description text-content">
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
</div>
<a class="link-tertiary" href="https://www.iastate.edu/">Learn more about the Office<span class="arrow"></span></a>
</div>
</div>
<div class="multi-column-content__column">
<div class="multi-column-content__column-media">
<img src="../../img/icons/multicolor-icon-center-for-lgbtqia+.svg" alt="" />
</div>
<div class="multi-column-content__column--content">
<h3 class="multi-column-content__column--title">Center for LGBTQIA+ Student Success</h3>
<div class="multi-column-content__column--description text-content">
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
</div>
<a class="link-tertiary" href="https://www.iastate.edu/">Read more about our LGBTQIA+ Community<span class="arrow"></span></a>
</div>
</div>
<div class="multi-column-content__column">
<div class="multi-column-content__column-media">
<img src="../../img/icons/multicolor-icon-student-accessibility.svg" alt="" />
</div>
<div class="multi-column-content__column--content">
<h3 class="multi-column-content__column--title">Student Accessibility Services</h3>
<div class="multi-column-content__column--description text-content">
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
</div>
<a class="link-tertiary" href="https://www.iastate.edu/">Learn about Accessibility Services<span class="arrow"></span></a>
</div>
</div>
</div>
<div class="multi-column-content{% if columns|length < 3 %} multi-column-content-two-col{% endif %} multi-column-content--alternative">
{% for column in columns %}
<div class="multi-column-content__column">
{% if column.icon %}
<div class="multi-column-content__column-media">
<img src="{{ column.icon|path }}" alt="" />
</div>
{% endif %}
<div class="multi-column-content__column--content">
<h3 class="multi-column-content__column--title">{{ column.title }}</h3>
<div class="multi-column-content__column--description text-content">{{ column.description|raw }}</div>
<a class="link-tertiary" href="{{ column.link.url }}">{{ column.link.title }}<span class="arrow"></span></a>
</div>
</div>
{% endfor %}
</div>
{
"columns": [
{
"icon": "../../img/icons/multicolor-icon-office-of-dei.svg",
"title": "Office of Diversity, Equity and Inclusion",
"description": "<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>",
"link": {
"url": "https://www.iastate.edu/",
"title": "Learn more about the Office"
}
},
{
"icon": "../../img/icons/multicolor-icon-center-for-lgbtqia+.svg",
"title": "Center for LGBTQIA+ Student Success",
"description": "<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>",
"link": {
"url": "https://www.iastate.edu/",
"title": "Read more about our LGBTQIA+ Community"
}
},
{
"icon": "../../img/icons/multicolor-icon-student-accessibility.svg",
"title": "Student Accessibility Services",
"description": "<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>",
"link": {
"url": "https://www.iastate.edu/",
"title": "Learn about Accessibility Services"
}
}
]
}
.multi-column-content {
@include media-breakpoint-up(md) {
display: flex;
margin-right: rem(-40);
}
&.multi-column-content-two-col {
@include media-breakpoint-up(md) {
margin-right: rem(-100);
}
}
&.multi-column-content--alternative {
text-align: center;
margin-top: rem(60);
margin-bottom: rem(40);
@include media-breakpoint-up(md) {
display: flex;
margin-right: rem(-74);
}
}
}
.multi-column-content__column {
margin: 0 0 rem(40) 0;
@include media-breakpoint-up(md) {
flex: 1 1 0px;
padding-right: rem(40);
margin-bottom: 0;
}
.multi-column-content-two-col & {
@include media-breakpoint-up(md) {
padding-right: rem(100);
}
}
.multi-column-content--alternative & {
@include media-breakpoint-up(md) {
padding-right: rem(74);
position: relative;
}
&:after {
@include media-breakpoint-up(md) {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: rem(2);
border-right: rem(2) solid $off-white;
right: rem(37);
}
}
&:last-child {
margin-bottom: 0;
&:after {
display: none;
}
}
}
.link-tertiary {
font-size: rem(18);
line-height: (25 / 18);
padding: 0 rem(13);
@include media-breakpoint-up(md) {
padding: 0;
}
.arrow {
bottom: rem(12);
}
}
.text-content {
margin-bottom: 0;
}
}
This is a custom component (no class prefix in place as it does not conflict with bootstrap)
default is unstructured in terms of the content input and multi-column-content--alternative is more structured and has fields for an icon/image (optional), title, description and tertiary link..multi-column-text-two-col automatically added if 2 column to allow for custom gap spacing between columnsdefault columns are set up to allow for raw html, so any markup (including images) could potentially be placed insideindex.scss file as @import "../components/multi-column-text/multi-column-text";<div class="paragraph-widget paragraph-widget--multicolumn-text">.