Section
Static example
A bifrost-styled section is basically a rounded (.bf-radius) box with base-3
background (.bfc-base-3-bg) and a drop shadow (.bf-shadow).
The .bf-section-header applies 16px padding, font weight and a min-height.
If your section is nested inside .bf-content or .bf-elements, you will
already have a 14px font-size. If not, you can use .bf-medium.
<section class="bf-radius bfc-base-3-bg bf-shadow bf-medium"> <div class="bf-section-header">Section header</div> <div style="padding: 16px">Section content</div> </section><section class="bf-radius bfc-base-3-bg bf-shadow bf-medium"> <div class="bf-section-header">Section header</div> <div style="padding: 16px">Section content</div> </section>
Link title
You can wrap the header can be a .bf-neutral-link link (or <button>)
Supply an arrow icon with .bf-box-arrow to get a slight animation on hover,
and wrap the rest of the section-header content in a separate element:
<section class="bf-radius bfc-base-3-bg bf-shadow"> <a href="#path" class="bf-neutral-link bf-section-header"> <div>Link header</div> <i class="fa-solid fa-arrow-right bf-box-arrow"></i> </a> <div style="padding: 16px">Section content</div> </section><section class="bf-radius bfc-base-3-bg bf-shadow"> <a href="#path" class="bf-neutral-link bf-section-header"> <div>Link header</div> <i class="fa-solid fa-arrow-right bf-box-arrow"></i> </a> <div style="padding: 16px">Section content</div> </section>
Link section
Or the entire section can be a link (or <button>):
<a href="#path" class="bf-neutral-link bf-radius bfc-base-3-bg bf-shadow"> <div class="bf-section-header"> <div>Link section</div> <i class="fa-solid fa-arrow-right bf-box-arrow"></i> </div> <div style="padding: 16px">Section content also clickable</div> </a><a href="#path" class="bf-neutral-link bf-radius bfc-base-3-bg bf-shadow"> <div class="bf-section-header"> <div>Link section</div> <i class="fa-solid fa-arrow-right bf-box-arrow"></i> </div> <div style="padding: 16px">Section content also clickable</div> </a>