testwfdomain.aidan-ward.workers.dev Open in urlscan Pro
2606:4700:3033::6815:181  Public Scan

Form analysis
1 forms found in the DOM

Name: wf-form-Form — GET

<form id="wf-form-Form" name="wf-form-Form" data-name="Form" method="get" class="form_form" data-wf-page-id="64bd9c3fab0e625a27bd8170" data-wf-element-id="9fdc5b90-bbc3-ff1e-8bff-c88f13b53991" aria-label="Form">
  <div class="form_field-wrapper"><label for="First-Name" class="form_label">Text Input</label><input class="form_input w-input" maxlength="256" name="First-Name-2" data-name="First Name 2" placeholder="First Name" type="text" id="First-Name-2">
  </div>
  <div class="form_field-wrapper"><label for="Message" class="form_label">Text Area</label><textarea id="Message-2" name="Message-2" maxlength="5000" data-name="Message 2" placeholder="Message" class="form_input is-text-area w-input"></textarea>
  </div>
  <div class="form_field-wrapper"><label for="Style-Select" class="form_label">Select field</label><select id="Style-Select-2" name="Style-Select-2" data-name="Style Select 2" class="form_input is-select-input w-select">
      <option value="">Select one...</option>
      <option value="First">First Choice</option>
      <option value="Second">Second Choice</option>
      <option value="Third">Third Choice</option>
    </select></div>
  <div class="form_field-wrapper"><label for="email" class="form_label">Checkbox field</label><label class="w-checkbox form_checkbox">
      <div class="w-checkbox-input w-checkbox-input--inputType-custom form_checkbox-icon w--redirected-checked"></div><input type="checkbox" name="Checkbox-2" id="Checkbox-2" data-name="Checkbox 2" style="opacity:0;position:absolute;z-index:-1"
        checked=""><span for="Checkbox-2" class="form_checkbox-label w-form-label">Checkbox</span>
    </label></div>
  <div class="form_field-wrapper"><label for="email" class="form_label">Radio button</label><label class="form_radio w-radio"><input type="radio" name="radio" id="radio" data-name="Radio" class="w-form-formradioinput form_radio-icon w-radio-input"
        value="Radio"><span class="form_radio-label w-form-label" for="radio">Radio</span></label></div><input type="submit" data-wait="Please wait..." class="button is-form-submit w-button" value="Submit">
</form>

Text Content

)
Facebook icon
Twitter icon
Instagram icon
USA Hockey
|
AHSHA
HomeTeamsAbout UsNewsContact Us




STRUCTURE CLASSES

Defined and flexible core structure we can use on all or most pages.


page-wrapper

main-wrapper

container-small

container-medium

container-large

padding-global

padding-section-small

padding-section-medium

padding-section-large

button-group



HTML HEADING TAGS

HTML tags define default Heading styles.


H1


SAMPLE TEXT HELPS YOU UNDERSTAND HOW REAL TEXT MAY LOOK. SAMPLE TEXT IS BEING
USED AS A PLACEHOLDER.

H2


SAMPLE TEXT HELPS YOU UNDERSTAND HOW REAL TEXT MAY LOOK ON YOUR WEBSITE. SAMPLE
TEXT IS BEING USED AS A PLACEHOLDER FOR REAL TEXT THAT IS NORMALLY PRESENT.

H3


SAMPLE TEXT HELPS YOU UNDERSTAND HOW REAL TEXT MAY LOOK ON YOUR WEBSITE. SAMPLE
TEXT IS BEING USED AS A PLACEHOLDER FOR REAL TEXT THAT IS NORMALLY PRESENT.

H4

SAMPLE TEXT IS BEING USED AS A PLACEHOLDER. SAMPLE TEXT HELPS YOU UNDERSTAND HOW
REAL TEXT MAY LOOK. SAMPLE TEXT IS BEING USED AS A PLACEHOLDER FOR REAL TEXT
THAT IS NORMALLY PRESENT.

H5

SAMPLE TEXT IS BEING USED AS A PLACEHOLDER. SAMPLE TEXT HELPS YOU UNDERSTAND HOW
REAL TEXT MAY LOOK. SAMPLE TEXT IS BEING USED AS A PLACEHOLDER FOR REAL TEXT
THAT IS NORMALLY PRESENT. SAMPLE TEXT HELPS YOU UNDERSTAND HOW REAL TEXT MAY
LOOK.

H6

SAMPLE TEXT IS BEING USED AS A PLACEHOLDER FOR REAL TEXT THAT IS NORMALLY
PRESENT. SAMPLE TEXT HELPS YOU UNDERSTAND HOW REAL TEXT MAY LOOK. SAMPLE TEXT IS
BEING USED AS A PLACEHOLDER FOR REAL TEXT THAT IS NORMALLY PRESENT. SAMPLE TEXT
HELPS YOU UNDERSTAND HOW REAL TEXT MAY LOOK.


