Skip to content
This repository has been archived by the owner on Mar 14, 2024. It is now read-only.

fix: remove extra whitespace in Aside blocks #10293

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/site/content/en/handbook/writing-blog-posts/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ This can be a bit of a shock the first time it happens.
A document covered in suggestions doesn't mean that you did a bad job.
The majority of these changes will be copy-edits to follow the style guide and you can approve those and move on.

{% Aside %}
{% Aside %}
You will generally be assigned a tech writer familiar with your subject matter,
and they may well spot places where the post could be more clear, however you are the expert.
Always query any change that you feel is incorrect, or unhelpful.
Expand Down
6 changes: 3 additions & 3 deletions src/site/content/en/learn/forms/address/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ for the name `<input>` to ensure everybody can fill in their name.

Also use a single `<input>` for the street address–not every address has a street number.

{% Aside %}
{% Aside %}
According to [research](https://baymard.com/blog/address-line-2),
**Address line 2** can be confusing for users.
Consider using a `<textarea>` for the whole address,
Expand All @@ -47,7 +47,7 @@ Use `<label for="zip">ZIP or postal code (optional)</label>`
to make sure users know what data to enter.
Make the postal code field optional–not every address has a postal code.

{% Aside %}
{% Aside %}
You can use services like
[Place Autocomplete](https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform) or
[Loqate](https://www.loqate.com/en-us/) to help users look up addresses.
Expand All @@ -63,7 +63,7 @@ The `autocomplete` attribute can help users re-enter their address:
* `autocomplete="postal-code"`
* `autocomplete="country"`

{% Aside %}
{% Aside %}
There are two possible `autocomplete` values for the country:
* `country`: country or territory code
* `country-name`: country or territory name
Expand Down
2 changes: 1 addition & 1 deletion src/site/content/en/learn/forms/identity/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ Learn more about
The sign-up form is often the first interaction with a form on your website.
Good sign-up form design is critical, and a secure form is essential.

{% Aside %}
{% Aside %}
Only require sign-up if you really need to.
If you only want to store information between navigations,
consider [using client-side storage](/storage-for-the-web/).
Expand Down
2 changes: 1 addition & 1 deletion src/site/content/en/learn/forms/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ in particular elements for text entry: `<input>` and `<textarea>`.

So, are you ready to learn about forms? [Let's get started](/learn/forms/form-element/).

{% Aside %}
{% Aside %}
This course is written and edited by forms community experts:
[Michael Scharnagl](https://twitter.com/justmarkup),
[Sam Dutton](https://twitter.com/sw12),
Expand Down
10 changes: 5 additions & 5 deletions src/site/content/en/learn/forms/payment/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ authors:
date: 2021-11-03
---

{% Aside %}
{% Aside %}
This module is about payment forms and doesn't explain how to implement transactions on your site.
You can add payment functionality by implementing [Web Payments](/payments/),
or using a third-party payment platform.
Expand All @@ -27,7 +27,7 @@ To maximize conversions, ensure your payment form is user-friendly and secure.
Keep your payment form as simple as possible,
showing only required fields.

{% Aside %}
{% Aside %}
You don't need to add a selector for the card type—that's worked out automatically by the payment processor from the card number.
However, you may want to enhance your card number field by indicating the card type based on the entered number.
You can use a [regex](https://gist.github.com/michaelkeevildown/9096cd3aac9029c4e6e05588448a8841) to test the card type,
Expand All @@ -45,7 +45,7 @@ Use self-explanatory wordings for your `<label>` elements.
For example, use 'Security code',
instead of an acronym like 'CVV' that's only used by some brands.

{% Aside %}
{% Aside %}
Use a single `<input>` for each of the name and card number fields. Keep the user in typing mode,
and don't waste their time by forcing them to jump between multiple name or card number fields.
{% endAside %}
Expand All @@ -68,7 +68,7 @@ Add appropriate `autocomplete` values for your payment form controls to ensure b
Use `autocomplete="cc-name"` for the name,
`autocomplete="cc-number"` for the card number, and `autocomplete="cc-exp"` for the expiry date.

{% Aside %}
{% Aside %}
You can help users fill in the correct format for expiry date by using an
[input mask](https://css-tricks.com/input-masking/).
Test with real users, using only your keyboard,
Expand All @@ -87,7 +87,7 @@ Ensure users only enter numbers for the card number and security code.
Use `pattern="[0-9 ]+"` to allow users to include spaces when entering a card number,
since this is how the numbers are displayed on the physical cards.

{% Aside %}
{% Aside %}
Payment card brands use different formats,
for example, for card numbers and security codes.
Always test your payment form with every card type you support.
Expand Down