Source: dist/css/acc_boot.css, line 8576

5.4.5 Page Break with Headline

This component represents a page break with a headline. It can be used to visually separate sections of a page or document. These Page Breaks are semanticaly an h2 with decorations. This shouldn't be used with other levels of Headlines.

Example

Default styling

asdf fasdfa sd asdf s adffas dfsdasdf Need Help

NOTE:

These are styled heavier then a normal h2 and there are for eaiser understanding that this is a sperator of major content areas.

<h2 class="c_primary-n1 flex flex_column flex_row:md font_display font_medium m_0 p-y_5:md p-y_4">
  <span class="flex_auto flex_shrink grid">
    <span class="br-t_1 br-tl_radius br_inherit br_solid self_center"></span>
  </span>
  <span class="flex_50 flex_grow lh_1 p-x_4 p-x_5:lg text_center">asdf fasdfa sd asdf s adffas dfsdasdf
    Need Help
  </span>
  <span class="flex_auto flex_shrink grid">
    <span class="br_primary-1 br-tl_radius br-t_1 br_solid br_inherit self_center"></span>
  </span>
</h2>

<h2 class="c_primary-n1 flex flex_column flex_row:md font_display font_medium m_0 p-y_5:md p-y_4">
  <span class="flex_auto flex_shrink grid">
    <span class="br-t_1 br-tl_radius br_inherit br_solid self_center"></span>
  </span>
  <span class="flex_50 flex_grow lh_1 p-x_4 p-x_5:lg text_center">asdf fasdfa sd asdf s adffas dfsdasdf
    Need Help
  </span>
  <span class="flex_auto flex_shrink grid">
    <span class="br_primary-1 br-tl_radius br-t_1 br_solid br_inherit self_center"></span>
  </span>
</h2>

Code Sample

Copy Code