Default

The form section heading separates different sub sections within a single form

HTML

<div class="t-content">
    <div class="c-formSectionHeading">
        <span class="c-formSectionHeading-titleText">This is a form section title</span>
    </div>
    <ng-form class="c-generalForm" name="form1" autocomplete="off">
        <fieldset class="c-fieldset">
            <div class="c-fieldset-item is-required"
                ng-class="{'is-error': (form1.FirstName.$touched || form1.$submitted) && form1.FirstName.$invalid}">
                <label for="firstName">First Name</label>
                <input id="firstName" type="text" placeholder="First Name" required name="FirstName">
            </div>
            <div class="c-fieldset-item is-required"
                ng-class="{'is-error': (form1.LastName.$touched || form1.$submitted) && form1.LastName.$invalid}">
                <label for="lastName">Last Name</label>
                <input id="lastName" type="text" placeholder="Last Name" required name="LastName">
            </div>
        </fieldset>
    </ng-form>
    <div class="c-formSectionHeading">
        <span class="c-formSectionHeading-titleText">Another section</span>
    </div>
    <ng-form class="c-generalForm" name="form2">
        <fieldset class="c-fieldset">
            <div class="c-fieldset-item is-required"
                ng-class="{'is-error': (form2.Address.$touched || form2.$submitted) && form2.Address.$invalid}">
                <label for="address">Address</label>
                <input id="address" type="text" placeholder="Address" required name="Address">
            </div>
            <div class="c-fieldset-item is-required"
                ng-class="{'is-error': (form2.City.$touched || form2.$submitted) && form2.City.$invalid}">
                <label for="city">City</label>
                <input id="city" type="text" placeholder="City" required name="City">
            </div>
        </fieldset>
    </ng-form>
    <div class="c-formEditableSectionHeading">
        <div class="c-formSectionHeading">
            <span class="c-formSectionHeading-titleText">Editable Section Heading</span>
        </div>
        <inv-icon glyph="'pencil'"></inv-icon>
    </div>
    <ng-form class="c-generalForm" name="form3">
        <fieldset class="c-fieldset">
            <div class="c-fieldset-item is-required"
                 ng-class="{'is-error': (form2.Address.$touched || form2.$submitted) && form2.Address.$invalid}">
                <label for="address">Address</label>
                <input id="address" type="text" placeholder="Address" required name="Address">
            </div>
            <div class="c-fieldset-item is-required"
                 ng-class="{'is-error': (form2.City.$touched || form2.$submitted) && form2.City.$invalid}">
                <label for="city">City</label>
                <input id="city" type="text" placeholder="City" required name="City">
            </div>
        </fieldset>
    </ng-form>
</div>