Joran design system

Button: Transparent Arrow Right 

<a href="#nowhere" class="c-button c-button--transparent"><span>Button</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
        <path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
    </svg>
</a>
 
<a
  href="{{ url }}"
  class="c-button
   {%- if variantModifier %} {{ variantModifier }}{% endif %}
   {%- if styleModifier %} {{ styleModifier }}{% endif -%}"
>
  {%- if svg.before -%}
    {% render '@svg-chevron-left' %}
  {%- endif -%} 
  {%- if svg -%}
    <span>
  {%- endif -%} 
    {{ text }}
    {%- if hiddentext -%}
      <span class="u-visually-hidden"> {{ hiddentext }}</span>
    {%- endif -%}
  {%- if svg -%}
    </span>
  {%- endif -%}
  {%- if svg.after -%}{% render '@svg-chevron-right' %}{%- endif -%}
</a>
 
{
  "text": "Button",
  "url": "#nowhere",
  "variantModifier": "c-button--transparent",
  "svg": {
    "after": true
  }
}
  • Content: 
    /* ======================================================================
   # _components.button.css
   ====================================================================== */

.c-button {
  @extend %cta;

  @apply
    flex
    flex-row
    flex-nowrap
    items-center

    w-max

    transition-all
    ;
}

.c-button:focus {
  @apply
    outline-focus
   ;
}

.c-button svg {
  height: 0.85em;
}

.c-button span + svg,
.c-button svg + span {
  @apply
    ml-4
  ;
}




/* -----------------------------------
 # Variants
 ----------------------------------- */

/***
 * Default
 */

.c-button--default {
  @apply
    bg-primary-cta
    text-white

    py-3
    px-6
    rounded
    shadow
    ;
}

.c-button--default:hover,
.c-button--default:active {
  @apply
    bg-primary-600
    shadow-lg
    ;
}

.o-prose .c-button--default {
  @apply no-underline text-white !important;
}



/***
 * Transparent
 */

.c-button--transparent {
  @apply
    text-primary-cta
    tracking-normal

    py-3
  ;

  &:hover,
  &:active {
    @apply
      text-primary-600
      tracking-wider
        ;
  }
}



/***
 * Transparent alt
 */

.c-button--transparent-alt {
  @apply
    text-white
    tracking-normal

    py-3
  ;

  &:hover,
  &:active {
    @apply
      text-primary-200
      tracking-wider
        ;
  }
}
  • URL: /components/raw/button/_components.button.css
  • Filesystem Path: src/components/04-Components/button/_components.button.css
  • Size: 1.3 KB

No notes defined.