PolicyGenius - Style Guide

Toggle

Simple Toggle

.mod-example
  .toggle
    .header
      label Aenean
    .content
      label.toggler
        input type='radio' name='example1'
        span.button Proin
      label.toggler
        input type='radio' name='example1'
        span.button Quisque

Toggle with Link

.mod-example
  .toggle
    .header
      label In rhoncus orci et ex fermentum, ut euismod diam tincidunt.
    .content
      label.toggler
        input type='radio' name='coverage'
        span.button Leo
      label.toggler
        input type='radio' name='coverage'
        span.button Ut
    .footer
      a href='#' Nunc in pharetra velit.

With help text

.mod-example
  .toggle
    .header
      label
        span Suspendisse molestie vel sapien at posuere phasellus.
        .sublabel Phasellus tellus augue, maximus a viverra.
    .content
      label.toggler
        input type='radio' name='example5'
        span.button Leo
      label.toggler
        input type='radio' name='example5'
        span.button Ut

With Tooltip

.mod-example
  .toggle
    .header
      .help.i-help
      label Nulla maximus congue dolor
    .content
      label.toggler
        input type='radio' name='example2'
        span.button Leo
      label.toggler
        input type='radio' name='example2'
        span.button Ut

Three Togglers

.mod-example
  .toggle
    .header
      .help.i-help
      label  Nunc mattis molestie libero, sed vulputate ipsum aliquet vitae. Proin pharetra felis.
    .content
      label.toggler
        input type='radio' checked='checked' name='example3'
        span.button Morbi quis
      label.toggler
        input type='radio' name='example3'
        span.button Consectetur massa nec
      label.toggler
        input type='radio' name='example3'
        span.button Suspendisse sed

Group

.mod-example
  .toggle.group
    label.toggler
      input type='radio' name='group'
      span.button Consequat
    label.toggler
      input type='radio' name='group'
      span.button Augue
    label.toggler
      input type='radio' name='group'
      span.button Efficitur

Group with togglers as links

.mod-example
  .toggle.group
    a.toggler href='#'
      span.button.active Libero
    a.toggler href='#'
      span.button Ipsum
br
.mod-example
  .toggle.group
    a.toggler href='#'
      span.button.active Consequat
    a.toggler href='#'
      span.button Augue
    a.toggler href='#'
      span.button Efficitur

Focus state

.mod-example
  .toggle.focused
    .header
      label Aenean
    .content
      label.toggler
        input type='radio' name='example1'
        span.button Proin
      label.toggler
        input type='radio' name='example1'
        span.button Quisque

No border

.mod-example style='background: #00A4A5; padding: 24px;'
  .toggle.no-border
    .header
      label Aenean
    .content
      label.toggler
        input type='radio' name='example1'
        span.button Proin
      label.toggler
        input type='radio' name='example1'
        span.button Quisque