Section Break CSS Selectors

Note: These selectors apply only to forms using the Orbital theme. If you are using the Gravity Forms 2.5 theme, see the Legacy CSS Selectors documentation.

The Section Break field adds a content separator to organize groups of fields. It displays a title (heading) and optional description and does not collect data.

In Orbital, the title renders as an h3 element. In legacy markup, it renders as an h2.

The Orbital framework excludes .gfield–type-section * from its CSS reset. As a result, the title and description retain browser default or author styles (similar to the HTML field).

For full variable definitions (for other field types), see the separate CSS API documentation.

Container

The Section Break field uses the standard field structure with these classes:

  • .gfield
  • .gfield–type-section
  • .gsection

The field includes an ID in the format:

field_{form_id}_{field_id}

For example:

field_5_3

The framework applies a bottom border and padding using the following variables:

  • –gf-field-section-border-color
  • –gf-field-section-border-style
  • –gf-field-section-border-width
  • –gf-field-section-padding-y-end

Example: Section Break Container

.gform-theme--framework .gfield--type-section {
	--gf-field-section-border-color: #204ce5;
	--gf-field-section-border-width: 2px;
	--gf-field-section-padding-y-end: 24px;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-section {
	--gf-field-section-border-color: #686e77;
	--gf-field-section-padding-y-end: 16px;
	margin-top: 24px;
	margin-bottom: 16px;
}

.gform-theme--framework#gform_wrapper_112 #field_112_4 {
	--gf-field-section-border-color: #204ce5;
	--gf-field-section-border-width: 2px;
	margin-top: 40px;
}

Title

The section break title renders as an h3 in Orbital (or h2 in legacy markup) and includes the class .gsection_title.

The framework does not apply CSS variables to this element. Use direct CSS properties when styling.

Example: Section Break Title

.gform-theme--framework .gfield--type-section .gsection_title {
	color: #112337;
	font-size: 18px;
	font-weight: 600;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-section .gsection_title {
	color: #1a365d;
	font-size: 20px;
}

.gform-theme--framework#gform_wrapper_112 #field_112_4 .gsection_title {
	color: #044ad3;
	font-size: 22px;
	font-weight: 600;
}

Description

When a description is set, it appears below the title in a div with the class .gsection_description.

The framework does not apply CSS variables to this element. Use direct CSS properties.

Example: Section Break Description

.gform-theme--framework .gfield--type-section .gsection_description {
	color: #6b7280;
	font-size: 14px;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-section .gsection_description {
	color: #4b5563;
	font-size: 15px;
}

.gform-theme--framework#gform_wrapper_112 #field_112_4 .gsection_description {
	color: #64748b;
	font-size: 14px;
}

Targeting Specific Section Breaks

Use the field ID selector when styling one section break differently from others.

.gform-theme--framework#gform_wrapper_112 #field_112_4 .gsection_title {
	color: #0f172a;
	font-size: 22px;
}

.gform-theme--framework#gform_wrapper_112 #field_112_4 .gsection_description {
	color: #64748b;
	font-size: 15px;
}

Use Case Examples

Section Break with Accent Divider

.gform-theme--framework .gfield--type-section {
	--gf-field-section-border-color: #204ce5;
	--gf-field-section-border-width: 2px;
	margin-top: 40px;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-section {
	--gf-field-section-border-color: #204ce5;
	--gf-field-section-padding-y-end: 20px;
}

Callout-Style Section Break

.gform-theme--framework .gfield--type-section.gsection {
	background-color: #f8fafc;
	padding: 24px;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
}

.gform-theme--framework .gfield--type-section .gsection_title {
	color: #112337;
	font-size: 18px;
}

.gform-theme--framework .gfield--type-section .gsection_description {
	color: #585e6a;
	font-size: 14px;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-section.gsection {
	background-color: #f1f5f9;
	padding: 20px;
	border-radius: 8px;
}

CSS API Reference

For full variable definitions, see the separate CSS API documentation.