Timelines - Clay

Add the timeline-increment class to the element you want the timeline to be aligned to. The element must be positioned relative. For the example below, we place it inside the panel-heading element. This vertically centers the icon and label relative to the panel-heading.

The icon can be any size as long as it is wrapped with the timeline-increment class. For larger icons, the spacing between the content and increment (Timeline Spacing) must be adjusted to accommodate it.

Single Collapsible Panel

In organic dripper so, body, robust medium pumpkin spice cup, in aged dripper latte extra cup white. And viennese redeye carajillo, beans, mug viennese, carajillo id breve decaffeinated americano crema chicory whipped arabica variety aged robusta. Affogato lungo eu, cultivar at, aged breve and blue mountain roast breve americano aged. Sugar acerbic sweet variety aged café au lait chicory, java, single shot percolator aromatic brewed wings, a, sugar, body, aftertaste organic barista espresso dripper to go. Flavour to go strong steamed mazagran trifecta decaffeinated percolator crema, aged americano rich chicory frappuccino foam white.
Single Collapsible Panel

In organic dripper so, body, robust medium pumpkin spice cup, in aged dripper latte extra cup white. And viennese redeye carajillo, beans, mug viennese, carajillo id breve decaffeinated americano crema chicory whipped arabica variety aged robusta. Affogato lungo eu, cultivar at, aged breve and blue mountain roast breve americano aged. Sugar acerbic sweet variety aged café au lait chicory, java, single shot percolator aromatic brewed wings, a, sugar, body, aftertaste organic barista espresso dripper to go. Flavour to go strong steamed mazagran trifecta decaffeinated percolator crema, aged americano rich chicory frappuccino foam white.
Single Collapsible Panel

In organic dripper so, body, robust medium pumpkin spice cup, in aged dripper latte extra cup white. And viennese redeye carajillo, beans, mug viennese, carajillo id breve decaffeinated americano crema chicory whipped arabica variety aged robusta. Affogato lungo eu, cultivar at, aged breve and blue mountain roast breve americano aged. Sugar acerbic sweet variety aged café au lait chicory, java, single shot percolator aromatic brewed wings, a, sugar, body, aftertaste organic barista espresso dripper to go. Flavour to go strong steamed mazagran trifecta decaffeinated percolator crema, aged americano rich chicory frappuccino foam white.
The icon can be any size as long as it is wrapped inside timeline-increment. For larger icons, the spacing between the content and label must be adjusted to accomodate it. The spacing can be adjusted by modifying the $timeline-spacing sass variable, or manually overriding in your css.

