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.
In the content section, add a button to indicate to a user that the panel is clickable..
<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&id=5759d9450a2a52c31f5ace09a087211e&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)