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>
view raw h-panel-with-heading.html hosted with ❤ by GitHub
 

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>
view raw h-panel-with-image.html hosted with ❤ by GitHub
 

Linked panels

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

External Link

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.

Bing it

Internal Link

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.

Go to homepage
<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>
view raw v-panel-linked.html hosted with ❤ by GitHub

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