<ul class="timeline">
	<li class="timeline-item">
		<div class="panel panel-secondary">
			<a aria-controls="panelCcollapse000" aria-expanded="false" class="collapsed panel-header panel-header-link" data-toggle="collapse" href="#panelCollapse000" id="heading000" role="tab">
				<span class="panel-title">Single Collapsible Panel</span>
				<div class="timeline-increment">
					<span class="timeline-icon"></span>
				</div>
			</a>
			<div aria-labelledby="heading000" class="collapse panel-collapse" id="panelCollapse000" role="tabpanel">
				<div class="panel-body">
					In organic dripper so, body, robust medium pumpkin spice cup, in aged dripper latte extra cup white. And viennese redeye carajillo, beans, mug viennese, carajillo id breve decaffeinated americano crema chicory whipped arabica variety aged robusta. Affogato lungo eu, cultivar at, aged breve and blue mountain roast breve americano aged. Sugar acerbic sweet variety aged café au lait chicory, java, single shot percolator aromatic brewed wings, a, sugar, body, aftertaste organic barista espresso dripper to go. Flavour to go strong steamed mazagran trifecta decaffeinated percolator crema, aged americano rich chicory frappuccino foam white.
				</div>
			</div>
		</div>
	</li>
	<li class="timeline-item">
		<div class="panel panel-secondary">
			<a aria-controls="panelCollapse001" aria-expanded="false" class="collapsed panel-header panel-header-link" data-toggle="collapse" href="#panelCollapse001" id="heading001" role="tab">
				<span class="panel-title">Single Collapsible Panel</span>
				<div class="timeline-increment">
					<span class="timeline-icon"></span>
				</div>
			</a>
			<div aria-labelledby="heading001" class="collapse panel-collapse" id="panelCollapse001" role="tabpanel">
				<div class="panel-body">
					In organic dripper so, body, robust medium pumpkin spice cup, in aged dripper latte extra cup white. And viennese redeye carajillo, beans, mug viennese, carajillo id breve decaffeinated americano crema chicory whipped arabica variety aged robusta. Affogato lungo eu, cultivar at, aged breve and blue mountain roast breve americano aged. Sugar acerbic sweet variety aged café au lait chicory, java, single shot percolator aromatic brewed wings, a, sugar, body, aftertaste organic barista espresso dripper to go. Flavour to go strong steamed mazagran trifecta decaffeinated percolator crema, aged americano rich chicory frappuccino foam white.
				</div>
			</div>
		</div>
	</li>
	<li class="timeline-item">
		<div class="panel panel-secondary">
			<a aria-controls="panelCollapse002" aria-expanded="false" class="collapsed panel-header panel-header-link" data-toggle="collapse" href="#panelCollapse002" id="heading002" role="tab">
				<span class="panel-title">Single Collapsible Panel</span>
				<div class="timeline-increment">
					<span class="timeline-icon"></span>
				</div>
			</a>
			<div aria-labelledby="heading002" class="collapse panel-collapse" id="panelCollapse002" role="tabpanel">
				<div class="panel-body">
					In organic dripper so, body, robust medium pumpkin spice cup, in aged dripper latte extra cup white. And viennese redeye carajillo, beans, mug viennese, carajillo id breve decaffeinated americano crema chicory whipped arabica variety aged robusta. Affogato lungo eu, cultivar at, aged breve and blue mountain roast breve americano aged. Sugar acerbic sweet variety aged café au lait chicory, java, single shot percolator aromatic brewed wings, a, sugar, body, aftertaste organic barista espresso dripper to go. Flavour to go strong steamed mazagran trifecta decaffeinated percolator crema, aged americano rich chicory frappuccino foam white.
				</div>
			</div>
		</div>
	</li>
	<li class="timeline-item">
		<div class="panel panel-secondary">
			<div class="timeline-increment">
				<span class="timeline-icon"></span>
			</div>
			<div class="panel-body">The icon can be any size as long as it is wrapped inside timeline-increment. For larger icons, the spacing between the content and label must be adjusted to accomodate it. The spacing can be adjusted by modifying the $timeline-spacing sass variable, or manually overriding in your css.</div>
		</div>
	</li>
</ul>

Timeline Increment with Text

Place text inside a timeline-increment element by wrapping the text with <span class="timeline-increment-text"></span>

Jan 1

The icon can be any size as long as it is wrapped inside timeline-increment. For larger icons, the spacing between the content and label must be adjusted to accommodate it. The spacing can be adjusted by modifying the $timeline-spacing sass variable, or manually overriding it in your CSS.
Apr 22

The icon can be any size as long as it is wrapped inside timeline-increment. For larger icons, the spacing between the content and label must be adjusted to accommodate it. The spacing can be adjusted by modifying the $timeline-spacing sass variable, or manually overriding it in your CSS.
May 29

The icon can be any size as long as it is wrapped inside timeline-increment. For larger icons, the spacing between the content and label must be adjusted to accommodate it. The spacing can be adjusted by modifying the $timeline-spacing sass variable, or manually overriding it in your CSS.
Dec 12

The icon can be any size as long as it is wrapped inside timeline-increment. For larger icons, the spacing between the content and label must be adjusted to accommodate it. The spacing can be adjusted by modifying the $timeline-spacing sass variable, or manually overriding it in your CSS.

