dc-widget-css.html

<style>
  .democracy_club_embed{font-size:19px;color:#58595b}.democracy_club_embed .card{border-radius:0 3px;clear:both;padding:20px;background:#fff;box-shadow:0 4px 8px 0 rgba(0,0,0,0.1),0 3px 10px 0 rgba(0,0,0,0.09)}.democracy_club_embed .dc_logo{text-decoration:none;font-size:14px}.democracy_club_embed .dc_logo img{max-width:120px;vertical-align:middle}.democracy_club_embed button{background-color:#00AEEF;border:0;padding:0.4em 0.6em;margin:0.5em 0;font-size:1em;color:#FFF;border-bottom:3px solid #0089bc}.democracy_club_embed button:hover{background-color:#009bd6}.democracy_club_embed .link-button{display:inline-block;border:2px solid #00AEEF;color:#00AEEF;font-size:1rem;font-family:Avenir,sans-serif;margin:0;padding:1rem 2rem 1.0625rem 2rem;text-decoration:none}.democracy_club_embed .link-button:hover{background-color:#f9fdff}.democracy_club_embed .form-group{width:100%;clear:both}.democracy_club_embed .form-control{font-size:19px;line-height:1.31;border:2px solid #0b0c0c;padding:5px 4px 4px}.democracy_club_embed form>.form-group+.form-group{margin-top:1.5em}.democracy_club_embed input[type="search"],.democracy_club_embed input[type="text"]{-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}.democracy_club_embed input:focus{outline:3px solid #ffbf47}.democracy_club_embed select:focus{outline:3px solid #ffbf47}.democracy_club_embed [role="button"],.democracy_club_embed button,.democracy_club_embed label{cursor:pointer}.democracy_club_embed .form-label-bold{color:#0b0c0c;display:block;font-size:19px;font-weight:700;line-height:1.3157894737;padding-bottom:2px}.democracy_club_embed .form-hint{color:#6f777b;display:block;font-size:19px;font-weight:normal;line-height:1.25;margin-top:2px;padding-bottom:2px;text-transform:none}
</style>

<h1>Postcode form</h1>

<div class="democracy_club_embed">
  <div class="card">
    <form>
      <div class="form-group">
        <label for="postcode" class="form-label-bold">Enter your postcode</label>
        <input type="text" id="postcode" name="postcode" class="form-control">
        <p class="form-hint">e.g. GL1 2EQ</p>
      </div>
      <button type="submit">Find your polling station</button>
    </form>

    <a href="https://democracyclub.org.uk/" class="dc_logo">
      Built by <img src="https://candidates.democracyclub.org.uk/static/img/logo-with-text.png">
    </a>
  </div>
</div>

<h1>Address picker form</h1>

<div class="democracy_club_embed">
  <div class="card">
    <form>
      <div class="form-group">
        <label for="postcode" class="form-label-bold">Enter your postcode</label>

        <select aria-describedby="address_picker" class="select_multirow" id="id_address" name="address" size="10">
          <option value="e06000037-3224-1-upper-harts-hill-farm-cottages-harts-hill-road-thatcham-berks-rg184nx">1 Upper Harts Hill Farm Cottages, Harts Hill Road, Thatcham, Berks</option>
          <option value="e06000037-3224-2-upper-harts-hill-farm-cottages-harts-hill-road-thatcham-berks-rg184nx">2 Upper Harts Hill Farm Cottages, Harts Hill Road, Thatcham, Berks</option>
          <option value="e06000037-3016-mount-mist-harts-hill-road-thatcham-berks-rg184nx">Mount Mist, Harts Hill Road, Thatcham, Berks</option>
        </select>
      </div>

      <button type="submit" class="button" id="submit-address">
        I've selected my address. Find my Polling Station
      </button>
      <br>
      <a class="link-button" href="/we_dont_know/RG184NX/">
        My address is not in the list
      </a>
    </form>

    <a href="https://democracyclub.org.uk/" class="dc_logo">
      Built by <img src="https://candidates.democracyclub.org.uk/static/img/logo-with-text.png">
    </a>
  </div>
</div>

<h1>Result page</h1>




<div class="democracy_club_embed">
  <div class="card">
    <h2>Your polling station</h2>
    <div>
      <address>
        Frank Hutchings Community Hall<br>Bradley-Moore Square
        <br>Thatcham
        <br>RG18 4QH
      </address>
    </div>

    <div id="directions">
      <p>It's about 0.6 miles away or a 11 minute walk from RG184NX.</p>
      <a href="https://www.google.com/maps/dir/51.41261119999999,-1.2371567333333335/51.408620940000006,-1.24716761" target="_top">
          Get walking directions
      </a>
    </div>
    [Map]
  </div>
</div>