Component usage notes.
An example of this section level component in action, please see the Sample Page
This component is designed to be the full-width of the page. See the Reference Pages for examples of this component in action.
<section class="timeline-container">
<div class="container pb-5">
<!--<h2>From College to Career</h2>-->
<div class="main-timeline">
<!--<div class="col-12 timeline-banner-start"><h3>Medium Length Subheader</h3></div>-->
<div class="timeline timeline-right year-1 collapse show" id="year-1">
<div class="card">
<div class="card-body p-4">
<h3 class="timeline-section-header">Year 1</h3>
<div class="row">
<div class="col-12">
<ul>
<li><a href="#">List item or step to take</a></li>
<li><a href="#">List item or step to take</a></li>
<li><a href="#">List item or step to take</a></li>
<li><a href="#">List item or step to take</a></li>
<li><a href="#">List item or step to take</a></li>
<li><a href="#">List item or step to take</a></li>
<li><a href="#">List item or step to take</a></li>
<li><a href="#">List item or step to take</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="timeline timeline-right year-2 collapse show" id="year-2">
<div class="card">
<div class="card-body p-4">
<h3 class="timeline-section-header">Year 2</h3>
<div class="row">
<div class="col-12">
<ul>
<li><a href="#">List item or step to take</a></li>
<li><a href="#">List item or step to take</a></li>
<li><a href="#">List item or step to take</a></li>
<li><a href="#">List item or step to take</a></li>
<li><a href="#">List item or step to take</a></li>
<li><a href="#">List item or step to take</a></li>
<li><a href="#">List item or step to take</a></li>
<li><a href="#">List item or step to take</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="timeline timeline-right year-3 collapse show" id="year-3">
<div class="card">
<div class="card-body p-4">
<h3 class="timeline-section-header">Year 3</h3>
<div class="row">
<div class="col-12">
<ul>
<li><a href="#">List item or step to take</a></li>
<li><a href="#">List item or step to take</a></li>
<li><a href="#">List item or step to take</a></li>
<li><a href="#">List item or step to take</a></li>
<li><a href="#">List item or step to take</a></li>
<li><a href="#">List item or step to take</a></li>
<li><a href="#">List item or step to take</a></li>
<li><a href="#">List item or step to take</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="timeline timeline-right year-4 collapse show" id="year-4">
<div class="card">
<div class="card-body p-4">
<h3 class="timeline-section-header">Year 4</h3>
<div class="row">
<div class="col-12">
<ul>
<li><a href="#">List item or step to take</a></li>
<li><a href="#">List item or step to take</a></li>
<li><a href="#">List item or step to take</a></li>
<li><a href="#">List item or step to take</a></li>
<li><a href="#">List item or step to take</a></li>
<li><a href="#">List item or step to take</a></li>
<li><a href="#">List item or step to take</a></li>
<li class="orange-a11y">BIG EVENT<br /><a href="#">Apply for Graduation</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="timeline timeline-right default collapse" id="default">
<div class="card">
<div class="card-body p-4">
<h3 class="timeline-section-header">No results found!</h3>
<div class="row">
<div class="col-12">
<p>No topics selected. Please use the check boxes to the left to search for resources.</p>
</div>
</div>
</div>
</div>
</div>
<!--<div class="col-12 timeline-banner-end"><h3>Medium Length Subheader</h3></div>-->
</div>
</div>
</section>
/* components/03-sections/12-timeline/timeline.scss */
/* BEGIN timeline.scss */
/* Timeline text styles */
h3.timeline-section-header {
font-family: 'Kulturista', 'Open Sans';
color: $blue;
font-size: 1.75rem;
font-weight: 800;
line-height: 1.6;
&::after{
background-color: $orange;
content: "";
display: block;
height: 4px;
margin-top: 5px;
margin-bottom: 25px;
width: 4em;
}
}
.timeline-banner-start {
padding: 1.5% 3% 1% 3%;
background-color: $orange-a11y;
margin-bottom: 25px;
margin-top: 25px;
display: block;
position: relative;
z-index: 10;
width: 102%;
left: -2%;
>h3 {
color: $white;
font-size: 1.5rem;
}
}
.timeline-banner-end {
padding: 1.5% 3% 1% 3%;
background-color: $orange-a11y;
margin-bottom: 25px;
margin-top: 10px;
display: block;
position: relative;
z-index: 10;
width: 102%;
left: -2%;
>h3 {
color: $white;
font-size: 1.5rem;
}
}
/* The actual timeline (the vertical ruler) */
.main-timeline {
position: relative;
max-width: 100%;
margin: 0 auto;
}
/* Container around content */
.timeline {
position: relative;
background-color: inherit;
width: 100%;
>.card {
--bs-card-border-radius: 0;
--bs-card-border-width:0;
border-left: solid 3px $blue;
>.card-body {
background-color: #f2f2f2;
& ul>li {
margin-bottom: 3px;
font-weight: 600;
font-size: .95rem;
&::marker {
color: $orange-a11y;
}
}
}
}
}
/* Place the container to the right */
.timeline-right {
padding: 0px 0px 20px 0px;
left: auto;
}
/* Fix the circle for containers on the right side */
.timeline-right::after {
left: -7px;
}
@media (max-width: 991px) {
.main-timeline {
max-width: 100%;
}
}
.timeline-container {
/* fallback for old browsers */
background: none;
}
/* Start - Timeline Small */
#timeline-progression > div {
background-color: $white-b;
border-top: 3px solid $orange;
&:not(:first-child){
margin-left: 20px;
}
}
#timeline-progression p, #timeline-progression li, #timeline-progression a{
font-weight: bold;
}
#timeline-numbers{
color: $white;
font-weight: bold;
}
.inner {
position: relative;
}
#timeline-numbers span {
background-color: $blue;
border-radius: 30px;
z-index: 1;
}
#timeline-numbers span.square {
background-color: $blue;
border-radius: 5px;
}
.inner::after{
content: '';
border-top: 3px solid $orange;
height: 100%;
width: 76%;
position: absolute;
left: 12%;
top: 10px;
z-index: -1;
}
@include media-breakpoint-down(lg) {
#timeline-progression > div {
&:not(:first-child){
margin-left: 0px;
}
}
}
#timeline-numbers span.circle{
border-radius: 30px;
}
/* End - Timeline Small */
/* Dark Mode - Timeline Styles */
@include color-mode(dark) {
h3.timeline-section-header {
color: $white;
}
.main-timeline::after {
border: solid 2px $white;
border-style: dashed;
}
.timeline {
>.card {
--bs-card-border-width:2px;
border-left: solid 3px $orange;
>.card-body {
background-color: transparent;
& ul>li {
color: $white;
&::marker {
color: $white;
}
}
}
}
}
.timeline::after {
background-color: $white;
}
.timeline-right::before {
border: 4px solid $orange;
border-width: 14px 14px 14px 0;
border-color: transparent $orange transparent transparent;
}
#timeline-progression .text-uppercase {
color: $blue;
}
}
/* Dark Mode - Timeline END */
/* Mobile Responsive Fixes */
@media screen and (max-width: 767px) {
.timeline {
>.card {
>.card-body {
& ul {
margin-bottom: 0px;
}
}
}
}
}
/* END timeline.scss */
<section class="timeline-container">
<div class="container pb-5">
<!--<h2>{{ headline }}</h2>-->
<div class="main-timeline">
<!--<div class="col-12 timeline-banner-start"><h3>{{ subhead }}</h3></div>-->
<div class="timeline timeline-right year-1 collapse show" id="year-1">
<div class="card">
<div class="card-body p-4">
<h3 class="timeline-section-header">Year 1</h3>
<div class="row">
<div class="col-12">
<ul>
<li><a href="#">List item or step to take</a></li>
<li><a href="#">List item or step to take</a></li>
<li><a href="#">List item or step to take</a></li>
<li><a href="#">List item or step to take</a></li>
<li><a href="#">List item or step to take</a></li>
<li><a href="#">List item or step to take</a></li>
<li><a href="#">List item or step to take</a></li>
<li><a href="#">List item or step to take</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="timeline timeline-right year-2 collapse show" id="year-2">
<div class="card">
<div class="card-body p-4">
<h3 class="timeline-section-header">Year 2</h3>
<div class="row">
<div class="col-12">
<ul>
<li><a href="#">List item or step to take</a></li>
<li><a href="#">List item or step to take</a></li>
<li><a href="#">List item or step to take</a></li>
<li><a href="#">List item or step to take</a></li>
<li><a href="#">List item or step to take</a></li>
<li><a href="#">List item or step to take</a></li>
<li><a href="#">List item or step to take</a></li>
<li><a href="#">List item or step to take</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="timeline timeline-right year-3 collapse show" id="year-3">
<div class="card">
<div class="card-body p-4">
<h3 class="timeline-section-header">Year 3</h3>
<div class="row">
<div class="col-12">
<ul>
<li><a href="#">List item or step to take</a></li>
<li><a href="#">List item or step to take</a></li>
<li><a href="#">List item or step to take</a></li>
<li><a href="#">List item or step to take</a></li>
<li><a href="#">List item or step to take</a></li>
<li><a href="#">List item or step to take</a></li>
<li><a href="#">List item or step to take</a></li>
<li><a href="#">List item or step to take</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="timeline timeline-right year-4 collapse show" id="year-4">
<div class="card">
<div class="card-body p-4">
<h3 class="timeline-section-header">Year 4</h3>
<div class="row">
<div class="col-12">
<ul>
<li><a href="#">List item or step to take</a></li>
<li><a href="#">List item or step to take</a></li>
<li><a href="#">List item or step to take</a></li>
<li><a href="#">List item or step to take</a></li>
<li><a href="#">List item or step to take</a></li>
<li><a href="#">List item or step to take</a></li>
<li><a href="#">List item or step to take</a></li>
<li class="orange-a11y">BIG EVENT<br /><a href="#">Apply for Graduation</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="timeline timeline-right default collapse" id="default">
<div class="card">
<div class="card-body p-4">
<h3 class="timeline-section-header">No results found!</h3>
<div class="row">
<div class="col-12">
<p>No topics selected. Please use the check boxes to the left to search for resources.</p>
</div>
</div>
</div>
</div>
</div>
<!--<div class="col-12 timeline-banner-end"><h3>{{ subhead }}</h3></div>-->
</div>
</div>
</section>