NNPHI Pattern Library

Button: On Dark Secondary Homepage Button 

<a href="#" class="standard-button standard-button--onDarkSecondaryHomepage standard-button-position--default">
        <span class="standard-button__text">
            Take action
        </span>
        <span class="standard-button__chevron-icon">
            <svg role="img" class="right-chevron" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true" viewBox="0 0 8 12">
                <title>right chevron</title>
                <path class="_mark right-chevron__shape" d="M4.50496 5.98003L0.00107202 0.0064757L0.00964937 2.55136e-07L3.49611 5.59932e-07L8 5.97463L3.48968 12L-9.53674e-07 12L4.50496 5.98003Z" />
            </svg>
        </span>
    </a>
 
{% if button.isButton | default %}
    <button
        type="{{ button.type | default }}"
        {%  if button.ariaLabel | default %}
            aria-label="{{ button.ariaLabel }}"
        {% endif %}
        class="standard-button {{ button.variant ? 'standard-button--' ~ button.variant : '' }}{{ ' standard-button-position--' ~ button.buttonPosition|default('default') }} {{ button.extraClasses ? button.extraClasses }}"
        {% if button.isButton | default %}
            data-action="{{ button.action }}"
        {% endif %}
        {% if button.isButton | default %}
            data-target="{{ button.target }}"
        {% endif %}
        {% if button.isButton | default %}
            data-params="{{ button.params|json_encode }}"
        {% endif %}
        {{ button.isButton and button.isDisabled ? 'disabled' : '' }}
        {{ button.isDisabled ? 'disabled' }}
        {{ button.isExpanded ? 'aria-expanded="true"' : '' }}
        {% if button.attributes %}
            {% for key, value in button.attributes %}
                {{ key }}="{{ value }}"
            {% endfor %}
        {% endif %}
    >
        <div class="standard-button__container">
            <span class="standard-button__text">
                {{ button.text | trim }}
            </span>
        </div>
    </button>
{% else %}
    <a href="{{ button.url }}"
        {%  if button.ariaLabel | default %}
            aria-label="{{ button.ariaLabel }}"
        {% endif %}
        class="standard-button {{ button.variant ? 'standard-button--' ~ button.variant : '' }}{{ ' standard-button-position--' ~ button.buttonPosition|default('default') }}"
        {{ button.isDisabled ? 'disabled' }}
    >
        <span class="standard-button__text">
            {{ button.text | trim }}
        </span>
        {% if button.linkType == 'external' %}
            <span class="standard-button__external-link-icon">
                {% include 'bits/icons/external-link.twig' %}
            </span>
        {% elseif button.linkType == 'file'  %}
            <span class="standard-button__external-link-icon">
                {% include 'bits/icons/download.twig' %}
            </span>
        {% else %}
            <span class="standard-button__chevron-icon">
                {% include 'bits/icons/right-chevron.twig' %}
            </span>
        {% endif %}
    </a>
{% endif %}
 
