NNPHI Pattern Library

Button: Blue Button 

<a href="#" class="standard-button standard-button--blue standard-button-position--default">
        <span class="standard-button__text">
            Take action
        </span>
        <span class="standard-button__external-link-icon">
            <svg role="img" class="download" viewBox="0 0 16 15" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <title>download</title>
                <path d="M8.49957 0H7.48957C7.21957 0 6.98957 0.22 6.98957 0.5V8.09L5.54957 6.65C5.35957 6.46 5.03957 6.46 4.84957 6.65L4.13957 7.36C3.94957 7.55 3.94957 7.87 4.13957 8.06L7.99957 11.92L11.8596 8.06C12.0496 7.87 12.0496 7.55 11.8596 7.36L11.1496 6.65C10.9596 6.46 10.6396 6.46 10.4496 6.65L9.00957 8.09V0.5C9.00957 0.23 8.78957 0 8.50957 0H8.49957Z" />
                <path d="M0.5 1H4.51C4.78 1 5.01 1.22 5.01 1.5V2.51C5.01 2.78 4.79 3.01 4.51 3.01H2.5C2.23 3.01 2 3.23 2 3.51V12.52C2 12.79 2.22 13.02 2.5 13.02H13.51C13.78 13.02 14.01 12.8 14.01 12.52V3.5C14.01 3.23 13.79 3 13.51 3H11.5C11.23 3 11 2.78 11 2.5V1.49C11 1.22 11.22 0.99 11.5 0.99H15.51C15.78 0.99 16.01 1.21 16.01 1.49V14.5C16.01 14.77 15.79 15 15.51 15H0.5C0.23 15 0 14.78 0 14.5V1.5C0 1.23 0.22 1 0.5 1Z" />
            </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": []
          }
        ]
      }
    ]
  },
  "latest_blog_component": {
    "heading": "Latest from the Blog",
    "moreLinkText": "View all posts",
    "moreLinkUrl": "#",
    "moreLinkType": "internal",
    "cards": [
      {
        "type": "Press Release",
        "typeIcon": "bullhorn",
        "title": "Mauris nibh felis adipiscing varius in lacinia vel tellus",
        "isComplete": true
      },
      {
        "type": "Announcement",
        "typeIcon": "update-boxes",
        "title": "Mauris nibh felis adipiscing varius in lacinia vel tellus Lorem nulla nostrud velit anim lorem anim lorem qui enim.",
        "isComplete": true
      },
      {
        "type": "Press Release",
        "typeIcon": "bullhorn",
        "title": "Mauris nibh felis adipiscing varius in lacinia vel tellus",
        "isComplete": true
      }
    ]
  },
  "button": {
    "text": "Take action",
    "url": "#",
    "isDisabled": false,
    "variant": "blue",
    "linkType": "file"
  }
}
  • 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.