Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation


Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

<!-- Inspired by http://nostyle.herokuapp.com/patterns/payment by Adam Silver -->
<form novalidate>
<div class="field">
  <!-- When a user has stored multiple credit cards in their browser, suggest one that supports this currency... See EXAMPLE 75 in https://www.w3.org/TR/html52/sec-forms.html#sec-autofill -->
  <input type="hidden" autocomplete="transaction-currency" value="AUD">
  <label for="donation_amount">
    <span class="field-label">Donation amount</span>
    <span class="field-hint">(In Australian dollars) Example: <samp>25</samp>.</span>
    <span class="field-error">Enter an amount.</span><!-- Only shown when validation triggers -->
  <!-- Although we don't care for the browser to autofill a donation amount based on previously stored values of autocomplete="transaction-amount" assistive technology can add icons to input fields to communicate the purpose of the fields visually, and because autocomplete values are independent of language users unfamiliar with the label can still have that purpose consistently identified to them due to the fixed taxonomy of terms. https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html -->
  <input name="donation_amount" id="donation_amount" autocomplete="transaction-amount" type="number" required>
  <!-- This amount input is a rare case when it makes sense to use input type="number". See criteria near the end of https://medium.com/@adambsilver/when-to-use-the-number-input-b24e11ec550d -->
<div class="field">
  <label for="cardnumber">
    <span class="field-label">Card number</span>
    <span class="field-hint">The long number on the front of your card.</span>
    <span class="field-error">Enter the long number on the front of your card.</span><!-- Only shown when validation triggers -->
  <!-- When using onscreen keyboards inputmode="numeric" will make these fields easier to fill out. See https://css-tricks.com/everything-you-ever-wanted-to-know-about-inputmode/#article-header-id-1 -->
  <input name="cardnumber" id="cardnumber" autocomplete="cc-number" type="text" required pattern="[0-9]*" inputmode="numeric" minlength="13" maxlength="19">
<div class="field">
  <label for="name_on_card">
    <span class="field-label">Name on card</span>
    <span class="field-hint">Example: <samp>John Snow</samp></span>
    <span class="field-error">Enter the full name as printed on the credit card.</span><!-- Only shown when validation triggers -->
  <!-- Any field that expects a proper name (such as first, last, or city name) can also be problematic with autocorrect enabled. See https://uxcellence.com/2014/tweaking-automatic-form-input -->
  <input name="name_on_card" id="name_on_card" autocomplete="cc-name" autocapitalize="words" type="text" required autocorrect="off">
  <!-- Including the autocapitalize="words" will make a virtual keyboard automatically uppercase the first letter of each word. This can ease entering multi-word proper nouns on mobile. See https://developers.google.com/web/updates/2015/04/autocapitalize -->
<div class="field">
  <label for="expiry">
    <span class="field-label">Expiry</span>
    <span class="field-hint">MMYY</span>
    <span class="field-error">Enter 2 digits for the month followed by 2 digits for the year.</span><!-- Only shown when validation triggers -->
  <input name="expiry" id="expiry" autocomplete="cc-exp" type="text" required inputmode="numeric" minlength="4" maxlength="4">
  <!-- Note that the canonical format for cc-exp is a valid month string, for example 2014-12 https://www.w3.org/TR/html52/sec-forms.html#sec-autofill -->
<div class="field">
  <label for="security_code_ccv">
    <span class="field-label">Security code (CCV)</span>
    <span class="field-hint">The last 3 numbers on the back of your card.</span>
    <span class="field-error">Enter your CCV.</span><!-- Only shown when validation triggers -->
  <input name="security_code_ccv" id="security_code_ccv" autocomplete="cc-csc" type="text" required pattern="[0-9]*" inputmode="numeric" minlength="3" maxlength="3">
<input type="submit" class="primaryButton" name="pay" value="Continue">
              input[maxlength], [autocomplete]{
  padding: 0.3rem 1ch;
  font-family: Consolas, “Andale Mono”, “Lucida Console”, “Lucida Sans Typewriter”, Monaco, “Courier New”, “monospace”; /* explanation for a monospaced font stack coming later */
  border: 2px solid #222;
  box-sizing: border-box;
  max-width: 100%; /* avoid spill over on narrow viewports */

  width: calc(4ch + 2ch + 1ch + 2px); /* maxlength + padding + breathing space + border */
  width: calc(3ch + 2ch + 1ch + 2px); /* maxlength + padding + breathing space + border */

/* https://css-tricks.com/snippets/css/turn-off-number-input-spinners/ */
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
/* https://jwatt.org/2013/12/11/input-type-number-coming-to-mozilla/ */
input[type=number] {

/* basic visual styles */
body {
    font-family: Roboto,helvetica,arial,sans-serif;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
.field {
    max-width: 26em;
    margin-bottom: 30px;
label, input, label span {
  font-size: 1.125rem;
  line-height: 1.38889;
.field-label {
  font-weight: 700;
.field-hint {
  color: #000;
  margin-bottom: 5px;
/* error styles */
.field-error {
  display: none;
  color: #b00f1f;
  font-weight: 700;
  margin-bottom: 10px;
input[aria-invalid="true"] {
  border-color: #b00f1f;

/* focus style */
[type=checkbox]:focus, [type=date]:focus, [type=email]:focus, [type=file]:focus, [type=number]:focus, [type=password]:focus, [type=radio]:focus, [type=search]:focus, [type=submit]:focus, [type=tel]:focus, [type=text]:focus, button:focus, select:focus, textarea:focus {
  outline: 0;
  box-shadow: 0 0 1px 4px #ffbf47;

@media (min-width: 37.5em)
.primaryButton {
    font-size: 1.125em;
    line-height: 1.38889;
.primaryButton {
    font: inherit;
    border: none;
    appearance: none;
    -webkit-appearance: none;
    font-size: 1em;
    line-height: 1.5625;
    padding: 10px 20px;
    background-color: #0074d9;
    color: #fff;
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.