<ul class="timeline">
	<li class="timeline-item">
		<div class="panel panel-secondary">
			<div class="timeline-increment">
				<span class="timeline-increment-text">Jan 1</span>
			</div>
			<div class="panel-body">The icon can be any size as long as it is wrapped inside timeline-increment. For larger icons, the spacing between the content and label must be adjusted to accommodate it. The spacing can be adjusted by modifying the $timeline-spacing sass variable, or manually overriding it in your CSS.</div>
		</div>
	</li>
	<li class="timeline-item">
		<div class="panel panel-secondary">
			<div class="timeline-increment">
				<span class="timeline-increment-text">Apr 22</span>
			</div>
			<div class="panel-body">The icon can be any size as long as it is wrapped inside timeline-increment. For larger icons, the spacing between the content and label must be adjusted to accommodate it. The spacing can be adjusted by modifying the $timeline-spacing sass variable, or manually overriding it in your CSS.</div>
		</div>
	</li>
	<li class="timeline-item">
		<div class="panel panel-secondary">
			<div class="timeline-increment">
				<span class="timeline-increment-text">May 29</span>
			</div>
			<div class="panel-body">The icon can be any size as long as it is wrapped inside timeline-increment. For larger icons, the spacing between the content and label must be adjusted to accommodate it. The spacing can be adjusted by modifying the $timeline-spacing sass variable, or manually overriding it in your CSS.</div>
		</div>
	</li>
	<li class="timeline-item">
		<div class="panel panel-secondary">
			<div class="timeline-increment">
				<span class="timeline-increment-text">Dec 12</span>
			</div>
			<div class="panel-body">The icon can be any size as long as it is wrapped inside timeline-increment. For larger icons, the spacing between the content and label must be adjusted to accommodate it. The spacing can be adjusted by modifying the $timeline-spacing sass variable, or manually overriding it in your CSS.</div>
		</div>
	</li>
</ul>

Timeline Right

Align increments to the right with the timeline-right class.

Panel Text #1
Panel Text #2
Panel Text #3

<ul class="timeline timeline-right">
	<li class="timeline-item">
		<div class="panel panel-secondary">
			<div class="panel-body">
				Panel Text #1
				<div class="timeline-increment">
					<svg class="lexicon-icon lexicon-icon-radio-button" focusable="false" role="presentation">
						<use href="/images/icons/icons.svg#radio-button" />
					</svg>
				</div>
			</div>
		</div>
	</li>
	<li class="timeline-item">
		<div class="panel panel-secondary">
			<div class="panel-body">
				Panel Text #2
				<div class="timeline-increment">
					<svg class="lexicon-icon lexicon-icon-remove-role" focusable="false" role="presentation">
						<use href="/images/icons/icons.svg#remove-role" />
					</svg>
				</div>
			</div>
		</div>
	</li>
	<li class="timeline-item">
		<div class="panel panel-secondary">
			<div class="panel-body">
				Panel Text #3
				<div class="timeline-increment">
					<svg class="lexicon-icon lexicon-icon-repository" focusable="false" role="presentation">
						<use href="/images/icons/icons.svg#repository" />
					</svg>
				</div>
			</div>
		</div>
	</li>
</ul>

Timeline Center

Add the timeline-center class to center your timeline. It displays items on the right by default. To display items on the left, add the timeline-item-reverse class to a timeline item.

Single Collapsible Panel

LR

1 hour ago

In organic dripper so, body, robust medium pumpkin spice cup, in aged dripper latte extra cup white. And viennese redeye carajillo, beans, mug viennese, carajillo id breve decaffeinated americano crema chicory whipped arabica variety aged robusta. Affogato lungo eu, cultivar at, aged breve and blue mountain roast breve americano aged. Sugar acerbic sweet variety aged café au lait chicory, java, single shot percolator aromatic brewed wings, a, sugar, body, aftertaste organic barista espresso dripper to go. Flavour to go strong steamed mazagran trifecta decaffeinated percolator crema, aged americano rich chicory frappuccino foam white.
Panel Text #2

LR

1 hour ago
Panel Text #3

LR

1 hour ago

<ul class="timeline timeline-center">
	<li class="timeline-item">
		<div class="panel panel-secondary">
			<a aria-controls="panelCollapseTimelineCenter0" aria-expanded="false" class="collapsed panel-header panel-header-link" data-toggle="collapse" href="#panelCollapseTimelineCenter0" id="headingTimelineCenter0" role="tab">
				<span class="panel-title">Single Collapsible Panel</span>
				<div class="timeline-increment">
					<div class="rounded-circle sticker sticker-danger">
						<span>LR</span>
					</div>
				</div>
				<div class="timeline-item-label">1 hour ago</div>
			</a>
			<div aria-labelledby="headingTimelineCenter0" class="collapse panel-collapse" id="panelCollapseTimelineCenter0" role="tabpanel">
				<div class="panel-body">
					In organic dripper so, body, robust medium pumpkin spice cup, in aged dripper latte extra cup white. And viennese redeye carajillo, beans, mug viennese, carajillo id breve decaffeinated americano crema chicory whipped arabica variety aged robusta. Affogato lungo eu, cultivar at, aged breve and blue mountain roast breve americano aged. Sugar acerbic sweet variety aged café au lait chicory, java, single shot percolator aromatic brewed wings, a, sugar, body, aftertaste organic barista espresso dripper to go. Flavour to go strong steamed mazagran trifecta decaffeinated percolator crema, aged americano rich chicory frappuccino foam white.
				</div>
			</div>
		</div>
	</li>
	<li class="timeline-item timeline-item-reverse">
		<div class="panel panel-secondary">
			<div class="panel-body">
				Panel Text #2
				<div class="timeline-increment">
					<div class="rounded-circle sticker sticker-danger">
						<span>LR</span>
					</div>
				</div>
				<div class="timeline-item-label">1 hour ago</div>
			</div>
		</div>
	</li>
	<li class="timeline-item timeline-item-reverse">
		<div class="panel panel-secondary">
			<div class="panel-body">
				Panel Text #3
				<div class="timeline-increment">
					<div class="rounded-circle sticker sticker-danger">
						<span>LR</span>
					</div>
				</div>
				<div class="timeline-item-label">1 hour ago</div>
			</div>
		</div>
	</li>
