<div class="bux-timeline bux-timeline--right">
<div class="bux-timeline__item">
<div class="bux-timeline__marker" aria-hidden="true"></div>
<div class="bux-timeline__content">
<h3 class="bux-timeline__heading">Sample Item</h3>
<div class="bux-timeline__date">Spring 2022</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in nulla ante. Suspendisse potenti. Donec efficitur, sem vitae dignissim viverra, nunc purus tempus nisi, feugiat ullamcorper tellus urna ut dui. Suspendisse potenti.</p>
</div>
</div>
<div class="bux-timeline__item">
<div class="bux-timeline__marker" aria-hidden="true"></div>
<div class="bux-timeline__content">
<h3 class="bux-timeline__heading">Sample Item 2</h3>
<div class="bux-timeline__date">Summer 2022</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in nulla ante. Suspendisse potenti. Donec efficitur, sem vitae dignissim viverra, nunc purus tempus nisi, feugiat ullamcorper tellus urna ut dui. Suspendisse potenti.</p>
</div>
</div>
<div class="bux-timeline__item">
<div class="bux-timeline__marker" aria-hidden="true"></div>
<div class="bux-timeline__content">
<h3 class="bux-timeline__heading">Sample Item 3</h3>
<div class="bux-timeline__date">Autumn 2022</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in nulla ante. Suspendisse potenti. Donec efficitur, sem vitae dignissim viverra, nunc purus tempus nisi, feugiat ullamcorper tellus urna ut dui. Suspendisse potenti.</p>
</div>
</div>
</div>
{#
Timeline
Available variables:
- modifier: Sets the alignment of the timeline. Either 'null',
'right' or 'center'.
- timeline_heading_level: Integer. Sets the heading level for the timeline
titles.
- items: Array containing the timeline list items.
- item.timeline_heading: String. Heading of the timeline item.
- item.timeline_date: String. Date for the timeline item.
- item.timeline_content: String. Content for the timeline item.
#}
<div class="bux-timeline {% if modifier %}bux-timeline--{{ modifier }}{% endif %}">
{% if modifier == 'center' %}
{% for item in items %}
<div class="bux-timeline__row">
<div class="bux-timeline__item{% if loop.index is even %} bux-timeline__item--even{% endif %}">
<div class="bux-timeline__marker" aria-hidden="true"></div>
<div class="bux-timeline__content">
<h{{ timeline_heading_level|default(3) }} class="bux-timeline__heading">{{ item.timeline_heading }}</h{{ timeline_heading_level|default(3) }}>
<div class="bux-timeline__date">{{ item.timeline_date }}</div>
{{ item.timeline_content }}
</div>
</div>
</div>
{% endfor %}
{% else %}
{% for item in items %}
<div class="bux-timeline__item">
<div class="bux-timeline__marker" aria-hidden="true"></div>
<div class="bux-timeline__content">
<h{{ timeline_heading_level|default(3) }} class="bux-timeline__heading">{{ item.timeline_heading }}</h{{ timeline_heading_level|default(3) }}>
<div class="bux-timeline__date">{{ item.timeline_date }}</div>
{{ item.timeline_content }}
</div>
</div>
{% endfor %}
{% endif %}
</div>
site_name_prefix: Office of
site_name: Learning Relations Excellence
site_slogan: Additional text or site slogan
address_1: 100 Building Name
address_2: 1 Oval Mall
city: Columbus
state: OH
zip: '43210'
contact_email: email@osu.edu
contact_phone: 614-292-OHIO
contact_tty: 614-688-8605
timeline_heading_level: 3
items:
'1':
timeline_heading: Sample Item
timeline_date: Spring 2022
timeline_content: >-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in
nulla ante. Suspendisse potenti. Donec efficitur, sem vitae dignissim
viverra, nunc purus tempus nisi, feugiat ullamcorper tellus urna ut dui.
Suspendisse potenti.</p>
'2':
timeline_heading: Sample Item 2
timeline_date: Summer 2022
timeline_content: >-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in
nulla ante. Suspendisse potenti. Donec efficitur, sem vitae dignissim
viverra, nunc purus tempus nisi, feugiat ullamcorper tellus urna ut dui.
Suspendisse potenti.</p>
'3':
timeline_heading: Sample Item 3
timeline_date: Autumn 2022
timeline_content: >-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in
nulla ante. Suspendisse potenti. Donec efficitur, sem vitae dignissim
viverra, nunc purus tempus nisi, feugiat ullamcorper tellus urna ut dui.
Suspendisse potenti.</p>
modifier: right
.bux-timeline {
position: relative;
padding: $sp-24;
// Vertical line.
&::before {
content: "";
margin-left: $sp-4;
position: absolute;
top: 0;
left: $sp-24;
height: 100%;
width: $sp-4;
background: $gray-light-40;
}
// Arrow.
&__item::after {
margin-left: 0;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-right-color: $gray-light-80;
border-width: rem-calc(16);
top: rem-calc(10);
}
&__item {
position: relative;
margin-bottom: $sp-48;
&:last-child {
margin-bottom: 0;
}
}
&__marker {
width: $sp-12;
height: $sp-12;
position: absolute;
background: $white;
box-shadow: 0 0 0 $sp-4 $scarlet;
border-radius: 50%;
margin-top: rem-calc(20);
}
&__content {
padding: $sp-16 $sp-24;
margin-left: rem-calc(32);
background-color: $white;
border: 2px solid $gray-light-80;
border-top: 0;
box-shadow: 0 -4px 0 0 $scarlet;
p:last-child {
margin-bottom: 0;
}
}
&__heading {
font-size: $ts-22;
color: $gray-dark-80;
font-weight: 700;
margin-bottom: $sp-4;
@include breakpoint(md) {
font-size: $ts-md;
line-height: 1.25;
}
}
&__date {
font-size: $ts-18;
color: $gray-dark-40;
font-weight: 600;
margin-bottom: $sp-16;
}
}
// Right Variant.
.bux-timeline--right {
// Vertical line.
&::before {
left: auto;
right: calc(#{$sp-24} + #{$sp-4});
}
// Arrow.
.bux-timeline__item::after {
margin-left: 0;
right: 0;
border-left-color: $gray-light-80;
border-right-color: transparent;
}
.bux-timeline__marker {
margin-left: 0;
right: 0;
}
.bux-timeline__content {
margin-left: 0;
margin-right: rem-calc(32);
}
}
// Center Variant.
// Only valid at md breakpoint and above.
// Uses default timeline styles below md.
@include breakpoint(md) {
.bux-timeline--center {
&::before {
left: 50%;
margin-left: 0;
}
.bux-timeline__row {
display: flex;
flex-wrap: wrap;
margin-bottom: $sp-24;
&:last-child {
margin-bottom: 0;
}
}
.bux-timeline__item {
flex-basis: 50%;
max-width: 50%;
padding: 0 $sp-16 * 0.75;
width: 100%;
&::after {
margin-left: -$sp-24;
left: 100%;
border-left-color: $gray-light-80;
border-right-color: transparent;
}
.bux-timeline__marker {
margin-left: -$sp-4;
left: 100%;
}
.bux-timeline__content {
margin-left: 0;
margin-right: $sp-16 * 0.75;
}
}
.bux-timeline__item--even {
margin-left: auto;
&::after {
margin-left: -$sp-16;
left: auto;
border-right-color: $gray-light-80;
border-left-color: transparent;
}
.bux-timeline__marker {
left: auto;
margin-left: -$sp-16;
}
.bux-timeline__content {
margin-right: 0;
margin-left: $sp-16;
}
}
}
}
No notes defined.