package: '@thumbtack/tp-ui-component-alert' kit: alert/index.mdx platform: scss url: /components/alert/scss/ mdxType: componentApi

import '@thumbtack/tp-ui-component-alert';

Banner alerts

These alerts should be used at the very top of a page.

<div class="tp-alert tp-alert--banner tp-alert--bad-news">
    <div class="tp-alert__text">
        Your credit card is about to expire. To keep quoting on job requests please
        <a href="https://example.com/">update your credit card now</a>.
    </div>
</div>

<div class="tp-alert tp-alert--banner tp-alert--good-news">
    <div class="tp-alert__text">
        Your credit card is about to expire. To keep quoting on job requests please
        <a href="https://example.com/">update your credit card now</a>.
    </div>
</div>

<div class="tp-alert tp-alert--banner tp-alert--warning">
    <div class="tp-alert__text">
        Your credit card is about to expire. To keep quoting on job requests please
        <a href="https://example.com/">update your credit card now</a>.
    </div>
</div>

<div class="tp-alert tp-alert--banner tp-alert--note">
    <div class="tp-alert__text">
        Your credit card is about to expire. To keep quoting on job requests please
        <a href="https://example.com/">update your credit card now</a>.
    </div>
</div>

In-page alerts

<div class="tp-alert tp-alert--bad-news">
    <svg
        class="tp-alert__icon"
        xmlns="http://www.w3.org/2000/svg"
        width="28"
        height="28"
        viewBox="0 0 28 28"
        data-thumbprint-id="notificationalerts-warning--medium"
    >
        <path
            fillRule="evenodd"
            d="M13.9995633,19 C13.4475633,19 12.9995633,19.448 12.9995633,20 C12.9995633,20.552 13.4475633,21 13.9995633,21 C14.5515633,21 14.9995633,20.552 14.9995633,20 C14.9995633,19.448 14.5515633,19 13.9995633,19 M13.9995633,9 C13.4475633,9 12.9995633,9.448 12.9995633,10 L12.9995633,15.997 C12.9995633,16.549 13.4475633,16.997 13.9995633,16.997 C14.5515633,16.997 14.9995633,16.549 14.9995633,15.997 L14.9995633,10 C14.9995633,9.448 14.5515633,9 13.9995633,9 M23.6805633,21.827 C23.2555633,22.562 22.4925633,23 21.6395633,23 L6.36056325,23 C5.50756325,23 4.74456325,22.562 4.31956325,21.827 C3.89756325,21.099 3.89556325,20.228 4.31456325,19.498 L11.9535633,6.182 C12.3785633,5.442 13.1435633,5 13.9995633,5 C14.8565633,5 15.6215633,5.442 16.0465633,6.182 L23.6855633,19.498 C24.1035633,20.228 24.1025633,21.099 23.6805633,21.827 M25.4195633,18.503 L17.7805633,5.187 C16.9945633,3.818 15.5815633,3 13.9995633,3 C12.4165633,3 11.0045633,3.818 10.2195633,5.187 L2.57956325,18.503 C1.80156325,19.859 1.80556325,21.476 2.58856325,22.829 C3.37456325,24.188 4.78556325,25 6.36056325,25 L21.6395633,25 C23.2135633,25 24.6235633,24.188 25.4115633,22.829 C26.1945633,21.476 26.1985633,19.859 25.4195633,18.503"
        />
    </svg>

    <div class="tp-alert__text">
        Your credit card is about to expire. To keep quoting on job requests please
        <a href="https://example.com/">update your credit card now</a>.
    </div>
</div>

<div class="tp-alert tp-alert--good-news">
    <svg
        class="tp-alert__icon"
        xmlns="http://www.w3.org/2000/svg"
        width="28"
        height="28"
        viewBox="0 0 28 28"
        data-thumbprint-id="contentactions-check--medium"
    >
        <path
            fillRule="evenodd"
            d="M21.5994,6.2001 C21.1604,5.8681 20.5324,5.9591 20.2014,6.4001 L11.8204,17.5751 L7.6244,14.2191 C7.1944,13.8741 6.5654,13.9451 6.2184,14.3751 C5.8734,14.8061 5.9454,15.4361 6.3744,15.7811 L12.1804,20.4251 L21.7994,7.6001 C22.1314,7.1581 22.0414,6.5311 21.5994,6.2001"
        />
    </svg>

    <div class="tp-alert__text">
        Your credit card is about to expire. To keep quoting on job requests please
        <a href="https://example.com/">update your credit card now</a>.
    </div>
</div>