</ul>

Timeline Even

Alternate every other timeline item on the left with the timeline-even class.

Panel Text #1

LR

1 hour ago
Panel Text #2

LR

1 hour ago
Panel Text #3

LR

1 hour ago

<ul class="timeline timeline-center timeline-even">
	<li class="timeline-item">
		<div class="panel panel-secondary">
			<div class="panel-body">
				Panel Text #1
				<div class="timeline-increment">
					<div class="rounded-circle sticker sticker-danger">
						<span>LR</span>
					</div>
				</div>
				<div class="timeline-item-label">1 hour ago</div>
			</div>
		</div>
	</li>
	<li class="timeline-item">
		<div class="panel panel-secondary">
			<div class="panel-body">
				Panel Text #2
				<div class="timeline-increment">
					<div class="rounded-circle sticker sticker-danger">
						<span>LR</span>
					</div>
				</div>
				<div class="timeline-item-label">1 hour ago</div>
			</div>
		</div>
	</li>
	<li class="timeline-item">
		<div class="panel panel-secondary">
			<div class="panel-body">
				Panel Text #3
				<div class="timeline-increment">
					<div class="rounded-circle sticker sticker-danger">
						<span>LR</span>
					</div>
				</div>
				<div class="timeline-item-label">1 hour ago</div>
			</div>
		</div>
	</li>
</ul>

Timeline Odd

Alternate every other timeline item on the right with the timeline-odd class.

Panel Text #1

LR

1 hour ago
Panel Text #2

LR

1 hour ago
Panel Text #3

LR

1 hour ago

<ul class="timeline timeline-center timeline-odd">
	<li class="timeline-item">
		<div class="panel panel-secondary">
			<div class="panel-body">
				Panel Text #1
				<div class="timeline-increment">
					<div class="rounded-circle sticker sticker-danger">
						<span>LR</span>
					</div>
				</div>
				<div class="timeline-item-label">1 hour ago</div>
			</div>
		</div>
	</li>
	<li class="timeline-item">
		<div class="panel panel-secondary">
			<div class="panel-body">
				Panel Text #2
				<div class="timeline-increment">
					<div class="rounded-circle sticker sticker-danger">
						<span>LR</span>
					</div>
				</div>
				<div class="timeline-item-label">1 hour ago</div>
			</div>
		</div>
	</li>
	<li class="timeline-item">
		<div class="panel panel-secondary">
			<div class="panel-body">
				Panel Text #3
				<div class="timeline-increment">
					<div class="rounded-circle sticker sticker-danger">
						<span>LR</span>
					</div>
				</div>
				<div class="timeline-item-label">1 hour ago</div>
			</div>
		</div>
	</li>
</ul>

Timeline Right XS Only

Align the timeline to the right at screen widths 767px and below with the timeline-right-xs-only class.

Panel Text #1

LR

1 hour ago
Panel Text #2

LR

2 hours ago
Panel Text #3

LR

3 hours ago