{
  "site": {
    "title": "National Network of Public Health Institutes"
  },
  "background": "white",
  "breadcrumbs": [
    {
      "title": "Home",
      "url": "#"
    },
    {
      "title": "Primary Page One",
      "url": "#"
    },
    {
      "title": "Interior Page One",
      "url": "#"
    }
  ],
  "footerLinks": {
    "items": [
      {
        "title": "Subscribe to our newsletter",
        "url": "#"
      },
      {
        "title": "Explore membership benefits",
        "url": "#"
      },
      {
        "title": "See career opportunities",
        "url": "#"
      }
    ]
  },
  "contactInfo": {
    "copyright": "© National Network of Public Health Institutes. All Rights Reserved",
    "facebookLink": "https://facebook.com",
    "linkedInLink": "https://linkedin.com",
    "youtubeLink": "https://youtube.com",
    "flickrLink": "https://flickr.com",
    "twitterLink": "https://twitter.com",
    "instagramLink": "https://instagram.com",
    "youTubeLink": "https://youtube.com"
  },
  "utilityNavigation": {
    "items": [
      {
        "title": "Member directory",
        "url": "#"
      },
      {
        "title": "Events",
        "url": "#",
        "isActive": true
      },
      {
        "title": "Blog",
        "url": "#"
      }
    ]
  },
  "primaryNavigation": {
    "items": [
      {
        "title": "Workforce resources",
        "url": "#",
        "children": [
          {
            "title": "Resource Directory",
            "url": "#",
            "children": []
          },
          {
            "title": "Trainings",
            "url": "#",
            "children": [
              {
                "title": "Training Level 3 example",
                "url": "#"
              }
            ]
          }
        ]
      },
      {
        "title": "Programs & Projects",
        "url": "#",
        "isDescendantActive": true,
        "children": [
          {
            "title": "Data Modernization",
            "url": "#",
            "children": []
          },
          {
            "title": "Environmental Health and Emergency Preparedness",
            "url": "#",
            "children": []
          },
          {
            "title": "Evaluation and Impact",
            "url": "#",
            "isDescendantActive": true,
            "children": [
              {
                "title": "Third level example",
                "url": "#",
                "isActive": true,
                "children": [
                  {
                    "title": "Fourth level example",
                    "url": "#",
                    "isActive": true,
                    "children": [
                      {
                        "title": "Fifth level example",
                        "url": "#",
                        "isActive": true
                      }
                    ]
                  },
                  {
                    "title": "Fourth level example 2",
                    "url": "#"
                  },
                  {
                    "title": "Fourth level example 3",
                    "url": "#"
                  }
                ]
              }
            ]
          },
          {
            "title": "Multisector Strategies and Population Health",
            "url": "#",
            "children": []
          },
          {
            "title": "Public Health Events and Convenings Management",
            "url": "#",
            "children": []
          },
          {
            "title": "Public Health Infrastructure Grant",
            "url": "#",
            "children": []
          },
          {
            "title": "Public health training",
            "url": "#",
            "children": []
          }
        ]
      },
      {
        "title": "Explore the Network",
        "url": "#",
        "children": [
          {
            "title": "Member Directory",
            "url": "#",
            "children": []
          },
          {
            "title": "Membership paths",
            "url": "#",
            "children": []
          }
        ]
      },
      {
        "title": "Partner with us",
        "url": "#"
      },
      {
        "title": "About",
        "url": "#",
        "children": [
          {
            "title": "Blog",
            "url": "#",
            "children": []
          },
          {
            "title": "Events",
            "url": "#",
            "children": []
          },
          {
            "title": "Newsletters",
            "url": "#",
            "children": []
          },
          {
            "title": "Signature programs",
            "url": "#",
            "children": []
          },
          {
            "title": "Contact us",
            "url": "#",
            "children": []
          },
          {
            "title": "Meet the team",
            "url": "#",
            "children": []
          }
        ]
      }
    ]
  },
  "button": {
    "text": "Take action",
    "url": "#",
    "isDisabled": false,
    "variant": "onDarkSecondaryHomepage"
  }
}
  • Content: 
    $homepageBreakpointMapSection: 75rem;
$homepageBreakpointMapSectionMax: 40rem;

