PolicyGenius - Style Guide

Member Card

Click 'edit' link to show expanded version of this card.

.mod-member-card.collapsed style='max-width: 480px'
  .mod-feature-image-card
    span.icon-close
    .image
      img.member src='images/female-silhouette.png'
    .details
      h4 Proin
      h5 In rhoncus orci et ex fermentum, ut euismod
      .actions
        a href='#' data-edit-member-card='' enim

  .form
    span.icon-close
    h4 Member Name
    .selectfield
      .field
        label for='select1' Nunc in pharetra velit
        .selectbox
          select id='select1'
            option Pellentesque
            option Suspendisse
    .checkbox-list
      .header
        h4 Nulla maximus congue dolor sed vestibulum. Nunc mattis molestie libero, sed vulputate.
      .content
        label.checkbox
          input type='checkbox'
          span Aliquam nisl nibh
        label.checkbox
          input type='checkbox'
          span Morbi quis dui consequat
        label.checkbox
          input type='checkbox'
          span Nam accumsan quam eu blandit
        label.checkbox
          input type='checkbox'
          span Suspendisse sed sem sagittis
        label.checkbox
          input type='checkbox' checked='checked'
          span Gravida
        label.checkbox
          input type='checkbox' checked='checked'
          span Suscipit imperdiet
        label.checkbox
          input type='checkbox' checked='checked'
          span Maecenas efficitur
        label.checkbox
          input type='checkbox'
          span Phasellus tellus
        label.checkbox
          input type='checkbox'
          span Vivamus dictum justo
        label.checkbox
          input type='checkbox'
          span Venenatis pulvinar
        label.checkbox
          input type='checkbox'
          span Fusce ullamcorper
        label.checkbox
          input type='checkbox'
          span Proin et ultrices
        label.checkbox
          input type='checkbox'
          span Phasellus luctus
        label.checkbox
          input type='checkbox'
          span Nunc mattis iaculis
    .textfield
      .field
        label for='age'
          .help.i-help
          span Proin at nunc at nisi lobortis bibendum
          .hint
            | Sed et lacinia ante. Donec id urna feugiat, sollicitudin ante in, lacinia metus.
        input type='text' id='age' value='quis augue'
    .toggle
      .header
        label Nullam metus velit, efficitur
      .content
        label.toggler
          input type='radio' name='example1'
          span.button Fusce
        label.toggler
          input type='radio' name='example1' checked='checked'
          span.button Nec
    button.button.action type='submit' Aenean sit amet pretium
$('a[data-edit-member-card]').on('click', function(e) {
  e.preventDefault();
  $(this).parents('.mod-member-card').removeClass('collapsed');
});