UCLA Component Library

Footer: Email 

<div class="email">

    <h3 class="email__heading">SIGN UP</h3>
    <p class="email__description">Get the latest news, stories, and events from UCLA Strategic Communications</p>

    <form class="email__form" method="post" action="#">
        <div class="email__input-container">
            <div class="email__input email__input-email">
                <label class="email__input-label" for="Email">Email</label>
                <input type="text" id="Email" class="email__input-text" name="Email" label="Email" placeholder="joebruin@ucla.edu" aria-label="Your Email Address" required>
            </div>
            <div class="email__input email__input-firstname">
                <label class="email__input-label" for="First_Name">First Name</label>
                <input type="text" id="First_Name" class="email__input-text" name="First_Name" label="FirstName" placeholder="First Name" aria-label="Your First Name" required>
            </div>
            <div class="email__input email__input-lastname">
                <label class="email__input-label" for="Last_Name">Last Name</label>
                <input type="text" id="Last_Name" class="email__input-text" name="Last_Name" label="LastName" placeholder="Last Name" aria-label="Your Last Name" required>
            </div>
            <div class="email__input email__input-zipcode">
                <label class="email__input-label" for="Zip">Zip Code</label>
                <input type="text" id="Zip" class="email__input-text" name="Zip" label="ZipCode" placeholder="Zip Code" aria-label="Your Zipcode" required>
            </div>
            <div class="email__input email__input-button">
                <input class="email__input-submit" type="submit" value="Sign Up" aria-label="Sign Up">
            </div>
        </div>
    </form>

    <p class="email__legal-text">
        You may unsubscribe at any time. Zip code is used to improve the content we share. Refer to our <a class="email__legal-link" href="/terms-of-use/">Terms of Use</a> for more information on how we store and protect your data.
    </p>

</div>