.standard-button {
    --backgroundColor: var(--purple);
    --borderColor: var(--purple);
    --textColor: var(--white);
    --iconColor: var(--brightPurple);
    --hoverBackgroundColor: var(--brightPurple);
    --hoverBorderColor: var(--brightPurple);
    --hoverTextColor: var(--purple);
    --hoverIconColor: var(--white);

    @include detailBold;
    align-items: center;
    background-color: var(--backgroundColor);
    border: solid 2px var(--borderColor);
    border-radius: 2px;
    color: var(--textColor);
    display: inline-flex;
    justify-content: space-between;
    padding: .5rem 1rem;
    text-decoration: none;
    transition: all 200ms ease-in-out;

    --currentIconColor: var(--iconColor);

    &[disabled] {
        --backgroundColor: var(--grayTint);
        --borderColor: var(--grayTint);
        --textColor: var(--white);
        --iconColor: var(--white);
        --hoverBackgroundColor: var(--grayTint);
        --hoverBorderColor: var(--grayTint);
        --hoverTextColor: var(--white);
        --hoverIconColor: var(--white);
    }

    &-position--sidebar {
        width: 100%;
    }

    &--secondary {
        --backgroundColor: transparent;
        --textColor: var(--purple);

        &[disabled] {
            --backgroundColor: transparent;
            --borderColor: var(--grayTint);
            --textColor: var(--grayTint);
            --iconColor: var(--grayTint);
            --hoverBackgroundColor: transparent;
            --hoverBorderColor: var(--grayTint);
            --hoverTextColor:  var(--grayTint);
            --hoverIconColor:  var(--grayTint);
        }
    }

    &--secondaryDark {
        --backgroundColor: transparent;
        --textColor: var(--purple);
        --iconColor: var(--purple);

        &[disabled] {
            --backgroundColor: transparent;
            --borderColor: var(--grayTint);
            --textColor: var(--grayTint);
            --iconColor: var(--grayTint);
            --hoverBackgroundColor: transparent;
            --hoverBorderColor: var(--grayTint);
            --hoverTextColor:  var(--grayTint);
            --hoverIconColor:  var(--grayTint);
        }
    }

    &--onDark {
        --backgroundColor: var(--white);
        --borderColor: var(--white);
        --textColor: var(--purple);
        --iconColor: var(--brightPurple);
        --hoverBackgroundColor: transparent;
        --hoverBorderColor: var(--white);
        --hoverTextColor: var(--white);
        --hoverIconColor: var(--white);
    }

    &--onDarkSecondary {
        --backgroundColor: transparent;
        --borderColor: var(--white);
        --textColor: var(--white);
        --iconColor: var(--white);
        --hoverBackgroundColor:var(--white);
        --hoverBorderColor:var(--white);
        --hoverTextColor:var(--purple);
        --hoverIconColor:var(--brightPurple);

        &[disabled] {
            --backgroundColor: transparent;
            --borderColor: var(--grayTint);
            --textColor: var(--grayTint);
            --iconColor: var(--grayTint);
            --hoverBackgroundColor: transparent;
            --hoverBorderColor: var(--grayTint);
            --hoverTextColor:  var(--grayTint);
            --hoverIconColor:  var(--grayTint);
        }
    }

    &--onDarkSecondaryHomepage {
        --backgroundColor: transparent;
        --borderColor: var(--white);
        --textColor: var(--white);
        --iconColor: var(--white);
        --hoverBackgroundColor: var(--white);
        --hoverBorderColor: var(--white);
        --hoverTextColor: var(--purple);
        --hoverIconColor: var(--brightPurple);

        &[disabled] {
            --backgroundColor: transparent;
            --borderColor: var(--grayTint);
            --textColor: var(--grayTint);
            --iconColor: var(--grayTint);
            --hoverBackgroundColor: transparent;
            --hoverBorderColor: var(--grayTint);
            --hoverTextColor: var(--grayTint);
            --hoverIconColor: var(--grayTint);
        }

        @media (max-width: $homepageBreakpointMapSectionMax) {
            width: 100%;
        }

        @media (min-width: $homepageBreakpointMapSection) {
            --textColor: var(--purple);
            --iconColor: var(--purple);
            --borderColor: var(--purple);
            --hoverBackgroundColor: var(--brightPurple);
            --hoverBorderColor: var(--brightPurple);
            --hoverTextColor: var(--purple);
            --hoverIconColor: var(--white);
        }
    }

    &--blue {
        --backgroundColor: var(--blue);
        --borderColor: var(--blue);
        --textColor: var(--white);
        --iconColor: var(--white);
        --hoverBackgroundColor:var(--white);
        --hoverBorderColor:var(--blue);
        --hoverTextColor:var(--blue);
        --hoverIconColor:var(--blue);

        &[disabled] {
            --backgroundColor: var(--grayTint);
            --borderColor: var(--grayTint);
            --textColor: var(--white);
            --iconColor: var(--white);
            --hoverBackgroundColor: var(--grayTint);
            --hoverBorderColor: var(--grayTint);
            --hoverTextColor: var(--white);
            --hoverIconColor: var(--white);
        }
    }

    &:focus,
    &:hover {
        background-color: var(--hoverBackgroundColor);
        border: solid 2px var(--hoverBorderColor);
        color: var(--hoverTextColor);
        --currentIconColor: var(--hoverIconColor);
    }

    &__chevron-icon {
        display: inline-block;
        flex-shrink: 0;
        margin-left: .75rem;
        position: relative;
        width: .5rem;

        & > svg {
            transition: fill 200ms ease-in-out;
            fill: var(--currentIconColor);
            width: 100%;
        }
    }

    &__external-link-icon {
        display: inline-block;
        flex-shrink: 0;
        margin-left: .75rem;
        position: relative;
        width: 1rem;

        & > svg {
            transition: fill 200ms ease-in-out;
            fill: var(--currentIconColor);
            width: 100%;
        }
    }
}
  • URL: /components/raw/standard-button/standard-button.scss
  • Filesystem Path: patterns/bits/standard-button/standard-button.scss
  • Size: 6.2 KB

No notes defined.