<wa-card>
  <div slot="header" class="wa-split">
    <h3 class="wa-heading-l wa-stack wa-gap-2xs">
      <span class="brand-font wa-caption-s">
        <wa-icon family="duotone" name="starship"></wa-icon>
        U.S.S. Enterprise
      </span>
      Transfer Request
    </h3>
    <span class="wa-visually-hidden">Department:</span>
    <wa-badge appearance="accent" variant="brand">Security</wa-badge>
  </div>
  <form class="wa-stack">
    <wa-input name="email" type="email" label="Subspace Address" placeholder="e.g. [email protected]" required>
      <wa-icon slot="end" variant="regular" name="envelope"></wa-icon>
    </wa-input>
    <wa-select label="Species" with-clear required>
      <wa-icon slot="start" family="duotone" name="user-visor"></wa-icon>
      <wa-option value="human">Human</wa-option>
      <wa-option value="vulcan">Vulcan</wa-option>
      <wa-option value="klingon">Klingon</wa-option>
      <wa-option value="other">Other</wa-option>
    </wa-select>
    <wa-radio-group
      label="Duty Preference"
      orientation="horizontal"
      name="preference"
    >
      <wa-radio appearance="button" value="away">Away Teams</wa-radio>
      <wa-radio appearance="button" value="brig">Brig</wa-radio>
      <wa-radio appearance="button" value="holodeck">Holodeck</wa-radio>
      <wa-radio appearance="button" value="tenforward">Ten Forward</wa-radio>
    </wa-radio-group>
    <wa-checkbox required>I acknowledge what wearing a “red shirt” means</wa-checkbox>
    <wa-divider></wa-divider>
    <div class="wa-grid">
      <wa-button type="button" appearance="outlined" variant="neutral">
        Don't Engage
      </wa-button>
      <wa-button type="submit" variant="brand">
        Make It So
        <wa-icon slot="end" variant="regular" name="arrow-right"></wa-icon>
      </wa-button>
    </div>
  </form>
</wa-card>