<ul class="timeline timeline-center timeline-even timeline-right-xs-only">
	<li class="timeline-item">
		<div class="panel panel-default">
			<div class="panel-body">
				Panel Text #1
				<div class="timeline-increment">
					<div class="rounded-circle sticker sticker-danger">
						<span>LR</span>
					</div>
				</div>
				<div class="timeline-item-label">1 hour ago</div>
			</div>
		</div>
	</li>
	<li class="timeline-item">
		<div class="panel panel-secondary">
			<div class="panel-body">
				Panel Text #2
				<div class="timeline-increment">
					<div class="rounded-circle sticker sticker-danger">
						<span>LR</span>
					</div>
				</div>
				<div class="timeline-item-label">2 hours ago</div>
			</div>
		</div>
	</li>
	<li class="timeline-item">
		<div class="panel panel-secondary">
			<div class="panel-body">
				Panel Text #3
				<div class="timeline-increment">
					<div class="rounded-circle sticker sticker-danger">
						<span>LR</span>
					</div>
				</div>
				<div class="timeline-item-label">3 hours ago</div>
			</div>
		</div>
	</li>
</ul>

Timeline Spacing

Use @include timeline-spacing($outer-spacing, $inner-spacing, $item-padding-y) to adjust the spacing around the timeline. The $item-padding-y argument is not required. It defaults to 10px.

$outer-spacing sets padding-left on .timeline and padding-right on .timeline-right.

$inner-spacing sets the space between the .timeline-item:before pseudo element and .panel element and is used to calculate the space between the .timeline-item:before pseudo element and .timeline-item-label.

.timeline-spacing-xl {
    @include timeline-spacing(25px, 50px);
}

Single Collapsible Panel

LR

1 hour ago

In organic dripper so, body, robust medium pumpkin spice cup, in aged dripper latte extra cup white. And viennese redeye carajillo, beans, mug viennese, carajillo id breve decaffeinated americano crema chicory whipped arabica variety aged robusta. Affogato lungo eu, cultivar at, aged breve and blue mountain roast breve americano aged. Sugar acerbic sweet variety aged café au lait chicory, java, single shot percolator aromatic brewed wings, a, sugar, body, aftertaste organic barista espresso dripper to go. Flavour to go strong steamed mazagran trifecta decaffeinated percolator crema, aged americano rich chicory frappuccino foam white.
Panel Text #2

LR

1 hour ago
Panel Text #3

LR

1 hour ago

<ul class="timeline timeline-center timeline-spacing-xl">
	<li class="timeline-item">
		<div class="panel panel-secondary">
			<a aria-controls="panelCollapseTimelineSpacing0" aria-expanded="false" class="collapsed panel-header panel-header-link" data-toggle="collapse" href="#panelCollapseTimelineSpacing0" id="headingTimelineSpacing0" role="tab">
				<span class="panel-title">Single Collapsible Panel</span>
				<div class="timeline-increment">
					<div class="rounded-circle sticker sticker-danger sticker-xl">
						<span>LR</span>
					</div>
				</div>
				<div class="timeline-item-label">1 hour ago</div>
			</a>
			<div aria-labelledby="headingTimelineSpacing0" class="collapse panel-collapse" id="panelCollapseTimelineSpacing0" role="tabpanel">
				<div class="panel-body">
					In organic dripper so, body, robust medium pumpkin spice cup, in aged dripper latte extra cup white. And viennese redeye carajillo, beans, mug viennese, carajillo id breve decaffeinated americano crema chicory whipped arabica variety aged robusta. Affogato lungo eu, cultivar at, aged breve and blue mountain roast breve americano aged. Sugar acerbic sweet variety aged café au lait chicory, java, single shot percolator aromatic brewed wings, a, sugar, body, aftertaste organic barista espresso dripper to go. Flavour to go strong steamed mazagran trifecta decaffeinated percolator crema, aged americano rich chicory frappuccino foam white.
				</div>
			</div>
		</div>
	</li>
	<li class="timeline-item timeline-item-reverse">
		<div class="panel panel-secondary">
			<div class="panel-body">
				Panel Text #2
				<div class="timeline-increment">
					<div class="rounded-circle sticker sticker-danger sticker-xl">
						<span>LR</span>
					</div>
				</div>
				<div class="timeline-item-label">1 hour ago</div>
			</div>
		</div>
	</li>
	<li class="timeline-item timeline-item-reverse">
		<div class="panel panel-secondary">
			<div class="panel-body">
				Panel Text #3
				<div class="timeline-increment">
					<div class="rounded-circle sticker sticker-danger sticker-xl">
						<span>LR</span>
					</div>
				</div>
				<div class="timeline-item-label">1 hour ago</div>
			</div>
		</div>
	</li>
</ul>