Woodlands.co.uk Component Library

Cards: Call To Action Form

Cards

Various cards styles. Cards include a title and media object. Optionally, include a “banner”.

The “Woodland” card includes location information.

<div class="card card--cta ">
    <div class="card__body">
        <img src="../../images/drawings/badger.png" alt="Badger" title="" class="drawing " />

        <form action="" method="GET" class="form form--card">
            <label for="form__card--cta__field" class="form__label card__title">Call To Action</label>

            <div class="form__field">
                <label for="form__card--cta__field" class="card__content">Dolorem exercitationem repellendus odio praesentium nemo rerum sit. Pariatur voluptatem est deserunt.</label>
                <input type="text" id="form__card--cta__field" name="field" class="form-input" placeholder="nisi rerum doloribus" />
            </div>

            <button class="button button--green--dark ">
                <span>Default Button</span>
            </button>

        </form>

    </div>
</div>
 
<div class="{{modifier 'card' card.modifiers}} {{ card.classes }}">
  <div class="card__body">
    {{ render '@drawing' }}

    <form action="" method="GET" class="form form--card">
      <label for="form__card--cta__field" class="form__label card__title">{{ titlecase card.title }}</label>

      <div class="form__field">
        <label for="form__card--cta__field" class="card__content">{{ card.text }}</label>
        <input type="text" id="form__card--cta__field" name="field" class="form-input" placeholder="{{ card.placeholder }}" />
      </div>

      {{ render '@button' card.button merge=true }}
  </form>

  </div>
</div>