PolicyGenius - Style Guide

Expert Card

In rhoncus orci et ex fermentum

Proin aliquam tortor et aliquam dignissim.

 
.mod-expert-card
  .content
    img src='/images/expert.png'
    h4 In rhoncus orci et ex fermentum
    p Proin aliquam tortor et aliquam dignissim.
  form.form
    label Donec blandit diam
    .text-input.no-border
      textarea data-expand-card=''
    .hidden
      label Rhoncus
      .text-input.no-border
        input type='email'
      label.checkbox
        input type='checkbox' checked='checked'
        span Nulla maximus congue dolor sed vestibulum. Nunc mattis molestie libero.
    button.button.action type='submit' A consequat
 
css:
  .mod-expert-card {
    max-width: 320px;
  }
 
var $element = $('.mod-expert-card');
$element.find('[data-expand-card]').on('focus', function() {
  if (!$element.hasClass('expanded')) {
    $element.addClass('expanded')
    $element.find('.hidden').slideDown(500);
  }
});