Visually, the closest option might be to use form styling from the lightning design system (http://www.lightningdesignsystem.com/components/forms/). The following code and screenshot are pulled from the Edit Dialog for Touch (http://www.lightningdesignsystem.com/components/forms/) example. Of course, these section headers are not animated to collapse a section by default. Depending on the requirement, you could use a conditional expression or a controller action to apply and remove the "slds-hide" class to the div immediately below the header.
Visually, the closest option might be to use form styling from the lightning design system (http://www.lightningdesignsystem.com/components/forms/). The following code and screenshot are pulled from the Edit Dialog for Touch (http://www.lightningdesignsystem.com/components/forms/) example. Of course, these section headers are not animated to collapse a section by default. Depending on the requirement, you could use a conditional expression or a controller action to apply and remove the "slds-hide" class to the div immediately below the header.
<pre>
<h3 class="slds-section-title--divider">Section Information</h3>
<div class="slds-form--stacked slds-p-around--medium slds-m-bottom--x-small">
<div class="slds-form-element">
<label class="slds-form-element__label" for="inputNameSample1">Name Suffix</label>
<div class="slds-form-element__control">
<input id="inputNameSample1" class="slds-input" type="text" placeholder="Ms." />
</div>
</div>
</div>
</pre>
All Answers
<pre>
<h3 class="slds-section-title--divider">Section Information</h3>
<div class="slds-form--stacked slds-p-around--medium slds-m-bottom--x-small">
<div class="slds-form-element">
<label class="slds-form-element__label" for="inputNameSample1">Name Suffix</label>
<div class="slds-form-element__control">
<input id="inputNameSample1" class="slds-input" type="text" placeholder="Ms." />
</div>
</div>
</div>
</pre>
Can you please share the full code of the form you created if possible.
Thanks and regards,
Feroz