roll20-character-sheets/5eShaped/precompiled/components/header/header.html

<div class="core-header pc">
  <div class="shaped-row">
    <div class="col-40">
      <div class="dnd-image-wrapper">
        <img src="http://i.imgur.com/X44kw8b.png" alt="Dungeons & Dragons (5th edition)">
      </div>
      <div class="character-name">
        <input type="text" name="attr_character_name">
        <div class="wrap-box-label" data-i18n="CHARACTER_NAME"></div>
      </div>
    </div>
    <div class="col-60 header-info">
      <div class="wrap-box">
        <div class="shaped-row">
          <div class="col-70 pad-r-lg">
            <input type="text" name="attr_class_and_level"  data-i18n-placeholder="CLASS_AND_LEVEL_PLACEHOLDER" readonly>
            <button type="roll" name="roll_shaped_class" class="wrapper-button" value="@{output_option} &{template:5e-shaped} {{character_name=@{character_name}}} @{show_character_name} {{title=<span data-i18n=CLASS_AND_LEVEL>Class & Level</span>}} {{text_big=@{class_and_level}}}">
              <div class="wrap-box-label" data-i18n="CLASS_AND_LEVEL"></div>
            </button>
          </div>
          <div class="col-30">
            <input type="text" name="attr_background">
            <button type="roll" name="roll_shaped_background" class="wrapper-button" value="@{output_option} &{template:5e-shaped} {{character_name=@{character_name}}} @{show_character_name} {{title=<span data-i18n=BACKGROUND>Background</span>}} {{text_big=@{background}}}">
              <div class="wrap-box-label" data-i18n="BACKGROUND"></div>
            </button>
          </div>
        </div>
        <div class="shaped-row">
          <div class="col-35 pad-r-lg">
            <input type="text" name="attr_race">
            <button type="roll" name="roll_shaped_race" class="wrapper-button" value="@{output_option} &{template:5e-shaped} {{character_name=@{character_name}}} @{show_character_name} {{title=<span data-i18n=RACE>Race</span>}} {{text_big=@{race}}}">
              <div class="wrap-box-label" data-i18n="RACE"></div>
            </button>
          </div>
          <div class="col-35 pad-r-lg">
            <input type="text" name="attr_alignment">
            <button type="roll" name="roll_shaped_alignment" class="wrapper-button" value="@{output_option} &{template:5e-shaped} {{character_name=@{character_name}}} @{show_character_name} {{title=<span data-i18n=ALIGNMENT>Alignment</span>}} {{text_big=@{alignment}}}">
              <div class="wrap-box-label" data-i18n="ALIGNMENT"></div>
            </button>
          </div>
          <div class="col-30">
            <div class="shaped-row flex-end">
              <div class="col-47">
                <input type="number" name="attr_xp" class="no-spin" min="0" step="1">
              </div>
              <div class="col-06 center">&#47;</div>
              <div class="col-47">
                <span name="attr_xp_next_level" class="pseudo-input border-bottom center"></span>
              </div>
            </div>
            <button type="roll" name="roll_shaped_xp" class="wrapper-button" value="@{output_option} &{template:5e-shaped} {{character_name=@{character_name}}} @{show_character_name} {{title=<span data-i18n=EXPERIENCE_POINTS>Experience points</span>Experience points}} {{text_top=[[@{xp}]]&#47;[[@{xp_next_level}]]}} {{text_big=for level [[@{level} + 1]]}}">
              <div class="wrap-box-label" data-i18n="EXPERIENCE_POINTS"></div>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>