PolicyGenius - Style Guide

Choice Cards

.mod-choice-cards
  input type='radio' id='choice1' name='choice' value='1' checked='checked'
  label.card for='choice1'
    .radio.single
      span
    .content
      h4 Phasellus nisi
      p Sed lobortis et quam at rhoncus
    img src='images/Apply-online.png'

  input type='radio' id='choice2' name='choice' value='2'
  label.card for='choice2'
    .radio.single
      span
    .content
      h4 Donec lobortis dui
      p Mauris tristique efficitur enim
    img src='images/Call-an-expert.png'

  input type='radio' id='choice3' name='choice' value='3'
  label.card for='choice3'
    .radio.single
      span
    .content
      h4 Donec finibus convallis
      p Nam metus massa, tempor vel tortor
    img src='images/We-call-you.png'

css:
  .mod-choice-cards {
    max-width: 720px;
    padding: 36px;
    background: #FBFBFB;
  }
.mod-choice-cards.sectioned
  input type='radio' id='choice5' name='choice2' value='5' checked='checked'
  label.card for='choice5'
    .radio.single
      span
    .content
      h4 Pellentesque habitant morbi tristique
      .sections
        .item
          span Nunc mattis diam
          .value $100
          span
            ' nulla
        .item
          span Risus
          .value 10
          span consectetur

  input type='radio' id='choice6' name='choice2' value='6'
  label.card for='choice6'
    .radio.single
      span
    .content
      h4 Pellentesque habitant morbi tristique senectus
      .sections
        .item
          span Nunc mattis diam
          .value $100
          span
            ' nulla
        .item
          span Risus
          .value 10
          span consectetur