Example
Markup: components/email-signup/email-signup-workplace.twig
<div class="cr-email-signup-workplace-form contextual-region block-cr-email-signup block--cr-email-signup block--cr-email-signup--workplace block--cr-email-signup--step-1 block--cr-email-signup--banner crEMailSignup-processed" data-drupal-selector="cr-email-signup-workplace-form" id="block-emailsignupblockworkplace">
<div class="block--cr-email-signup__inner-wrapper">
<div class="cr-email-signup--messages">
<div class="esu-title-message">
<p>Sign-up to our newsletter</p>
</div>
<div class="esu-initial-message">
<p>We’ll keep you up to date with the latest Comic Relief updates, handy fundraising tips & tools as well as exciting news from Red Nose Day and Sport Relief.</p>
</div>
<div class="esu-first-success-message">
<p>ESU Workplace: success message</p>
</div>
</div>
<div class="esu-errors messages messages--error">
<div></div>
</div>
<form action="/web/test/esu" method="post" id="cr-email-signup-workplace-form" accept-charset="UTF-8" data-drupal-form-fields="edit-firstname,edit-email--4,edit-step1--4">
<input class="esu-device" data-drupal-selector="edit-device" type="hidden" name="device" value="OS_X_10.11.6_-_Chrome_56.0.2924.87">
<input class="esu-source" data-drupal-selector="edit-source" type="hidden" name="source" value="Banner">
<div class="js-form-item form-item js-form-type-textfield form-type-textfield js-form-item-firstname form-item-firstname">
<label for="edit-firstname">Your first name</label>
<input class="–metrika-nokeys form-text" data-drupal-selector="edit-firstname" type="text" id="edit-firstname" name="firstName" value="" size="60" maxlength="100" placeholder="Enter your first name">
</div>
<div class="js-form-item form-item js-form-type-textfield form-type-textfield js-form-item-email form-item-email">
<label for="edit-email--4">Your email address</label>
<input class="–metrika-nokeys form-text" data-drupal-selector="edit-email" type="text" id="edit-email--4" name="email" value="" size="60" maxlength="500" placeholder="Enter your email address">
</div>
<input class="step1 button btn btn--yellow js-form-submit form-submit" data-drupal-selector="edit-step1" type="submit" id="edit-step1--4" name="step1" value="Sign Up">
<input data-drupal-selector="form-ir3piqq75hewphoqjybj-co-i4iwk5-zblgbyc8sqso" type="hidden" name="form_build_id" value="form-ir3PiQq75HEwpHoqjYbJ_cO-I4iwK5-ZBLgbYc8sqso">
<input data-drupal-selector="edit-cr-email-signup-workplace-form-form-token" type="hidden" name="form_token" value="D5eVtLpvyGoOb9l0MxgyODaD28ouAReO9ExRWopMsk4">
<input data-drupal-selector="edit-cr-email-signup-workplace-form" type="hidden" name="form_id" value="cr_email_signup_workplace_form">
</form>
<div class="esu-privacy-message">
<p>Find out how we will use your information in our <a class="link link--white inline" href="/privacy-policy">Privacy Policy</a>
<br> <br>If you are under 18, please make sure you have your parents’ permission before providing us with any personal details.
</p>
</div>
</div>
</div>
Source:
_cr17-styleguide.scss
, line 412