Enter your account information and password
Enter your account information and long text here for example lorem ipsum dolor sit amet consectetur adipiscing elit
<div class="block-form-group">
<div class="block-form">
<div class="block-form-primary">
<h5 class="block-form-title">Account Information</h5>
<p class="block-form-text">Enter your account information and password</p>
</div>
<div class="block-form-secondary">
<!-- fields -->
<div class="block-grid">
<div class="block-grid-item">
<div class="form-field">
<label class="form-label">First Name</label>
<input type="text" class="form-input" />
</div>
</div>
<div class="block-grid-item">
<div class="form-field">
<label class="form-label">Last Name</label>
<input type="text" class="form-input" />
</div>
</div>
</div>
<div class="block-grid">
<div class="block-grid-item">
<div class="form-field">
<label class="form-label">Address</label>
<input type="text" class="form-input" />
</div>
</div>
</div>
<div class="block-grid">
<div class="block-grid-item">
<div class="form-field">
<label class="form-label">City</label>
<input type="text" class="form-input" />
</div>
</div>
<div class="block-grid-item">
<div class="form-field">
<label class="form-label">Zip Code</label>
<input type="text" class="form-input" />
</div>
</div>
</div>
<!-- fields -->
</div>
</div>
<div class="block-form">
<div class="block-form-primary">
<h5 class="block-form-title">Other Information</h5>
<p class="block-form-text">
Enter your account information and long text here for example lorem ipsum dolor sit amet
consectetur adipiscing elit
</p>
</div>
<div class="block-form-secondary">
<!-- fields -->
<div class="block-grid">
<div class="block-grid-item">
<div class="form-field">
<label class="form-label">First Name</label>
<input type="text" class="form-input" />
</div>
</div>
<div class="block-grid-item">
<div class="form-field">
<label class="form-label">Last Name</label>
<input type="text" class="form-input" />
</div>
</div>
</div>
<div class="block-grid">
<div class="block-grid-item">
<div class="form-field">
<label class="form-label">Address</label>
<input type="text" class="form-input" />
</div>
</div>
</div>
<div class="block-grid">
<div class="block-grid-item">
<div class="form-field">
<label class="form-label">City</label>
<input type="text" class="form-input" />
</div>
</div>
<div class="block-grid-item">
<div class="form-field">
<label class="form-label">Zip Code</label>
<input type="text" class="form-input" />
</div>
</div>
</div>
<!-- fields -->
</div>
</div>
<div class="block-form-action">
<div class="button-bundle">
<button class="button button-outline">Cancel</button>
<button class="button button-primary">Save</button>
</div>
</div>
</div>Enter your account information and password
Enter your account information and long text here for example lorem ipsum dolor sit amet consectetur adipiscing elit
<!-- block form -->
<div class="block-form-group block-form-group-alt">
<div class="block-form">
<div class="block-form-primary">
<h5 class="block-form-title">Account Information</h5>
<p class="block-form-text">Enter your account information and password</p>
</div>
<div class="block-form-secondary">
<!-- fields -->
<div class="block-grid">
<div class="block-grid-item">
<div class="form-field">
<label class="form-label">First Name</label>
<input type="text" class="form-input" />
</div>
</div>
<div class="block-grid-item">
<div class="form-field">
<label class="form-label">Last Name</label>
<input type="text" class="form-input" />
</div>
</div>
</div>
<div class="block-grid">
<div class="block-grid-item">
<div class="form-field">
<label class="form-label">Address</label>
<input type="text" class="form-input" />
</div>
</div>
</div>
<div class="block-grid">
<div class="block-grid-item">
<div class="form-field">
<label class="form-label">City</label>
<input type="text" class="form-input" />
</div>
</div>
<div class="block-grid-item">
<div class="form-field">
<label class="form-label">Zip Code</label>
<input type="text" class="form-input" />
</div>
</div>
</div>
<!-- fields -->
</div>
</div>
<div class="block-form">
<div class="block-form-primary">
<h5 class="block-form-title">Other Information</h5>
<p class="block-form-text">
Enter your account information and long text here for example lorem ipsum dolor sit
amet consectetur adipiscing elit
</p>
</div>
<div class="block-form-secondary">
<!-- fields -->
<div class="block-grid">
<div class="block-grid-item">
<div class="form-field">
<label class="form-label">First Name</label>
<input type="text" class="form-input" />
</div>
</div>
<div class="block-grid-item">
<div class="form-field">
<label class="form-label">Last Name</label>
<input type="text" class="form-input" />
</div>
</div>
</div>
<div class="block-grid">
<div class="block-grid-item">
<div class="form-field">
<label class="form-label">Address</label>
<input type="text" class="form-input" />
</div>
</div>
</div>
<div class="block-grid">
<div class="block-grid-item">
<div class="form-field">
<label class="form-label">City</label>
<input type="text" class="form-input" />
</div>
</div>
<div class="block-grid-item">
<div class="form-field">
<label class="form-label">Zip Code</label>
<input type="text" class="form-input" />
</div>
</div>
</div>
<!-- fields -->
</div>
</div>
<div class="block-form-action">
<div class="button-bundle">
<button class="button button-outline">Cancel</button>
<button class="button button-primary">Save</button>
</div>
</div>
</div>
<!-- block form -->$block-form-group-padding: $box-spacing-large !default;
--r-block-form-group-border-color: var(--r-color-light-darken-15);
--r-block-form-group-border-radius: calc(var(--r-global-border-radius) * 2);
--r-block-form-group-padding: #{$block-form-group-padding};
--r-block-form-border-color: var(--r-block-form-group-border-color);
--r-block-form-text-color: var(--r-color-dark-lighten-30);