NNPHI Pattern Library

Call To Action: On Homepage 

<div class="call-to-action call-to-action--navy call-to-action--full-width">
    <div class="call-to-action__container">
        <div class="call-to-action__content">
            <div class="call-to-action__text-container">
                <div class="call-to-action__lead-in-text">
                    Want to stay in the loop?
                </div>
                <p class="call-to-action__description">
                    Stay updated with us by signing up for our Newsletter.
                </p>
            </div>

            <div class="call-to-action__button-container">
                <a href="" class="standard-button standard-button--onDarkSecondary standard-button-position--default">
                    <span class="standard-button__text">
                        Subscribe
                    </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>
            </div>
        </div>
    </div>
</div>
 
{% set color = (background == 'blueTint') ? 'navy' : colorVariant | default('purpleTint') %}
{% set width = widthVariant ?? 'component-width' %}
{% set buttonVariant = (color == 'navy') ? 'onDarkSecondary' : 'secondaryDark' %}

<div class="call-to-action call-to-action--{{ color }} call-to-action--{{ width }}">
    <div class="call-to-action__container">
        <div class="call-to-action__content">
            <div class="call-to-action__text-container">
                {% if component.leadInText %}
                    <div class="call-to-action__lead-in-text">
                        {{ component.leadInText }}
                    </div>
                {% endif %}
                <p class="call-to-action__description">
                    {{ component.description }}
                </p>
            </div>

            <div class="call-to-action__button-container">
                {% include 'bits/standard-button/standard-button.twig' with {
                    button: {
                        text: component.linkText,
                        url: component.linkReference,
                        linkType: component.linkType,
                        variant: buttonVariant
                    }
                } %}
            </div>
        </div>
    </div>
</div>
 
{
  "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": []
          }
        ]
      }
    ]
  },
  "component": {
    "type": "call-to-action",
    "leadInText": "Want to stay in the loop?",
    "description": "Stay updated with us by signing up for our Newsletter.",
    "linkText": "Subscribe",
    "linkUrl": "#",
    "linkType": "internal"
  },
  "colorVariant": "navy",
  "widthVariant": "full-width"
}
  • Content: 
    .call-to-action {
    &--full-width {
        --alignButton: center;
        --alignTextOnSmall: center;
        --buttonWidthOnSmall: 100%;

        align-items: center;
        background: var(--backgroundColor);
        display: flex;
        justify-content: center;
        padding: 6rem 0;
    }
    
    &--component-width {
        @include componentWithMargin;
        --alignTextOnSmall: left;
        --alignButton: flex-end;
        --buttonWidthOnSmall: auto;
    }

    &--purpleTint {
        --backgroundColor: var(--purpleTint);
        --textColor: var(--purple);
    }

    &--navy {
        --backgroundColor: var(--navy);
        --textColor: var(--white);
    }

    &__container {
        max-width: 59rem;
        flex: 1 1 100%;

        container-type: inline-size;
        container-name: call-to-action;
    }


    &__content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        background-color: var(--backgroundColor);
        padding: 2.25rem;
        position: relative;
        gap: 1.5rem;

        @container (max-width: calc(42rem - 1px)) {
            text-align: var(--alignTextOnSmall);
        }

        @container (min-width: 42rem) {
            flex-direction: row;
            align-items: var(--alignButton);
            justify-content: space-between;
        }
    }

    &__text-container {
        flex: 1 1 70%;
    }

    &__lead-in-text {
        @include label;
        color: var(--textColor);
        margin-bottom: 0.25rem;
    }

    &__description {
        @include bodyLarge;
        color: var(--textColor);
        font-weight: 300;
    }

    &__button-container {
        @container call-to-action (min-width: 42rem) {
            flex: 1 1 30%;
            display: flex;
            justify-content: end;
        }

        > * {
            @container (max-width: calc(42rem - 1px)) {
                width: var(--buttonWidthOnSmall);
            }
        }
    }
}
  • URL: /components/raw/call-to-action/call-to-action.scss
  • Filesystem Path: patterns/components/call-to-action/call-to-action.scss
  • Size: 2 KB

No notes defined.