Section Headers

The section headers component provides: vertical padding (45px), a bottom border and positioning for buttons. Default styling in _section_header.scss for extra-small viewports; _section_header_small.scss targets small viewports and up (tablets +).

.row.section-header
  %h3 Heading text
  .section-actions
    %a.btn.btn-primary.btn-small{ href: "#" } Do something
    %a.btn.btn-primary.btn-small{ href: "#" } Do something else

Heading text

Paragraph text - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.

Paragraph text - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.

No border section

Paragraph text - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.

.row.section-header.section-header-no-border
  %h3 No border section
  .section-actions
    %a.btn.btn-primary.btn-small{ href: "#" } Do something
    %a.btn.btn-primary.btn-small{ href: "#" } Do something else