roll20-character-sheets/D&D_5e_Shaped/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">{{'CHARACTER_NAME' | translate}}</div>
      </div>
    </div>
    <div class="col-60 header-info">
      <div class="wrap-box pad-md">
        <div class="shaped-row">
          <div class="col-70 pad-r-lg">
            <input type="text" name="attr_class_and_level" placeholder="set on Character" readonly>
            <button type="roll" name="roll_class" class="wrapper-button" value="@{output_option} &{template:5e-shaped} {{character_name=@{character_name}}} @{show_character_name} {{title=Class & Level}} {{text_big=@{class_and_level}}}">
              <div class="wrap-box-label">{{'CLASS_AND_LEVEL' | translate}}</div>
            </button>
          </div>
          <div class="col-30">
            <input type="text" name="attr_background">
            <button type="roll" name="roll_background" class="wrapper-button" value="@{output_option} &{template:5e-shaped} {{character_name=@{character_name}}} @{show_character_name} {{title=Background}} {{text_big=@{background}}}">
              <div class="wrap-box-label">{{'BACKGROUND' | translate}}</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_race" class="wrapper-button" value="@{output_option} &{template:5e-shaped} {{character_name=@{character_name}}} @{show_character_name} {{title=Race}} {{text_big=@{race}}}">
              <div class="wrap-box-label">{{'RACE' | translate}}</div>
            </button>
          </div>
          <div class="col-35 pad-r-lg">
            <input type="text" name="attr_alignment">
            <button type="roll" name="roll_alignment" class="wrapper-button" value="@{output_option} &{template:5e-shaped} {{character_name=@{character_name}}} @{show_character_name} {{title=Alignment}} {{text_big=@{alignment}}}">
              <div class="wrap-box-label">{{'ALIGNMENT' | translate}}</div>
            </button>
          </div>
          <div class="col-30">
            <div class="shaped-row flex-end">
              <div class="col-42">
                <input type="number" name="attr_xp" class="no-spin" min="0" step="1">
              </div>
              <div class="col-06 center">&#47;</div>
              <div class="col-42">
                <input type="number" name="attr_xp_next_level" readonly>
              </div>
            </div>
            <button type="roll" name="roll_xp" class="wrapper-button" value="@{output_option} &{template:5e-shaped} {{character_name=@{character_name}}} @{show_character_name} {{title=Experience Points}} {{text_top=[[@{xp}]]&#47;[[@{xp_next_level}]]}} {{text_big=for level [[@{level} + 1]]}}">
              <div class="wrap-box-label">{{'EXPERIENCE_POINTS' | translate}}</div>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>