OTHER HTML TAGS

HTML tags define default text styles.


All paragraphs

Sample text is being used as a placeholder for real text that is normally
present. Sample text helps you understand how real text may look on your
website. Sample text is being used as a placeholder for real text.


All links
All Links
All quotes

> Sample text is being used as a placeholder for real text that is normally
> present. Sample text helps you understand how real text may look on your
> website.

All Ordered Lists
 1. Sample text is being used as a placeholder for real text that is normally
    present.
 2. Sample text is being used as a placeholder for real text that is normally
    present.
 3. Sample text is being used as a placeholder for real text that is normally
    present.

All Unordered Lists
 * Sample text is being used as a placeholder for real text that is normally
   present.
 * Sample text is being used as a placeholder for real text that is normally
   present.
 * Sample text is being used as a placeholder for real text that is normally
   present.


HEADING STYLES

Heading classes when typography style doesn't match the default HTML tag.


heading-style-h1


SAMPLE TEXT HELPS YOU UNDERSTAND HOW REAL TEXT MAY LOOK.

heading-style-h2


SAMPLE TEXT IS BEING USED AS A PLACEHOLDER. SAMPLE TEXT HELPS YOU UNDERSTAND HOW
REAL TEXT MAY LOOK.

heading-style-h3


SAMPLE TEXT HELPS YOU UNDERSTAND HOW REAL TEXT MAY LOOK ON YOUR WEBSITE. SAMPLE
TEXT IS BEING USED AS A PLACEHOLDER FOR REAL TEXT THAT IS NORMALLY PRESENT.

heading-style-h4


SAMPLE TEXT IS BEING USED AS A PLACEHOLDER. SAMPLE TEXT HELPS YOU UNDERSTAND HOW
REAL TEXT MAY LOOK. SAMPLE TEXT IS BEING USED AS A PLACEHOLDER FOR REAL TEXT
THAT IS NORMALLY PRESENT.

heading-style-h5


SAMPLE TEXT IS BEING USED AS A PLACEHOLDER. SAMPLE TEXT HELPS YOU UNDERSTAND HOW
REAL TEXT MAY LOOK. SAMPLE TEXT IS BEING USED AS A PLACEHOLDER FOR REAL TEXT
THAT IS NORMALLY PRESENT. SAMPLE TEXT HELPS YOU UNDERSTAND HOW REAL TEXT MAY
LOOK.

heading-style-h6


SAMPLE TEXT IS BEING USED AS A PLACEHOLDER FOR REAL TEXT THAT IS NORMALLY
PRESENT. SAMPLE TEXT HELPS YOU UNDERSTAND HOW REAL TEXT MAY LOOK. SAMPLE TEXT IS
BEING USED AS A PLACEHOLDER FOR REAL TEXT THAT IS NORMALLY PRESENT. SAMPLE TEXT
HELPS YOU UNDERSTAND HOW REAL TEXT MAY LOOK.


TEXT CLASSES

Text classes when typography style doesn't match the default HTML tag.



TEXT SIZES

text-size-large

Sample text is being used as a placeholder for real text that is normally
present.


text-size-medium

Sample text is being used as a placeholder for real text that is normally
present on your website.


text-size-regular

Sample text is being used as a placeholder for real text that is normally
present. Sample text helps you understand how real text may look on your
website.


text-size-small

Sample text is being used as a placeholder for real text that is normally
present on your website. Sample text helps you understand how real text may look
on your website.


text-size-tiny

Sample text is being used as a placeholder for real text that is normally
present on your website. Sample text helps you understand how real text may look
on your website.



TEXT STYLES

text-style-strikethrough

text-style-strikethrough


text-style-italic

text-style-italic


text-style-muted

text-style-muted


text-style-allcaps

text-style-allcaps


text-style-nowrap

text-style-nowrap


text-style-link

text-style-link


text-style-quote

Sample text is being used as a placeholder.


text-style-2lines

Sample text is being used as a placeholder for real text that is normally
present. Sample text helps you understand how real text may look on your
website. Sample text is being used as a placeholder for real text
text-style-2lines


text-style-3lines

Sample text is being used as a placeholder for real text that is normally
present. Sample text helps you understand how real text may look on your
website. Sample text is being used as a placeholder for real text. Sample text
is being used as a placeholder for real text that is normally present. Sample
text helps you understand how real text may look on your website. Sample text is
being used as a placeholder for real text.



TEXT WEIGHTS

text-weight-xbold
text-weight-xbold
text-weight-bold
text-weight-bold
text-weight-semibold
text-weight-semibold
text-weight-medium
text-weight-medium
text-weight-normal
text-weight-normal
text-weight-light
text-weight-light


