Block Library

Headings w/ Default Sizes

Pick the H level that matches the content hierarchy — H1 for page title, H2 for sections, and so on. The default visual size shows below.

H1

H2

H3

H4

H5
H6

Headings w/ Font Sizes

Override the visual size independently of the H level — make an H3 look like an H2 if the design calls for it, without changing the structure.

XXL

XL

L

M

S

Heading with icon

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Hyperlink within paragraph Ut enim ad minim veniam, bold text within paragraph quis nostrud exercitation ullamco laboris nisi ut aliquip italics text within paragraph ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  1. Duis aute irure dolor in reprehenderit in voluptate.
  2. Velit esse cillum dolore eu fugiat nulla pariatur.
  3. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.
  4. Deserunt mollit anim id est laborum.
  • Duis aute irure dolor in reprehenderit in voluptate.
  • Velit esse cillum dolore eu fugiat nulla pariatur.
  • Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.
  • Deserunt mollit anim id est laborum.
A caption for the image if needed.

Media & Text – None

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas.

Media & Text – Wide

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas.

Media & Text – Full

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas.

Accordion

Integer condimentum nisi sed sagittis auctor. Maecenas faucibus luctus nisi at lobortis. Donec imperdiet magna ac euismod ultrices. Quisque ac consectetur velit, vitae laoreet eros. Sed ac tristique arcu, malesuada congue mi. Praesent tristique tortor neque. Aliquam molestie accumsan interdum. Suspendisse potenti. Proin ante dolor, tristique ac tempus eget, volutpat vitae nibh. Donec ullamcorper lacus tellus, lobortis viverra risus ullamcorper id. Curabitur eget nisl scelerisque libero luctus finibus ullamcorper quis nibh. Mauris auctor efficitur metus, nec pretium orci vulputate sed.

Quisque tincidunt, dolor nec ultricies vehicula, orci augue condimentum nunc, consectetur semper ante ipsum ac felis. Praesent dictum eu justo vel ornare.

  • vitae malesuada libero semper nec.
  • Pellentesque luctus dui a nulla faucibus, vel elementum quam fermentum.
  • Proin pellentesque justo non

Table

Column Heading 1Column Heading 2Column Heading 3Column heading
Etiam egestas libero at quam tempus1,234,56750%+999
quis vestibulum dolor9,99930%-50
faucibus id200,00015%-234
Pellentesque ante05%+567
TotalTotalTotal

Form

Form Reference

Reference form showing every Gravity Forms field type.

Standard Fields

Basic fields used to capture common information. Covers the most typical form input needs.
Use for short, open-ended responses such as a name or reference number.
Use when the user must select exactly one option from a predefined list.
Use for longer open-ended responses such as a message, description, or additional details.
Use for numeric input. Supports integer and decimal values. Formats as 9,999.99 or $9,999.99.
Checkboxes
Use when the user can select one or more options independently.
Radio Buttons

Use when the user must select exactly one option from a short list. Option to enable Other choice. This allows the user to specify a value that is not a predefined choice.
List
Allows the user to add/remove additional rows of information per field. Ability to enable multiple columns & set max amount of rows.
Multiple Choice
Select exactly 2 choices.
Use when the user must select a required number of options. Configured in field settings.
Image Choice
Image for choice number 1
Image for choice number 2
Image for choice number 3
Use when visual context helps the user make a selection. One choice only.
Places a block of free form HTML anywhere in your form. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed blandit feugiat efficitur. Praesent sit amet orci dapibus, viverra elit nec, facilisis diam. Vestibulum sollicitudin et quam eu malesuada. Nam mollis tincidunt ex, non bibendum mauris tristique id.

Name and Contact Fields

Autocomplete can also be enabled to help browsers suggest saved values, and you can set the appropriate autocomplete attribute (e.g., email, tel, url) to control what gets suggested.
Name
Email(Required)
Allows users to enter a valid email address. Ability to enable email confirmation field.
Allows users to enter a website URL.
Address
A compound field with street, address line 2, city, state, and zip. Default state can be pre-configured in field settings.
Allows users to enter a phone number.
Allows users to enter a phone number.

Date and Time

Time renders as hour and minute steppers with an AM/PM dropdown. Both can be configured in field settings.
Date
Time
:
Allows users to submit a time as hours and minutes. 12 hour or 24 hour format.

File Upload and Progress

