Page Item Reference
Reference for Page Item Reference in Web Framework References. Key properties: ID, Class, Text, Link.
Use this reference to understand what Page Item Reference is for and which component-specific inspector group matters most when you configure it.
Inspector Property Groups
Page Item Properties
| Property | Type | Details |
|---|---|---|
| ID | text | Optional unique identifier for this element. Sets the element's id attribute. Keep IDs unique per page (useful for anchors, label for targets, and JavaScript hooks). Bootstrap docs: Introduction Attribute: id |
| Class | text | Adds raw class names to the element. Adds text directly to the class attribute. Use this for custom utility classes or project-specific overrides. Separate multiple classes with spaces. Bootstrap docs: Utilities API Attribute: class |
| Text | text | Text shown for the page item. Sets the visible label for a pagination item. For accessibility, ensure previous/next controls have proper labels and ARIA attributes when needed. Bootstrap docs: Pagination Supports dynamic option sources. |
| Link | file | Sets the link destination. Sets the element's href attribute. Use absolute URLs ( https://... ) or relative paths. For internal navigation, prefer the Internal option when available. Bootstrap docs Attribute: href |
| Internal | boolean | Use Internal to do partial load in the current view Uses your project's internal routing/linking mechanism instead of a raw href . This helps keep links consistent when routes or file paths change in your project. Bootstrap docs: Introduction |
| Target | droplist | Where to open the link. Controls where the link opens. Common values are _self (same tab) and _blank (new tab). If you use _blank , consider adding rel="noopener" for security. Bootstrap docs: Introduction Attribute: target Options: Default, _blank, _top, _self |
Text
| Property | Type | Details |
|---|---|---|
| Advanced | css_toggle | Advanced layout options. Advanced layout options provided by the rule. These typically map to Bootstrap utility classes (spacing, flex, display) to fine-tune layout. Bootstrap docs: Utilities API |
| Color | color_group | Options: text-primary, text-primary-emphasis, text-secondary, text-secondary-emphasis, text-success, text-success-emphasis |
| Text Opacity | range | |
| Align | button_group | Controls text alignment. Controls text alignment using Bootstrap text utilities. Applies classes like text-start , text-center , text-end , including responsive variants (e.g. text-md-center ). Bootstrap docs: Text utilities Options: text-start, text-center, text-end |
| Font Weight | button_group | Controls font weight. Controls font weight using Bootstrap font-weight utilities. Applies fw-light , fw-normal , fw-bold , etc. Bootstrap docs: Font weight Options: B, B+, N, L, L+ |
| Line Height | button_group | Controls line height. Controls line height using Bootstrap line-height utilities. Applies lh-1 , lh-sm , lh-base , or lh-lg . Bootstrap docs: Line height Options: 1, SM, BS, LG |
Appearance
| Property | Type | Details |
|---|---|---|
| Back Color | color_group | Options: text-bg-primary, bg-primary, bg-primary-subtle, text-bg-secondary, bg-secondary, bg-secondary-subtle |
| Back Opacity | range | Controls background opacity. Controls background opacity when using background color utilities. Applies classes like bg-opacity-25 , bg-opacity-50 , etc. Bootstrap docs: Background utilities |
| Width | range | Sets a Bootstrap width utility class. Sets a Bootstrap width utility class. Applies utilities like w-25 , w-50 , w-75 , w-100 , or w-auto . Bootstrap docs: Sizing |
| Height | range | Sets a Bootstrap height utility class. Sets a Bootstrap height utility class. Applies utilities like h-25 , h-50 , h-75 , h-100 , or h-auto . Bootstrap docs: Sizing |
| Opacity | range | Sets the opacity utility class. Sets an opacity utility class. Applies utilities such as opacity-25 , opacity-50 , opacity-75 , or opacity-100 . Bootstrap docs: Opacity |
| Shadow | droplist | Applies a Bootstrap shadow utility. Applies a Bootstrap shadow utility. Uses classes like shadow , shadow-sm , shadow-lg , or removes shadow with shadow-none . Bootstrap docs: Shadows Options: Default, None, Small, Regular, Large |
Spacing
| Property | Type | Details |
|---|---|---|
| Margin<br>&<br>Padding | spacing | |
| X Gutter | range | Horizontal gutter size. Sets the horizontal gutter (spacing between columns). Uses gx-* utilities to control the horizontal gutter size. Bootstrap docs: Gutters |
| Y Gutter | range | Vertical gutter size. Sets the vertical gutter (spacing between rows). Uses gy-* utilities to control the vertical gutter size. Bootstrap docs: Gutters |
Display
| Property | Type | Details |
|---|---|---|
| Hide on | button_group | Options: xs, sm, md, lg, xl, xxl |
| button_group | ||
| Visually Hidden | boolean | |
| Focusable | boolean |
Flex Item
| Property | Type | Details |
|---|---|---|
| Align Self | button_group | Options: , , , , |
| Order | range | |
| Grow | button_group | Options: flex-grow-1, flex-grow-0 |
| Shrink | button_group | Options: flex-shrink-1, flex-shrink-0 |