<div class="tp-alert tp-alert--warning">
    <svg
        class="tp-alert__icon"
        xmlns="http://www.w3.org/2000/svg"
        width="28"
        height="28"
        viewBox="0 0 28 28"
        data-thumbprint-id="notificationalerts-warning--medium"
    >
        <path
            fillRule="evenodd"
            d="M13.9995633,19 C13.4475633,19 12.9995633,19.448 12.9995633,20 C12.9995633,20.552 13.4475633,21 13.9995633,21 C14.5515633,21 14.9995633,20.552 14.9995633,20 C14.9995633,19.448 14.5515633,19 13.9995633,19 M13.9995633,9 C13.4475633,9 12.9995633,9.448 12.9995633,10 L12.9995633,15.997 C12.9995633,16.549 13.4475633,16.997 13.9995633,16.997 C14.5515633,16.997 14.9995633,16.549 14.9995633,15.997 L14.9995633,10 C14.9995633,9.448 14.5515633,9 13.9995633,9 M23.6805633,21.827 C23.2555633,22.562 22.4925633,23 21.6395633,23 L6.36056325,23 C5.50756325,23 4.74456325,22.562 4.31956325,21.827 C3.89756325,21.099 3.89556325,20.228 4.31456325,19.498 L11.9535633,6.182 C12.3785633,5.442 13.1435633,5 13.9995633,5 C14.8565633,5 15.6215633,5.442 16.0465633,6.182 L23.6855633,19.498 C24.1035633,20.228 24.1025633,21.099 23.6805633,21.827 M25.4195633,18.503 L17.7805633,5.187 C16.9945633,3.818 15.5815633,3 13.9995633,3 C12.4165633,3 11.0045633,3.818 10.2195633,5.187 L2.57956325,18.503 C1.80156325,19.859 1.80556325,21.476 2.58856325,22.829 C3.37456325,24.188 4.78556325,25 6.36056325,25 L21.6395633,25 C23.2135633,25 24.6235633,24.188 25.4115633,22.829 C26.1945633,21.476 26.1985633,19.859 25.4195633,18.503"
        />
    </svg>

    <div class="tp-alert__text">
        Your credit card is about to expire. To keep quoting on job requests please
        <a href="https://example.com/">update your credit card now</a>.
    </div>
</div>

<div class="tp-alert tp-alert--note">
    <svg
        class="tp-alert__icon"
        xmlns="http://www.w3.org/2000/svg"
        width="28"
        height="28"
        viewBox="0 0 28 28"
        data-thumbprint-id="notificationalerts-info--medium"
    >
        <path
            fillRule="evenodd"
            d="M13.9994997,7.99718612 C13.4462116,7.99718612 12.9989786,8.44540556 12.9989786,8.99767595 C12.9989786,9.54994633 13.4462116,9.99816577 13.9994997,9.99816577 C14.5537884,9.99816577 15.0000208,9.54994633 15.0000208,8.99767595 C15.0000208,8.44540556 14.5537884,7.99718612 13.9994997,7.99718612 M21.0741845,21.0745886 C17.1751537,24.9754984 10.8248463,24.9754984 6.92581553,21.0745886 C3.0227827,17.1736788 3.0227827,10.8265713 6.92581553,6.92566152 C10.8258468,3.02575219 17.1741532,3.0247517 21.0741845,6.92566152 C24.9772173,10.8265713 24.9772173,17.1736788 21.0741845,21.0745886 M22.4889213,5.51096891 C17.8084836,0.829677029 10.1915164,0.829677029 5.51107869,5.51096891 C0.829640438,10.1912603 0.829640438,17.8089898 5.51107869,22.4892812 C7.85029703,24.8304274 10.9258989,26 13.9994997,26 C17.0741011,26 20.1487024,24.8304274 22.4889213,22.4892812 C27.1703596,17.8089898 27.1703596,10.1912603 22.4889213,5.51096891 M13.9994997,11.9991454 C13.4462116,11.9991454 12.9989786,12.4473649 12.9989786,12.9996352 L12.9989786,19.0025742 C12.9989786,19.5548446 13.4462116,20.003064 13.9994997,20.003064 C14.5537884,20.003064 15.0000208,19.5548446 15.0000208,19.0025742 L15.0000208,12.9996352 C15.0000208,12.4473649 14.5537884,11.9991454 13.9994997,11.9991454"
        />
    </svg>

    <div class="tp-alert__text">
        Your credit card is about to expire. To keep quoting on job requests please
        <a href="https://example.com/">update your credit card now</a>.
    </div>
</div>