Project Lima pattern lib

Misc 

<form action="#" method="post" class="b-form">
    <div class="b-alert" role="alert">
        <h4>Lorem</h4>
        <p>Example alert thing lorem ipsum:</p>
        <ul>
            <li>One</li>
            <li>Two</li>
            <li>Three</li>
            <li>Four five six seven eight!</li>
        </ul>
    </div>

    <div class="b-form__group">
        <label class="b-form__label" for="name">Input type="text"</label>
        <input class="b-form__input" type="text" id="name" placeholder="Default text" />
        <span class="b-form__message"></span>
    </div>

    <div class="b-form__group">
        <label class="b-form__label b-hide" for="name">Hidden Label</label>
        <input class="b-form__input" type="text" id="name" placeholder="Hidden Label" />
        <span class="b-form__message"></span>
    </div>

    <div class="b-form__group b-form__group--button-container b-button-group">
        <input type="reset" id="reset-1" class="b-button b-button--secondary" value="Reset button" />
        <button class="b-button b-button--primary" type="Submit">Submit button</button>
    </div>
</form>
 
<form action="#" method="post" class="b-form">
    <div class="b-alert" role="alert">
        <h4>Lorem</h4>
        <p>Example alert thing lorem ipsum:</p>
        <ul>
            <li>One</li>
            <li>Two</li>
            <li>Three</li>
            <li>Four five six seven eight!</li>
        </ul>
    </div>

    <div class="b-form__group">
        <label class="b-form__label" for="name">Input type="text"</label>
        <input class="b-form__input" type="text" id="name" placeholder="Default text" />
        <span class="b-form__message"></span>
    </div>

    <div class="b-form__group">
        <label class="b-form__label b-hide" for="name">Hidden Label</label>
        <input class="b-form__input" type="text" id="name" placeholder="Hidden Label" />
        <span class="b-form__message"></span>
    </div>

    <div class="b-form__group b-form__group--button-container b-button-group">
        <input type="reset" id="reset-1" class="b-button b-button--secondary" value="Reset button" />
        <button class="b-button b-button--primary" type="Submit">Submit button</button>
    </div>
</form>
 
/* No context defined for this component. */

Make sure all inputs have an adequate label (or legend for checkboxes and radio buttons) for accessibility purposes, as placeholders are not read by screen readers, so it will be the only description for each input. If you do not want a visible label it is best to add the class “.b-hide”.

For better usability each input (or grouping of inputs in the case of radio buttons and checkboxes) will have a “.b-form__message” class, this is to add feedback to the user on issues with their input.

When styling forms, most is controlled through SCSS variables, simply copy the main vars sheet from ecce-lima folder as the basis and edit the variables. If the variables do not suffice, then create an override style sheet with the extras styles necessary.

All inputs should be wrapped in a div (or a fieldset for checkboxes and radio buttons) with a class of “.b-form__group”.

If you wish to align the inputs inline with each other rather than block level that they are currently, I would advise you use the column system.