11Alerts

Alert messages used through out SYx with their different statuses. There's a variant that is designed for smaller icons. It relies on flexbox internally rather than the Foundation grid to set it's layout. To use it you need to apply the .alert--small-icon modifier on your alert div.

Default styling
.alert--success
success alert
.alert--warning
warning alert
.alert--error
error alert
Show Markup 

<div class="alert [modifier class]" role="alert">
    <div class="row">
        <div class="hide-for-small-only medium-2 columns">
            <p class="text-center">
                <img width="75" alt="">
            </p>
        </div>
        <div class="small-12 medium-8 columns end">
            <p class="alert__heading mb1">Looks like we still need some info</p>
            <div class="alert__content">
                <span class="font-weight-demi">Organization Information</span>
                <p>
                    Your organization&rsquo;s profile is incomplete. Make sure that your organization&rsquo;s
                    profile information is up to date before submitting this profile for review.
                </p>
                <a class="link--underline">Finish Organization Profile</a>
            </div>
        </div>
    </div>
</div>

<div class="alert [modifier class] alert--small-icon js-alert " data-alert role="alert">
    <div class="alert__image" aria-hidden="true">
        <svg class="svg-icon--deep-medium-navy svg-icon--extra-large" width="25" height="25" viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg"><title>Editing Disabled</title><path d="M12.5 25C5.596 25 0 19.404 0 12.5S5.596 0 12.5 0 25 5.596 25 12.5 19.404 25 12.5 25zm0-2C18.3 23 23 18.3 23 12.5S18.3 2 12.5 2 2 6.7 2 12.5 6.7 23 12.5 23z"/><path d="M10.158 16.69l-1.144.242c-.128-.238-.292-.456-.488-.644-.192-.192-.414-.354-.657-.478l.24-1.122.33-.325s.62.013 1.322.702c.703.69.716 1.3.716 1.3l-.33.325zm2.573-7.12l2.62-2.562s.77-.15 1.78.848c1.02.998.87 1.747.87 1.747l-2.612 2.563-2.65-2.596zm-2.43 2.385l-2.58 2.538L7 17.785l3.358-.7 2.59-2.536-2.648-2.6zM9.27 9.508l6.187 6.067.49.476.97-.95-.484-.47-6.19-6.063-.485-.477-.97.954.485.477z"/></svg>
    </div>
    <div class="alert__content">
        <p class="alert__heading">These fields are locked</p>
        <p>
            Some fields are locked after certification. To make changes to locked fields, please request to <a class="link link--underline" href="#">Recertify Position.</a>
        </p>
    </div>
</div>