Related Links & Videos
Properties
| PROPERTY | DESCRIPTION |
| Layout Type | Select from: • Basic View • Detailed View |
| Visible | Checking and unchecking the checkbox toggles widget visibility on the page. This allows for prepping the content in edit mode before widget debut. |
| Columns | Data columns provided by StoneX feed |
| Heading | Text field to add large header above data fields |
| Margin | Use margins to increase spacing between the Grid Layout Section and other sections on the page. This is helpful to provide visual room between elements and increase readability. Top User can select from 1-5 rems to increase spacing above the tabbed layout Bottom User can select from 1-5 rems to increase spacing below the tabbed layout Right User can select from 1-5 rems to increase to the right of the tabbed layout Left User can select from 1-5 rems to increase spacing to the left of the tabbed layout |
| Padding | Use padding to increase spacing within the Grid Layout Section background area. This is especially useful when using a background color to provide content grouping and visual space for readability. Top User can select from 1-5 rems to increase room in the top of the tabbed layout background area Bottom User can select from 1-5 rems to increase room in the bottom of the tabbed layout background area Right User can select from 1-5 rems to increase room in the right of the tabbed layout background area Left User can select from 1-5 rems to increase room in the left of the tabbed layout background area |
| Content Before | Text entry area for simple title and descriptive copy right above the data fields |
| Content After | Text entry area for simple descriptive copy right below the image |
| Button Properties: Number of Buttons | The widget can feature none, one or two buttons by selecting a number from the menu. If the user selects 0 then no buttons will display. Anything other than 0 and the Button and the below properties will display |
| Button Alignment | Select where within the grid cell the button(s) will be aligned • Center • Left • Right |
| [Button] Text | Enter text to be featured on each button. Typically shorter text is better for ease of reading and to keep the design tidy. If text field is blank, the button will not display. |
| [Button] Style | Select pre-built style options from the menu. Note that if two buttons are featured, each one may have its own style. Below is the list of styles that can be selected: • Default - a rectangular shape with a solid-color fill • Round - a pill shape with a solid-color fill • Radius - a rectangle with slightly rounded corners with a solid-color fill • Hollow - a rectangular outline shape with a transparent fill • Expanded - an extra-wide rectangular shape with a solid-color fill • Disabled - a rectangular shape faded back to denote that it is disabled • Clear - a transparent button with only text visible |
| [Button] Color | Select from your custom brand colors or grayscale options from the menu for button fills or outlines. Note that if two buttons are featured, each one may have its own color. Below is the list of colors that may be selected: • Default • Primary Color • Primary Color – Light • Primary Color – Dark • Secondary Color • Secondary Color – Light • Secondary Color – Dark • Gradient • White • Light Gray • Medium Gray • Dark Gray • Black |
| [Button] Target | Below are the targets to choose from: Default – this will open in the same tab of the browser and is typically used to move around within your site Blank – this will open in a new tab of the browser and is typically used for links that leave your site |
| [Button] Target URL | Select Page Checked: clicking the Select Button opens a dialog box to access content pages within the current site only. Note that it is possible to type directly in the Target URL field to add the URL to an anchor tag within the site, to type in a third-party URL to leave the site, to open an email (mailto: emailaddress.com) or link to a phone number (tel: 000-000-000). Unchecked: opens dialog box to specifically access the Media Library to select an image or document. |
| Additional CSS Class | Custom CSS elements added in partnership the development team |