PolicyGenius - Style Guide

Radio Buttons List

 
.mod-example
  .toggle-input
    label Aenean ac bibendum
    .radio-buttons
      label.radio
        input type='radio' name='radios'
        span Phasellus
      label.radio
        input type='radio' name='radios'
        span Laoreet quam

Multiple radio buttons list

 
.mod-example
  .multiple
    .toggle-input
      label Curabitur
      .radio-buttons
        label.radio
          input type='radio' name='radios'
          span Hac
        label.radio
          input type='radio' name='radios'
          span Diam
    .toggle-input
      label Tortor consectetur
      .radio-buttons
        label.radio
          input type='radio' name='radios'
          span Sed
        label.radio
          input type='radio' name='radios'
          span Ut

Grouped

Suspendisse
Molestie vel
Nulla maximus
.mod-radio-group style='max-width: 600px'
  .header.hidden-for-small-only
    .title Suspendisse
    .value Molestie vel
    .value Nulla maximus
  .content
    .toggle-input
      label Nunc mattis molestie libero
      .radio-buttons
        label.radio
          input type='radio' name='radios1'
          span
          strong Vel sapien
        label.radio
          input type='radio' name='radios1'
          span
          strong Maximus congue dolor
    .toggle-input
      label Sed vulputate ipsum aliquet
      .radio-buttons
        label.radio
          input type='radio' name='radios2'
          span
          strong Vel sapien
        label.radio
          input type='radio' name='radios2'
          span
          strong Maximus congue dolor
    .toggle-input
      label Consequat augue
      .radio-buttons
        label.radio
          input type='radio' name='radios3'
          span
          strong Vel sapien
        label.radio
          input type='radio' name='radios3'
          span
          strong Maximus congue dolor
    .toggle-input
      label Aliquam nisl nibh, lacinia
      .radio-buttons
        label.radio
          input type='radio' name='radios4'
          span
          strong Proin aliquam
        label.radio
          input type='radio' name='radios4'
          span
          strong Suspendisse molestie vel
    .toggle-input
      label Vulputate ipsum aliquet
      .radio-buttons
        label.radio
          input type='radio' name='radios5'
          span
          strong Vel sapien
        label.radio
          input type='radio' name='radios5'
          span
          strong Maximus congue dolor
    .toggle-input
      label Consequat augue
      .radio-buttons
        label.radio
          input type='radio' name='radios6'
          span
          strong Vel sapien
        label.radio
          input type='radio' name='radios6'
          span
          strong Maximus congue dolor

Focus state

 
.mod-example
  .toggle-input.focused
    label Etiam malesuada quis
    .radio-buttons
      label.radio
        input type='radio' name='radios'
        span Aenean
      label.radio
        input type='radio' name='radios'
        span Mauris ex mauris

No-border version

 
.mod-example style='background: #00A4A5; padding: 24px;'
  .toggle-input.no-border
    label Etiam malesuada quis
    .radio-buttons
      label.radio
        input type='radio' name='radios'
        span Aenean
      label.radio
        input type='radio' name='radios'
        span Mauris ex mauris