DSI Widget Library
The Section Widget
The section widget has been extended to be a much more flexible general layout widget. The background can be set to a solid color, fully transparent, a semi-transparent color, or a background image. Transparent and semi-transparent options also enable an adjustable amount of background blur. Image backgrounds can now be set to fixed for a parallax-like effect. In this content demo several of these effects can be seen stacked on top of one another.
The section widget can now have set width, height, and margin overrides as well as rounded corners. Take care when using these as they can run counter to existing responsive design. Sections can also have links so the whole section acts as a button to activate that link. These properties can be combined to quickly create callouts and other eye-catching features.
Some properties are not visible in the properties panel until the property they depend on is activated. An example of this is the parallax background option is not visible unless a background image has been selected. Other properties are mutually exclusive and therefore only one can be active at a time. An example of this is activating the full width property disables the set width property.
We've also extended this widget to add an attribute called CSS Classes that will apply the supplied text to the widget wrapper as classes to extend the styling capabilities on the site. For instance, this widget has MySuperAwesomeClass class applied.
Text Color Override CSS Classes
These classes were added to provide quick text color overrides without resorting to inline styling. Simply wrap the target text in a span tag with a class of "text-color-primary", "text-color-secondary", or "text-color-accent".
Header tags require an additional css class equivalent to their header level for the text color overrides to work. For example, a header level 1 tag requires the "h1" css class. See the examples below.
Primary Color H1
Primary Color H2
Primary Color H3
Primary Color H4
Secondary Color H1
Secondary Color H2
Secondary Color H3
Secondary Color H4
Accent Color H1
Accent Color H2
Accent Color H3
Accent Color H4
DSI - Buttons
The button widget has been updated to include an accent color option as well as the ability to set the corner rounding amount.
DSI - Collapsible Card Widget
DSI Collapsible Card Widget
A small card-like container that has the ability to collapse and expand to hide/display long portions of content that need to be presented in a more concise manner, but still be available to the end-user. By default, this widget includes a header, image/icon, and text. Below this, the container largely functions as a Scrivito section in that any other widget may be added to the card.
Notes about working with the Collapsible Card Widget:
- All default elements are optional and any of them can be left blank.
- By default, the header is wrapped in an <h2>, but styled as an h3 if an image has been supplied. If no image/icon is supplied, the header will inherit the site's default h2 styling.
- Coloring & other styling can be modified in the Codebase: /src/assets/stylesheets/_collapsibleCard.scss
DSI - Table Extended Widget
Extension of Scrivito's default Table widget to allow editing user to specify the number of columns (between 3-8...though 2 seems to work too) and relative column widths and has muted styling on the summary row. This widget allows the following Scrivito widget to be added as column content:
| Allowable Widget | Example |
|---|---|
DSI - Button Widget | |
DSI - Image Widget |  |
Icon Widget | |
Image Widget |  |
Text Widget | Text goes here |
Total | 5 |
URL-Based Image Widgets
These widgets are extended versions of existing widgets. In addition to selecting via the content browser, they have the option of using a URL as an image source. This capability was primarily added to avoid reaching the cms object threshold on sites with a large number of media files.
DSI - Image Widget
The URL image option overrides any image selected via the content browser.
DSI - Thumbnail Gallery Widget
For each thumbnail image, the URL image option overrides any image selected via the content browser. Images scale to the smallest dimension filling the thumbnail. Essentially this means the farther from a square (1:1) aspect ratio you go, the more of the image will be cut off in the thumbnail. The expanded slide will still show the full image. Image Thumbnails
DSI - Scroll Button
Button that will move the user to a specified target id on the page. Widget Options include:
Target, Button Title, Alignment (Left, Center, Right - default Left), Background Color (Primary, Secondary, Transparent - default Primary)
DSI - Link List Extended Widget
- Indent? (Y/N) If yes, indents only the current line; if no, content is left-aligned. This link line is set to "Yes."
- Description If set, content is displayed to the right of the link and displayed based on the designated Layout of Description.
- Option to display the Description text in a column or in same paragraph as link. Default is paragraph. (This example is set to Column.)
- NOTE This is NOT a list widget and must include links. If no link is supplied for a given line, nothing will render for that line.
DSI - Modified Google Maps Widget
This modified Google Maps widget can be connected to customized Google maps with multiple locations. Customizing this widget is done on the code side for now.
Note that all addresses must be supplied as Latitude/Longitude combinations and the values obtained by the Google Maps web page aren't always specific enough. Please use the Google GeoEncoder test API to obtain more specific Lat/Long values: https://developers.google.com/maps/documentation/geocoding/overview
Copyright Text - DSI
@DSI Test
©2026
| All Rights Reserved
The Copyright Widget will automatically display the Copyright symbol with the current year. At the time of creation the configuration options include:
- Alignment: Left/Center/Right
- Text Before: Contents of this field will be displayed to the left of the Copyright symbol
- Text After: Contents of this field will be displayed to the right of the Copyright year