England Football

Cta 

<!-- Default -->
<a href="/" class="cta cta--primary ">
    <p>Primary CTA</p>
</a>


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


<!-- Secondary Registration -->
<a href="/" class="cta cta--secondary-registration ">
    <p>EXIT TO THEFA.COM</p>
</a>


<!-- Registration Inactive -->
<a href="/" class="cta cta--registration-inactive ">
    <p>registration-inactive CTA</p>
</a>


<!-- Secondary Registration -->
<a href="/" class="cta cta--secondary-registration ">
    <p>secondary-registration CTA</p>
</a>


<!-- Secondary -->
<a href="/" class="cta cta--secondary ">
    <p>Secondary CTA</p>
</a>


<!-- Tertiary -->
<a href="/" class="cta cta--tertiary "><img src="/assets/example-content/cta-image.svg" alt="">
    <p>Tertiary CTA</p>
</a>


<!-- Quaternary -->
<a href="/" class="cta cta--quaternary ">
    <p>quaternary CTA</p>
</a>


<!-- Efl -->
<a href="/" class="cta cta--efl ">
    <p>EFL CTA</p>
</a>


<!-- Disabled -->
<span class="cta cta--disabled">Disabled CTA</span>


<!-- Inline -->
<a href="/" class="cta cta--primary cta--inline">
    <p>Inline CTA (can be any version)</p>
</a>


<!-- R Primary -->
<a href="/" class="cta cta--r-primary ">
    <p>R Primary</p>
</a>


<!-- R Secondary -->
<a href="/" class="cta cta--r-secondary ">
    <p>R Secondary</p>
</a>


<!-- R Disabled -->
<a href="/" class="cta cta--r-disabled ">
    <p>R Disabled</p>
</a>

No notes defined.

/* Default */
{
  "href": "/",
  "copy": "Primary CTA",
  "modifier": "primary",
  "id": "",
  "name": ""
}


/* Primary Registration */
{
  "href": "/",
  "copy": "COMPLETE ESTC UPGRADE",
  "modifier": "primary-registration",
  "id": "",
  "name": ""
}


/* Secondary Registration */
{
  "href": "/",
  "copy": "EXIT TO THEFA.COM",
  "modifier": "secondary-registration",
  "id": "",
  "name": ""
}


/* Registration Inactive */
{
  "href": "/",
  "copy": "registration-inactive CTA",
  "modifier": "registration-inactive",
  "id": "",
  "name": ""
}


/* Secondary Registration */
{
  "href": "/",
  "copy": "secondary-registration CTA",
  "modifier": "secondary-registration",
  "id": "",
  "name": ""
}


/* Secondary */
{
  "href": "/",
  "copy": "Secondary CTA",
  "modifier": "secondary",
  "id": "",
  "name": ""
}


/* Tertiary */
{
  "href": "/",
  "copy": "Tertiary CTA",
  "modifier": "tertiary",
  "id": "",
  "name": "",
  "image": "/assets/example-content/cta-image.svg"
}


/* Quaternary */
{
  "href": "/",
  "copy": "quaternary CTA",
  "modifier": "quaternary",
  "id": "",
  "name": ""
}


/* Efl */
{
  "href": "/",
  "copy": "EFL CTA",
  "modifier": "efl",
  "id": "",
  "name": ""
}


/* Disabled */
{
  "href": "/",
  "copy": "Disabled CTA",
  "modifier": "disabled",
  "id": "",
  "name": "",
  "disabled": true
}


/* Inline */
{
  "href": "/",
  "copy": "Inline CTA (can be any version)",
  "modifier": "primary",
  "id": "",
  "name": "",
  "inline": true
}


/* R Primary */
{
  "href": "/",
  "copy": "R Primary",
  "modifier": "r-primary",
  "id": "",
  "name": ""
}


/* R Secondary */
{
  "href": "/",
  "copy": "R Secondary",
  "modifier": "r-secondary",
  "id": "",
  "name": ""
}


/* R Disabled */
{
  "href": "/",
  "copy": "R Disabled",
  "modifier": "r-disabled",
  "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,
  &--quaternary,
  &--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;
    }
    &:focus-visible {
      color: $black1;
      background-color: $yellow1;
      text-decoration: underline;
      border-color: $black1;
      outline: none;
    }
  }

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

  &--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);
      }
    }
  }

  &--quaternary {
    background: $grey-light;
    border: 1px solid $blue;
    color: $blue;
    max-width: 100%;
    font-size: 12px;
    font-weight: 400;
    font-family: 'Grot12 Condensed', arial, helvetica, sans-serif;
    min-height: 40px;

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

  &--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-rj;
    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.6 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}}