England Football

Cta: Primary Registration 

<a href="/" class="cta cta--primary-registration ">
    <p>COMPLETE ESTC UPGRADE</p>
</a>

No notes defined.

{
  "href": "/",
  "copy": "COMPLETE ESTC UPGRADE",
  "modifier": "primary-registration",
  "id": "",
  "name": ""
}
  • Content: 
    // TODO:
// - Check these colour contrasts are accessible
// - Interactive states (hover, focus, etc) not confirmed by UXDC
.cta {
  &--primary,
  &--r-secondary,
  &--r-primary,
  &--r-disabled,
  &--secondary,
  &--tertiary,
  &--efl,
  &--disabled {
    @include text-s--narrow;

    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 30.6rem;
    min-height: 4.4rem;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 0.2s ease-in;
    border-radius: 2px;
    position: relative;
    white-space: nowrap;
    padding: 0 2rem;
  }

  img {
    max-height: 2.4rem;
    height: 100%;
    margin-right: 1.5rem;
  }

  &--primary {
    background-color: var(--brand-primary);
    color: white;
    border: 1px solid;

    &:hover {
      background-color: white;
      color: var(--brand-primary);
    }
  }

  &--r-disabled,
  &--r-primary,
  &--r-secondary {
    font-family: $registration-font;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -0.01em;
    line-height: 26px;
    text-align: center;
    max-width: 100%;
    min-height: 44px;
    text-transform: none;
    border: 1px solid white;
    -webkit-font-smoothing: antialiased;
  }

  &--r-primary {
    background-color: $red-rj;
  }

  &--r-secondary {
    background-color: $crest-blue;
  }

  &--r-primary,
  &--r-secondary {
    color: white;

    &:hover {
      background-color: white;
      color: $blue;
    }
  }

  &--r-disabled {
    background-color: $light-blue1;
    border-color: $light-blue1;
    color: #383838;
    cursor: not-allowed;
  }

  &--secondary {
    background-color: white;
    border: 1px solid var(--brand-primary);
    color: var(--brand-primary);

    &:hover {
      background-color: var(--brand-primary);
      color: white;
      border: 1px solid;
    }
  }
  &--tertiary {
    background: var(--brand-secondary);
    border: none;
    color: var(--brand-tertiary);

    &:hover {
      background-color: var(--brand-tertiary);
      color: var(--brand-secondary);
    }
    [data-brand='womens'] & {
      color: var(--brand-primary);

      &:hover {
        background-color: var(--brand-primary);
        color: var(--brand-secondary);
      }
    }
  }

  &--disabled {
    background-color: $color-disabled;
    color: $color-primary;
  }

  &--primary:focus,
  &--secondary:focus {
    outline: 0;

    &::after {
      content: '';
      display: block;
      position: absolute;
      top: -2px;
      bottom: -2px;
      left: -2px;
      right: -2px;
      border-radius: inherit;
      box-shadow: 0 0 0 2px $color-interactive;
    }
  }
  &--inline {
    display: inline-flex;
  }
  &--efl {
    background-color: $red;
    color: white;
    border: 1px solid;

    &:hover {
      background-color: $crest-blue;
    }
  }
}
:root [data-brand='legends'] {
  .cta {
    &--tertiary {
      background-color: var(--brand-tertiary);
      color: white;
    }
  }
}
  • URL: /components/raw/cta/cta.scss
  • Filesystem Path: src/library/components/cta/cta.scss
  • Size: 3 KB 
{{#unless disabled}}
<a href="{{href}}" class="cta cta--{{modifier}} {{#if inline}}cta--inline{{/if}}" {{#if target}}target="{{target}}"
  {{/if}} {{#if id}}id="{{id}}" {{/if}} {{#if fan}}data-fan="{{fan}}" {{/if}} {{#if name}}name="{{name}}" {{/if}} {{#if arialabel}}aria-label="{{arialabel}}" {{/if}}>{{#if image}}<img src="{{image}}" alt=""> {{/if}}<p>{{copy}}</p></a>
{{/unless}}
{{#if disabled}}
<span class="cta cta--{{modifier}}">{{copy}}</span>
{{/if}}