roll20-character-sheets/D&D_5e_Shaped/precompiled/components/npc/abilities.html

<div class="shaped-row">
  <div class="col-15 center">
    <button type="roll" name="roll_strength_check" value="@{output_option} &{template:5e-shaped} {{ability=1}} {{character_name=@{character_name}}} @{show_character_name} {{title=Strength}} {{subheader=Ability Check}} {{roll_toggle=1}} {{roll1=[[d20@{d20_mod} + @{strength_check_mod}]]}} @{roll_setting}@{d20_mod} + @{strength_check_mod}]]}} @{attacher_strength_check}" tabindex="-1">
      <div class="heading uppercase">
        {{'ABILITIES.strength.SHORT_NAME' | translate}}
      </div>
    </button>
    <div class="shaped-row center">
      <div class="col-40">
        <input type="number" name="attr_strength" class="no-border no-spin" accept="STR">
      </div>
      <div class="col-50 parenthesis-wrapper">
        <input type="hidden" name="attr_strength_mod">
        <input type="text" name="attr_strength_mod_with_sign" class="no-border center" readonly tabindex="-1">
      </div>
    </div>
  </div>
  <div class="col-15 center">
    <button type="roll" name="roll_dexterity_check" value="@{output_option} &{template:5e-shaped} {{ability=1}} {{character_name=@{character_name}}} @{show_character_name} {{title=Dexterity}} {{subheader=Ability check}} {{roll_toggle=1}} {{roll1=[[d20@{d20_mod} + @{dexterity_check_mod}]]}} @{roll_setting}@{d20_mod} + @{dexterity_check_mod}]]}} @{attacher_dexterity_check}" tabindex="-1">
      <div class="heading uppercase">
        {{'ABILITIES.dexterity.SHORT_NAME' | translate}}
      </div>
    </button>
    <div class="shaped-row center">
      <div class="col-40">
        <input type="number" name="attr_dexterity" class="no-border no-spin" accept="DEX">
      </div>
      <div class="col-50 parenthesis-wrapper">
        <input type="hidden" name="attr_dexterity_mod">
        <input type="text" name="attr_dexterity_mod_with_sign" class="no-border center" readonly tabindex="-1">
      </div>
    </div>
  </div>
  <div class="col-15 center">
    <button type="roll" name="roll_constitution_check" value="@{output_option} &{template:5e-shaped} {{ability=1}} {{character_name=@{character_name}}} @{show_character_name} {{title=Constitution}} {{subheader=Ability check}} {{roll_toggle=1}} {{roll1=[[d20@{d20_mod} + @{constitution_check_mod}]]}} @{roll_setting}@{d20_mod} + @{constitution_check_mod}]]}} @{attacher_constitution_check}" tabindex="-1">
      <div class="heading uppercase">
        {{'ABILITIES.constitution.SHORT_NAME' | translate}}
      </div>
    </button>
    <div class="shaped-row center">
      <div class="col-40">
        <input type="number" name="attr_constitution" class="no-border no-spin" accept="CON">
      </div>
      <div class="col-50 parenthesis-wrapper">
        <input type="hidden" name="attr_constitution_mod">
        <input type="text" name="attr_constitution_mod_with_sign" class="no-border center" readonly tabindex="-1">
      </div>
    </div>
  </div>
  <div class="col-15 center">
    <button type="roll" name="roll_intelligence_check" value="@{output_option} &{template:5e-shaped} {{ability=1}} {{character_name=@{character_name}}} @{show_character_name} {{title=Intelligence}} {{subheader=Ability check}} {{roll_toggle=1}} {{roll1=[[d20@{d20_mod} + @{intelligence_check_mod}]]}} @{roll_setting}@{d20_mod} + @{intelligence_check_mod}]]}} @{attacher_intelligence_check}" tabindex="-1">
      <div class="heading uppercase">
        {{'ABILITIES.intelligence.SHORT_NAME' | translate}}
      </div>
    </button>
    <div class="shaped-row center">
      <div class="col-40">
        <input type="number" name="attr_intelligence" class="no-border no-spin" accept="INT">
      </div>
      <div class="col-50 parenthesis-wrapper">
        <input type="hidden" name="attr_intelligence_mod">
        <input type="text" name="attr_intelligence_mod_with_sign" class="no-border center" readonly tabindex="-1">
      </div>
    </div>
  </div>
  <div class="col-15 center">
    <button type="roll" name="roll_wisdom_check" value="@{output_option} &{template:5e-shaped} {{ability=1}} {{character_name=@{character_name}}} @{show_character_name} {{title=Wisdom}} {{subheader=Ability check}} {{roll_toggle=1}} {{roll1=[[d20@{d20_mod} + @{wisdom_check_mod}]]}} @{roll_setting}@{d20_mod} + @{wisdom_check_mod}]]}} @{attacher_wisdom_check}" tabindex="-1">
      <div class="heading uppercase">
        {{'ABILITIES.wisdom.SHORT_NAME' | translate}}
      </div>
    </button>
    <div class="shaped-row center">
      <div class="col-40">
        <input type="number" name="attr_wisdom" class="no-border no-spin" accept="WIS">
      </div>
      <div class="col-50 parenthesis-wrapper">
        <input type="hidden" name="attr_wisdom_mod">
        <input type="text" name="attr_wisdom_mod_with_sign" class="no-border center" readonly tabindex="-1">
      </div>
    </div>
  </div>
  <div class="col-15 center">
    <button type="roll" name="roll_charisma_check" value="@{output_option} &{template:5e-shaped} {{ability=1}} {{character_name=@{character_name}}} @{show_character_name} {{title=Charisma}} {{subheader=Ability check}} {{roll_toggle=1}} {{roll1=[[d20@{d20_mod} + @{charisma_check_mod}]]}} @{roll_setting}@{d20_mod} + @{charisma_check_mod}]]}} @{attacher_charisma_check}" tabindex="-1">
      <div class="heading uppercase">
        {{'ABILITIES.charisma.SHORT_NAME' | translate}}
      </div>
    </button>
    <div class="shaped-row center">
      <div class="col-40">
        <input type="number" name="attr_charisma" class="no-border no-spin" accept="CHA">
      </div>
      <div class="col-50 parenthesis-wrapper">
        <input type="hidden" name="attr_charisma_mod">
        <input type="text" name="attr_charisma_mod_with_sign" class="no-border center" readonly tabindex="-1">
      </div>
    </div>
  </div>
</div>