Pleasance Styleguide

Sampler 

<form>

    <p>
    <div class="mt-2 ">
        <label for="text" class="form-label">Text input</label>
        <input type="text" class="mb-2 form-control" id="text" name="text" value="" size="60" maxlength="128" placeholder="Enter text here">
    </div>
    <div class="mt-2 floating">
        <input type="text" class="mb-2 form-control" id="text" name="text" value="" size="60" maxlength="128" placeholder="Enter text here">
        <label for="text" class="form-label">Text input</label>
    </div>
    </p>

    <p>
    <div>
        <label for="text" class="form-label">Text area</label>
        <textarea class="form-control" id="text" name="text" placeholder="Enter text here"></textarea>
    </div>
    </p>

    <p>
    <div>
        <select id="radio" name="radio" class="form-select" aria-label="Select">
            <option selected>-- Choose one --</option>
            <option value="0" disabled>Thu, 27/11/2019 - 14:30 SOLD OUT</option>
            <option value="1">Fri, 28/11/2019 - 14:30 SELLING FAST</option>
            <option value="2" disabled>Sat, 29/11/2019 - 14:30 SOLD OUT</option>
            <option value="3">Sun, 30/11/2019 - 19:30 [£12.34]</option>
        </select>
    </div>
    </p>

    <p>
    <div class="form-check form-check__large"><input type="checkbox" class="form-check-input" id="checkbox-one" name="checkbox-one" value=""><label for="checkbox-one" class=" form-check-label">Checkbox 1</label></div>
    <div class="form-check form-check__large"><input type="checkbox" class="form-check-input" id="checkbox-two" name="checkbox-two" value=""><label for="checkbox-two" class=" form-check-label">Checkbox 2</label></div>
    <div class="form-check form-check__large"><input type="checkbox" class="form-check-input" id="checkbox-three" name="checkbox-three" value=""><label for="checkbox-three" class=" form-check-label">Checkbox 3</label></div>
    </p>

    <p>
    <div class="form-check form-check__large form-check-inline"><input type="checkbox" class="form-check-input" id="checkbox-inline-one" name="checkbox-inline-one" value=""><label for="checkbox-inline-one" class=" form-check-label">Inline checkbox 1</label></div>
    <div class="form-check form-check__large form-check-inline"><input type="checkbox" class="form-check-input" id="checkbox-inline-two" name="checkbox-inline-two" value=""><label for="checkbox-inline-two" class=" form-check-label">Inline checkbox 2</label></div>
    <div class="form-check form-check__large form-check-inline"><input type="checkbox" class="form-check-input" id="checkbox-inline-three" name="checkbox-inline-three" value=""><label for="checkbox-inline-three" class=" form-check-label">Inline checkbox 3</label></div>
    </p>

    <p>
        <input type="checkbox" class="btn-check" id="checkbox-toggle-one" name="checkbox-toggle-one" value=""><label for="checkbox-toggle-one" class=" btn btn-primary d-inline-block my-1 me-1">Checkbox toggle 1</label><input type="checkbox" class="btn-check" id="checkbox-toggle-two" name="checkbox-toggle-two" value=""><label for="checkbox-toggle-two" class=" btn btn-primary d-inline-block my-1 me-1">Checkbox toggle 2</label><input type="checkbox" class="btn-check" id="checkbox-toggle-three" name="checkbox-toggle-three" value=""><label for="checkbox-toggle-three" class=" btn btn-primary d-inline-block my-1 me-1">Checkbox toggle 3</label>
    </p>

    <p>
    <div class="form-check form-check__large"><input type="radio" class=" form-check-input" id="radio-1" name="radio" value=""><label for="radio-1" class=" form-check-label">Radio 1</label></div>
    <div class="form-check form-check__large"><input type="radio" class=" form-check-input" id="radio-2" name="radio" value=""><label for="radio-2" class=" form-check-label">Radio 2</label></div>
    <div class="form-check form-check__large"><input type="radio" class=" form-check-input" id="radio-3" name="radio" value=""><label for="radio-3" class=" form-check-label">Radio 3</label></div>
    </p>

    <p>
    <div class="form-check form-check__large form-check-inline"><input type="radio" class=" form-check-input" id="radio-inline-1" name="radio-inline" value=""><label for="radio-inline-1" class=" form-check-label">Inline radio 1</label></div>
    <div class="form-check form-check__large form-check-inline"><input type="radio" class=" form-check-input" id="radio-inline-2" name="radio-inline" value=""><label for="radio-inline-2" class=" form-check-label">Inline radio 2</label></div>
    <div class="form-check form-check__large form-check-inline"><input type="radio" class=" form-check-input" id="radio-inline-3" name="radio-inline" value=""><label for="radio-inline-3" class=" form-check-label">Inline radio 3</label></div>
    </p>

    <p>
        <input type="radio" class=" btn-check" id="radio-toggle-1" name="radio-toggle" value=""><label for="radio-toggle-1" class=" btn btn-primary">Radio toggle 1</label><input type="radio" class=" btn-check" id="radio-toggle-2" name="radio-toggle" value=""><label for="radio-toggle-2" class=" btn btn-primary">Radio toggle 2</label><input type="radio" class=" btn-check" id="radio-toggle-3" name="radio-toggle" value=""><label for="radio-toggle-3" class=" btn btn-primary">Radio toggle 3</label>
    </p>

    <p>
        <label for="date" class="form-label">Date</label>
        <input type="date" class="form-control" id="date" name="date" value="" size="60" maxlength="128" placeholder="">
    </p>