TEXT ALIGNMENTS

text-align-left
text-align-left
text-align-center
text-align-center
text-align-right
text-align-right


BUTTONS

Button combo class system.


button
Button Text
button
is-small
Button Text
button
is-nav
Button Text
button
is-secondary
Button Text
button
is-text
Button Text
button
is-icon
Button Text
Arrow Right


COLORS

Manage recurring text and background colors.



COLOR PALETTE

#00000

#f5f5f5

#fffff



TEXT COLORS

text-color-black
text-color-black
text-color-grey
text-color-grey
text-color-white
text-color-white


BACKGROUND COLORS

background-color-black

background-color-grey

background-color-white



MAX WIDTHS

Use the max-width CSS property to contain inner content to a maximum width.


max-width-full

max-width-full-tablet

max-width-full-mobile-portrait

max-width-full-mobile-landscape

max-width-xxlarge

max-width-xlarge

max-width-large

max-width-medium

max-width-small

max-width-xsmall

max-width-xxsmall



PADDINGS

Utility spacing system - padding classes. [padding-direction] + [padding-size].



DIRECTION CLASSES

padding-bottom

padding-top

padding-vertical

padding-horizontal

padding-left

padding-right



SIZE CLASSES

padding-0

padding-tiny

padding-xxsmall

padding-xsmall

padding-small

padding-medium

padding-large

padding-xlarge

padding-xxlarge

padding-huge

padding-xhuge

padding-xxhuge

padding-custom1

padding-custom2

padding-custom3



MARGINS

Utility spacing system - padding classes. [margin-direction] + [margin-size].



DIRECTION CLASSES

margin-bottom

margin-top

margin-vertical

margin-horizontal

margin-left

margin-right



SIZE CLASSES

margin-0

margin-tiny

margin-xxsmall

margin-xsmall

margin-small

margin-medium

margin-large

margin-xlarge

margin-xxlarge

margin-huge

margin-xhuge

margin-xxhuge

margin-custom1

margin-custom2

margin-custom3



SPACERS

Unified spacer system for the project.


spacer-tiny

spacer-xxsmall

spacer-xsmall

spacer-small

spacer-medium

spacer-large

spacer-xlarge

spacer-xxlarge

spacer-huge

spacer-xhuge

spacer-xxhuge




ICONS

Unify icons sizes. icon-height sets height of icons. icon-1x1 sets both height
and width of icons.


icon-height-small
icon-height-medium
icon-height-large
icon-1x1-small
Twitter icon
Facebook icon
Instagram icon
LinkedIn icon
Slack icon
Dribbble icon
Pinterest icon
YouTube icon
Arrow Right
icon-1x1-medium
Twitter icon
Facebook icon
Instagram icon
LinkedIn icon
Slack icon
Dribbble icon
YouTube icon
Arrow Right
icon-1x1-large
Twitter icon
Facebook icon
Instagram icon
LinkedIn icon
Slack icon
Dribbble icon
YouTube icon
Arrow Right


USEFUL UTILITY SYSTEMS

Utility classes we like to use in most of our projects to build faster.


hide

This element is hidden
hide-tablet

hide-mobile-portrait

hide-mobile-landscape

overflow-visible

overflow-hidden

overflow-auto

overflow-scroll

pointer-events-on

pointer-events-off

layer

div-square

spacing-clean

align-center

z-index-1

z-index-2

display-inlineflex



WEBFLOW ELEMENTS

Native Webflow elements with Client-First classes applied.


form_component

Example of a form component using Folders


Text Input
Text Area
Select fieldSelect one...First ChoiceSecond ChoiceThird Choice
Checkbox field

Checkbox
Radio buttonRadio
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
text-rich-text


HEADING 1


HEADING 2


HEADING 3

HEADING 4

HEADING 5

HEADING 6

Sample text with a link is being used as a placeholder for real text that is
normally present. Sample text helps you understand how real text may look on
your website. Sample text is being used as a placeholder for real text. Sample
text is being used as a placeholder for real text. Sample text is being used as
a placeholder for real text.

 * Sample text is being used as a placeholder for real text that is normally
   present.
 * Sample text is being used as a placeholder for real text that is normally
   present.
 * Sample text is being used as a placeholder for real text that is normally
   present.

 1. Sample text is being used as a placeholder for real text that is normally
    present.
 2. Sample text is being used as a placeholder for real text that is normally
    present.
 3. Sample text is being used as a placeholder for real text that is normally
    present.

> Sample text is being used as a placeholder for real text that is normally
> present. Sample text helps you understand how real text may look on your
> website. Sample text is being used as a placeholder for real text that is
> normally present.