Staffordshire University Components

Button: Size: Large

There are no notes for this item.

<a href="#" class="button  button--lg">
    A big button
</a>
 
{{ spaceless }}
{% set classString = '' %}
{% for class in classes %}
  {% set classString = classString ~ '  ' ~ class %}
{% endfor %}

<a href="{{ link }}" class="button{% if classString %}{{ classString }}{% endif %}">
  {% if icon %}
    <i class="icon | icon-{{ icon }}"></i>
  {% endif %}
  {{ text }}
</a>
{{ endspaceless }}
  • Content: 
    .button {
  // For the moment, these are defined as little mixins over in __vars/mixins so they can be included elsewhere

  @include button;

  // Sizes

  &--xs {
    @include button--xs;
  }

  &--sm {
    @include button--sm;
  }

  &--lg {
    @include button--lg;
  }

  &--xl {
    @include button--xl;
  }

  // Layout

  &--block {
    @include button--block;
  }

  &--pointy {
    @include button--pointy;
  }

  &--clipped {
    @include button--clipped;
  }

  &--caps {
    text-transform: uppercase;
  }

  // Colours

  &--slate {
    @include button--slate;
  }

  &--outline {
    @include button--outline;
  }

  &--outline-slate {
    @include button--outline-slate;
  }

  &[disabled] {
    @include button--disabled;
  }
}
  • URL: /components/raw/button/_buttons.scss
  • Filesystem Path: src/components/button/_buttons.scss
  • Size: 744 Bytes