</form>
 
<form>

  <p>
    {% render "@input-text" %}
    {% render "@input-text" with { "floating": true } %}
  </p>

  <p>
    {% render "@textarea" %}
  </p>

  <p>
    {% render "@select-list" %}
  </p>

  <p>
    {% apply spaceless %}
    {% render "@input-checkbox" with { "id": "checkbox-one", "title": "Checkbox 1" } %}
    {% render "@input-checkbox" with { "id": "checkbox-two", "title": "Checkbox 2" } %}
    {% render "@input-checkbox" with { "id": "checkbox-three", "title": "Checkbox 3" } %}
    {% endapply %}
  </p>

  <p>
    {% apply spaceless %}
    {% render "@input-checkbox" with { "id": "checkbox-inline-one", "title": "Inline checkbox 1", "inline": true } %}
    {% render "@input-checkbox" with { "id": "checkbox-inline-two", "title": "Inline checkbox 2", "inline": true } %}
    {% render "@input-checkbox" with { "id": "checkbox-inline-three", "title": "Inline checkbox 3", "inline": true } %}
    {% endapply %}
  </p>

  <p>
    {% apply spaceless %}
    {% render "@input-checkbox" with { "id": "checkbox-toggle-one", "title": "Checkbox toggle 1", "toggle": true } %}
    {% render "@input-checkbox" with { "id": "checkbox-toggle-two", "title": "Checkbox toggle 2", "toggle": true } %}
    {% render "@input-checkbox" with { "id": "checkbox-toggle-three", "title": "Checkbox toggle 3", "toggle": true } %}
    {% endapply %}
  </p>

  <p>
    {% apply spaceless %}
    {% render "@input-radio" with { "id": "radio-1", "name": "radio", "title": "Radio 1" } %}
    {% render "@input-radio" with { "id": "radio-2", "name": "radio", "title": "Radio 2" } %}
    {% render "@input-radio" with { "id": "radio-3", "name": "radio", "title": "Radio 3" } %}
    {% endapply %}
  </p>

  <p>
    {% apply spaceless %}
    {% render "@input-radio" with { "id": "radio-inline-1", "name": "radio-inline", "title": "Inline radio 1", "inline": true } %}
    {% render "@input-radio" with { "id": "radio-inline-2", "name": "radio-inline", "title": "Inline radio 2", "inline": true } %}
    {% render "@input-radio" with { "id": "radio-inline-3", "name": "radio-inline", "title": "Inline radio 3", "inline": true } %}
    {% endapply %}
  </p>

  <p>
    {% apply spaceless %}
    {% render "@input-radio" with { "id": "radio-toggle-1", "name": "radio-toggle", "title": "Radio toggle 1", "toggle": true } %}
    {% render "@input-radio" with { "id": "radio-toggle-2", "name": "radio-toggle", "title": "Radio toggle 2", "toggle": true } %}
    {% render "@input-radio" with { "id": "radio-toggle-3", "name": "radio-toggle", "title": "Radio toggle 3", "toggle": true } %}
    {% endapply %}
  </p>

  <p>
    {% render "@input-date" %}
  </p>

</form>
 
/* No context defined. */

No notes defined.