Bankhead Group Styleguide

Button Square

Multiline Button

Fill Button

Full-width Buttons

Full-width Button Mobile Full-width Button

Disabled Button

Source


<!-- Button - Sizes -->
<div class="u-mgn-b-m@xs">

  <h4>Default Button</h4>

  <a href="#" class="c-btn">Button</a>

</div>

<!-- Button - Colours -->
<div class="l-grid u-mgn-b-m@xs">

  <div class="w-1-1@xs">
    <h4>Button Colours</h4>
    <div class="l-grid l-grid--spaced">
      <div class="w-auto@xs u-bg-black"><a href="#" class="c-btn c-btn--white">White Button</a></div>
      <div class="w-auto@xs"><a href="#" class="c-btn c-btn--secondary">Secondary Button</a></div>
      <div class="w-auto@xs"><a href="#" class="c-btn c-btn--plain">Plain Button</a></div>
      <div class="w-auto@xs"><a href="#" class="c-btn c-btn--negative">Negative Button</a></div>
    </div>

  </div>
</div>

<!-- Button - Sizes -->
<div class="u-mgn-b-m@xs">

  <h4>Button Sizes</h4>
  <a href="#" class="c-btn c-btn--tiny">Tiny Button</a>
  <a href="#" class="c-btn c-btn--small">Small Button</a>
  <a href="#" class="c-btn">Button</a>
  <a href="#" class="c-btn c-btn--large">Large Button</a>

</div>

<!-- Button - Square -->
<div class="u-mgn-b-m@xs">

  <h4>Button Square</h4>
  <a href="#" class="c-btn c-btn--square c-btn--tiny"></a>
  <a href="#" class="c-btn c-btn--square c-btn--small"></a>
  <a href="#" class="c-btn c-btn--square"></a>
  <a href="#" class="c-btn c-btn--square c-btn--large"></a>

</div>

<!-- Button - Multiline -->
<div class="u-mgn-b-m@xs">

  <h4>Multiline Button</h4>

  <div style="max-width:150px;"><a href="#" class="c-btn c-btn--multiline"></span>Multiline Button</a></div>

</div>

<!-- Button - Fill -->
<div class="u-mgn-b-m@xs">

  <h4>Fill Button</h4>

  <div style="height:300px;"><a href="#" class="c-btn c-btn--fill"></span>Fill Button</a></div>

</div>

<!-- Button - Full-width -->
<div class="u-mgn-b-m@xs">

  <h4>Full-width Buttons</h4>

  <a href="#" class="c-btn c-btn--full">Full-width Button</a>
  <a href="#" class="c-btn c-btn--mobile-full">Mobile Full-width Button</a>

</div>

<!-- Button - Disabled -->
<div class="u-mgn-b-m-xs">

  <h4>Disabled Button</h4>

  <div class="l-grid l-grid--spaced">
    <div class="w-auto@xs"><a href="#" class="c-btn is-disabled">Disabled Button</a></div>
    <div class="w-auto@xs"><a href="#" class="c-btn c-btn--primary is-disabled">Disabled Button</a></div>
    <div class="w-auto@xs"><a href="#" class="c-btn c-btn--secondary is-disabled">Disabled Button</a></div>
  
  </div> 
</div>

Inputs

Textfield

Password

Time

Number

Checkbox & Radio Button

Radio 1

Radio 2

Checkbox

Textarea

Select

Error

Oh no, an error!

Source


<div class="u-mgn-b-m@xs">

  <h4>Inputs</h4>

  <div class="u-pad-v-m@xs">

    <div>
      <label for="edit-textfield">Textfield</label>
      <input type="text" id="edit-textfield" name="textfield">
    </div>
    <div>
      <label for="edit-password">Password</label>
      <input type="password" id="edit-password" placeholder="Password">
    </div>
    <div>
      <label for="edit-timefield">Time</label>
      <input type="time" id="edit-timefield">
    </div>
    <div>
      <label for="edit-numberfield">Number</label>
      <input type="number" id="edit-numberfield">
    </di>

  </div>

</div>

<div class="u-mgn-b-m@xs">

  <h4>Checkbox & Radio Button</h4>

  <div class="u-pad-v-m@xs">

    <div class="radio">
      <input type="radio" id="radio" name="radio">
      <label for="radio">Radio 1</label>
    </div>

    <div class="radio">
      <input type="radio" id="radio-2" name="radio">
      <label for="radio-2">Radio 2</label>
    </div>

    <div class="checkbox">
      <input type="checkbox" id="checkbox" value="1">
      <label for="checkbox">Checkbox</label>
    </div>

  </div>

</div>


<div class="u-mgn-b-m@xs">

  <h4>Textarea</h4>

  <div class="u-pad-v-m@xs">

    <textarea rows="3" placeholder="Type your message here..."></textarea>

  </div>

</div>

<div class="u-mgn-b-m@xs">

<h4>Select</h4>

  <div class="u-pad-v-m@xs">

    <select>
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
    </select>


  </div>

</div>

<div class="u-mgn-b-m@xs">

  <h4>Error</h4>

  <div class="u-pad-v-m@xs">

    <input class="is-error" type="text" placeholder="Text">
    <span role="alert" class="wpcf7-not-valid-tip">Oh no, an error!</span>

  </div>

</div>

Source

<div class="c-menu-toggle js-menu-toggle">
  <span class="c-menu-toggle__label"></span>
  <span class="c-menu-toggle__icon"></span>
</div>

.c-site-logo

Default appearance.

Site Logo

.c-site-logo--fluid

"Fluid" Modifier. Fills available width and scales accordingly.

Site Logo

Source

<a href="#" class="c-site-logo [modifier class]">Site Logo</a>

Image Icons

Source


<div style="font-size: 64px;">


  <div class="u-mgn-b-m@xs">
      <h4>Image Icons</h4>
      <span class="c-symbol c-symbol--instagram"></span>
      <span class="c-symbol c-symbol--chevron-right"></span>
      <span class="c-symbol c-symbol--chevron-left"></span>
      <span class="c-symbol c-symbol--chevron-down"></span>
      <span class="c-symbol c-symbol--mail"></span>
      <span class="c-symbol c-symbol--pin"></span>
      <span class="c-symbol c-symbol--phone"></span>
      <span class="c-symbol c-symbol--checkmark"></span>
  </div>


</div>

Components

Button Jump to Source

Default Button

Button Colours

Button Sizes

Button Square

Multiline Button

Fill Button

Full-width Buttons

Disabled Button

Form Jump to Source

Inputs

Checkbox & Radio Button

Textarea

Select

Error

Menu Toggle Jump to Source

Site Logo Jump to Source

.c-site-logo

.c-site-logo--fluid

Symbols Jump to Source

Image Icons