File upload supports drag-and-drop or button selection. Progress bar indicates upload or multi-step form completion status.
Drop files here or
Max. file size: 100 MB.
    Allows users to upload a file. Ability to set allowed file extensions, enable multi-file upload, and set max file size.

    Consent and Signature

    Consent provides a legally descriptive checkbox for privacy policy or terms agreement. Signature captures a freehand sign-off using a mouse or stylus.
    Signature
    Sign using a mouse or stylus. Use the reset button to clear and start again.

    Image Carousel

    Info Box – Manual

    Info Box – Query

    Tabbed Content – Horizontal

    Phasellus lorem turpis, interdum ut odio a, sollicitudin efficitur ipsum. Aliquam vel justo sit amet purus viverra mattis. Donec facilisis magna in nibh sagittis, a auctor leo blandit. Quisque tincidunt, dolor nec ultricies vehicula, orci augue condimentum nunc, consectetur semper ante ipsum ac felis. Praesent dictum eu justo vel ornare. Phasellus eget blandit lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

    Quisque tincidunt, dolor nec ultricies vehicula, orci augue condimentum nunc, consectetur semper ante ipsum ac felis. Praesent dictum eu justo vel ornare.

    • vitae malesuada libero semper nec.
    • Pellentesque luctus dui a nulla faucibus, vel elementum quam fermentum.
    • Proin pellentesque justo non

    Tabbed Content – Vertical

    Phasellus lorem turpis, interdum ut odio a, sollicitudin efficitur ipsum. Aliquam vel justo sit amet purus viverra mattis. Donec facilisis magna in nibh sagittis, a auctor leo blandit. Quisque tincidunt, dolor nec ultricies vehicula, orci augue condimentum nunc, consectetur semper ante ipsum ac felis. Praesent dictum eu justo vel ornare. Phasellus eget blandit lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

    Quisque tincidunt, dolor nec ultricies vehicula, orci augue condimentum nunc, consectetur semper ante ipsum ac felis. Praesent dictum eu justo vel ornare.

    • vitae malesuada libero semper nec.
    • Pellentesque luctus dui a nulla faucibus, vel elementum quam fermentum.
    • Proin pellentesque justo non

    How To

    1

    Praesent nec velit dignissim, accumsan orci vel

    fficitur tellus. Phasellus eu hendrerit enim, ut sagittis velit. Mauris eleifend nunc urna, nec porta arcu pharetra at. Pellentesque eget mi dignissim, aliquam ligula nec, faucibus risus. 

    2

    Lorem ipsum dolor sit amet

    Detailed high-resolution image of a distant planet with rocky surface.
    3

    Fusce maximus mollis ex

    Vivamus ut dui a tortor rutrum ullamcorper a eget erat. Sed fringilla erat in iaculis varius. Etiam nec eros sit amet tortor accumsan feugiat. Phasellus faucibus dapibus nisi, eget rhoncus arcu vehicula quis.

    • Duis aute irure dolor in reprehenderit in voluptate.
    • Velit esse cillum dolore eu fugiat nulla pariatur.
    • Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.
    • Deserunt mollit anim id est laborum.

    Expandable Image Grid – Manual

    Card Image

    Firstname Lastname

    Job Title

    Vestibulum purus ligula, rutrum suscipit imperdiet a, tincidunt et metus. Cras tellus dui, pellentesque sit amet lorem nec, placerat viverra nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Sed vitae lectus non enim iaculis euismod. Vestibulum aliquam viverra purus tempor varius. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

    Card Image

    Longer Firstname and Lastname

    Job Title

    Vestibulum purus ligula, rutrum suscipit imperdiet a, tincidunt et metus. Cras tellus dui, pellentesque sit amet lorem nec, Vestibulum purus ligula, rutrum suscipit imperdiet a, tincidunt et metus. Cras tellus dui, pellentesque sit amet lorem nec, placerat viverra nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Sed vitae lectus non enim iaculis euismod. Vestibulum aliquam viverra purus tempor varius. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

    Card Image

    Fullname Here

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Sed vitae lectus non enim iaculis euismod. Vestibulum aliquam viverra purus tempor varius. Orci varius natoque penatibus et Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Sed vitae lectus non enim iaculis euismod. Vestibulum aliquam viverra purus tempor varius. Orci varius natoque penatibus et pellentesque sit amet lorem nec, placerat viverra nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Sed vitae lectus non enim iaculis euismod. Vestibulum aliquam viverra purus tempor varius. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

    FAQ Accordion

    Proin egestas posuere ex, non egestas est bibendum in. Donec consectetur accumsan interdum. Vivamus rhoncus risus tellus, at ornare mauris dapibus vel. Phasellus tempus feugiat sagittis. Proin semper dapibus malesuada. In non dui orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Sed id ligula odio. Quisque sed sem gravida, congue est laoreet, consectetur augue. Vestibulum commodo urna et eros dignissim molestie. Donec sit amet nulla id quam tincidunt elementum. Nulla laoreet venenatis magna, eget cursus eros convallis vitae. Quisque accumsan ipsum nec aliquam aliquam. Ut malesuada augue sed sapien posuere, et gravida nisi imperdiet. Mauris finibus lorem vel neque euismod, a lobortis mauris tristique. Phasellus et orci sit amet nulla tincidunt hendrerit vel ac justo. Nunc lobortis justo dui, nec mattis diam vehicula vehicula. Quisque tempus suscipit commodo. Etiam imperdiet vulputate vulputate. Sed aliquet luctus lacinia. Donec iaculis ex ex, pretium scelerisque ante dignissim eget. Donec orci urna, iaculis vel tellus non, pellentesque gravida orci. Proin vulputate sem vel dolor suscipit, a blandit nisl efficitur.

    Contact Cards – Directory

    Astronaut Three

    Tech Support

    Replace with Client Name

    Astronaut Two

    Another Organization

    Fax Label: 111-222-4444

    1600 Amphitheatre Parkway, Mountain View, CA 94043, USA

    View on map

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non semper erat.

    Astronaut One

    Job Title or Subheading

    Replace with Client Name

    100 Stony Point Rd ste 240, Santa Rosa, CA 95401, USA

    View on map

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non semper erat. Aenean a nisi et augue aliquet tempus eu a risus. Maecenas sodales ipsum ac est convallis pulvinar. Donec efficitur urna sem, a facilisis felis pellentesque ut. Sed ante mauris, aliquam non erat quis, pharetra consequat metus. Morbi et sodales lorem. Duis velit diam, suscipit at metus vel, congue faucibus sem. Pellentesque arcu mi, tincidunt at eros quis, maximus gravida arcu. Sed ut quam lectus. Morbi blandit non massa eget condimentum. Morbi augue ex, tempor quis est a, facilisis ornare nisl. Sed ultricies quis quam in porttitor. Morbi commodo eget nisi non congue. Suspendisse vel nulla mi. Phasellus efficitur eros vitae tempus malesuada.

    Contact Cards – Manual