Horizontal panels

 

With Heading

Options are available in Cascade to change the heading colour if desired.

Panel Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae lectus mauris. Curabitur lacinia vel mauris ac bibendum. Praesent efficitur nunc lacus, vel vehicula lectus tincidunt non.

Panel heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae lectus mauris. Curabitur lacinia vel mauris ac bibendum. Praesent efficitur nunc lacus, vel vehicula lectus tincidunt non.

<div class="row">
<div class="col-xl-6 mb-2">
<div class="au-panel horizontal-panel sloth">
<div class="panel-inner">
<div class="panel-heading default">
<h3>Panel Heading</h3>
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae lectus mauris. Curabitur lacinia vel mauris ac bibendum. Praesent efficitur nunc lacus, vel vehicula lectus tincidunt non.</p>
</div>
</div>
</div>
</div>
<div class="col-xl-6 mb-2">
<div class="au-panel horizontal-panel sloth">
<div class="panel-inner">
<div class="panel-heading default">
<h3>Panel heading</h3>
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae lectus mauris. Curabitur lacinia vel mauris ac bibendum. Praesent efficitur nunc lacus, vel vehicula lectus tincidunt non.</p>
</div>
</div>
</div>
</div>
</div>
 

With image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae lectus mauris. Curabitur lacinia vel mauris ac bibendum. Praesent efficitur nunc lacus, vel vehicula lectus tincidunt non.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae lectus mauris. Curabitur lacinia vel mauris ac bibendum. Praesent efficitur nunc lacus, vel vehicula lectus tincidunt non.

<div class="row">
<div class="col-xl-6 mb-2">
<div class="au-panel horizontal-panel sloth">
<div class="panel-inner">
<div class="panel-heading sloth" style="background-position: center center; display: flex; background-image: url('https://dam.athabascau.ca/GF7L4P38/at/ws7z3k47mnn2bngv8pk76t/woman-university?auto=webp');"></div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae lectus mauris. Curabitur lacinia vel mauris ac bibendum. Praesent efficitur nunc lacus, vel vehicula lectus tincidunt non.</p>
</div>
</div>
</div>
</div>
<div class="col-xl-6 mb-2">
<div class="au-panel horizontal-panel sloth">
<div class="panel-inner">
<div class="panel-heading sloth" style="background-position: center center; display: flex; background-image: url('https://dam.athabascau.ca/GF7L4P38/at/wj7b4695bsbpbr3khprx6gf/man-university');"></div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae lectus mauris. Curabitur lacinia vel mauris ac bibendum. Praesent efficitur nunc lacus, vel vehicula lectus tincidunt non.</p>
</div>
</div>
</div>
</div>
</div>
 

Linked panels

Options are available in Cascade to make the whole panel a link.

<div class="row">
<div class="col-xl-6 mb-2">
<div class="au-panel horizontal-panel sloth">
<a class="panel-inner" href="https://www.bing.com" target="_blank" rel="noopener">
<div class="panel-heading default">
<h3>External Link</h3>
</div>
<div class="panel-body">
<p>Lorem sit rutrum massa bibendum morbi a tortor tristique maximus metus morbi cursus metus accumsan placerat nulla condimentum id fusce sit phasellus tortor suspendisse tortor.</p>
<span class="btn btn-circle-icon external">Bing it</span>
</div>
</a>
</div>
</div>
<div class="col-xl-6 mb-2">
<div class="au-panel horizontal-panel sloth">
<a class="panel-inner" href="/entity/open.act?type=page&amp;id=5759d9450a2a52c31f5ace09a087211e&amp;confId=575315600a2a52c31f5ace09109e7e4b" target="_parent">
<div class="panel-heading default">
<h3>Internal Link</h3>
</div>
<div class="panel-body">
<p>Lorem sit rutrum massa bibendum morbi a tortor tristique maximus metus morbi cursus metus accumsan placerat nulla condimentum id fusce sit phasellus tortor suspendisse tortor.</p>
<span class="btn btn-circle-icon external">Go to homepage</span>
</div>
</a>
</div>
</div>
</div>

Updated August 20, 2024 by Digital & Web Operations (web_services@athabascau.ca)