We provide ongoing service

Website and Email Support

SuperFlexi Solution Library

Explore our collection of SuperFlexi modules. Browse screenshots by category and open any solution for its full description, examples and technical settings.

Expandable vertical sections for FAQs, policies, job listings, or other content that should stay compact until opened.

An accordion with arrow indicators that expand and collapse individual content sections. Useful for FAQs and longer information lists.

An accordion with bordered, boxed headings and arrow controls. Choose it when FAQ or detail sections need stronger visual separation.

Implementation Notes

Advanced setting string override: --aab-accent:#003f6b;--aab-text:#404040;--aab-title-color:#404040;--aab-title-hover-color:#003f6b;--aab-title-active-color:#003f6b;--aab-arrow-color:#4f5960;--aab-border:#c9c9c9;--aab-background:#fff;--aab-hover-background:#fafafa;--aab-active-background:#fff;--aab-radius:4px;--aab-title-size:18px;--aab-title-weight:400;--aab-body-size:15px;--aab-item-gap:18px;--aab-speed:220ms;

A full-width-capable image slideshow with a headline, copy, and optional link on each slide. Slides rotate automatically in randomized order.

Implementation Notes

Banner Slider 2 is nearly the same but the older version. It doesn't allow link button color override and shaded box shade options.

An animated image banner with text and links over each slide, featuring pan-and-zoom transitions. Requires a separate site license.

A click-through image banner with optional headline, subtitle, shaded text panel, and button. Best when visitors should advance slides manually.

Implementation Notes

Requires setting height in "settings > Advanced Settings String > (enter number of pixels)"

A split banner with text on the left and an image on the right; visitors advance slides manually. The image stacks beneath the copy on mobile.

Implementation Notes

Requires setting height in "settings > Advanced Settings String > (enter background HEX color)"

A rotating photographic hero with adjustable overlays and text placement on either side. Supports multiple slides, calls to action, and responsive layouts.

Implementation Notes

Slide Options: Photo, Slide Black Overlay Opacity, Text Color, Slide Kicker, Slide Title, Slide Subtitle, Shaded Box Behind Copy, Copy Box Location, Link URL, Button Color Override, SVG Shape Code

You can override the mobile text background color in "settings > Advanced Settings String > (enter background HEX color)"

A split hero slider with text and a button on the left and a photo on the right. Supports a custom SVG background for distinctive designs.

Implementation Notes

SLIDE OPTIONS: Slide Kicker, Title, Description, Link URL, Button Color Override, Photo

Requires setting the photo path in "settings > Advanced Settings String > (enter path. ex: /data/sites/42/media/home/photo.jpg)"

A split-layout banner with fixed text beside a rotating selection of photos. Choose it when the message stays the same while the images change.

Implementation Notes

SLIDE OPTIONS: Background Color (HEX), Layout CSS Class (container, etc.), Photo Position, Content Width, Text Vertical Alignment, Text Color Theme, Text Content, Kicker Text, Title, Subtitle, Main Copy, Learn More Link URL, Button Text, Button Background Color (HEX), Button Text Color (HEX), Photo Transition Effect, Animation Speed, Rotation Speed (milliseconds), Pause Rotation On Hover, Show Photo Dots, Minimum Slider Height, Photo Fit, Photo Spacing Style, Photo Bleeds To Browser Edge, Mobile Stack Order, Text Bottom Padding, Text Top Padding, Text Side Padding, Photo Focal Point, Photo Corner Radius

A modern rotating hero with synchronized text and photo transitions, two optional buttons, and solid or gradient background styles.

Per-Slide Editor Options

Each slide has a Kicker, Headline, Description, Photo, optional Photo Alt Text, and two optional buttons (label, URL, and Same window / New window target). The Slide Background Design dropdown includes 15 preset styles plus Custom Solid and Custom Two-Color Gradient, for 17 options total. For custom backgrounds, enter the per-slide HEX color fields; blank values use the global fallback colors above.

Photos fill matching-size boxes with object-fit:cover. The banner uses the tallest slide at each responsive width to avoid height jumps. Arrows wrap continuously; reduced-motion settings disable animations and autoplay. If using a full-width pane, use fullWidth=false when viewport bleed is unnecessary.

Full Example - All Options

randomize=true; randomOrder=false; autoplay=true; interval=6500; pauseOnHover=true; transition=850; contentTransition=1100; motion=36; contained=true; maxWidth=1170px; fullWidth=true; paddingTop=60px; paddingBottom=60px; paddingX=24px; gap=64px; mobilePadding=35px; photoHeight=340px; mobilePhotoHeight=240px; photoFit=cover; photoPosition=center; photoRadius=0px; photoShadow=true; titleSize=clamp(30px,3.8vw,52px); descriptionSize=18px; kickerSize=12px; titleColor=#ffffff; textColor=#e0ded8; kickerColor=#c0ac6a; accent=#ad9e64; button1Bg=#a99b60; button1Color=#121519; button1Border=#a99b60; button2Bg=transparent; button2Color=#ffffff; button2Border=#b3a368; buttonRadius=2px; bgColor=#171a1e; bgStart=#181b20; bgEnd=#33352f; gradientAngle=110deg

Recommended Full-Width Hero

contained=true; maxWidth=1170px; fullWidth=true; paddingTop=60px; paddingBottom=60px; paddingX=24px; gap=64px; photoHeight=340px; photoFit=cover; autoplay=true; interval=6500; transition=850; contentTransition=1100; motion=36

Simple Contained Banner

contained=true; maxWidth=1170px; fullWidth=false; paddingTop=40px; paddingBottom=40px; gap=32px; photoHeight=300px; photoFit=cover; autoplay=true; interval=6000

Randomized Slides with Slower Animation

randomize=true; randomOrder=true; autoplay=true; interval=8000; transition=1000; contentTransition=1250; motion=40

Setting	Example	Description
SLIDE ROTATION & TRANSITIONS
`randomize`	true	Start at a random slide on each visit; slide order remains unchanged.
`randomOrder`	false	Shuffle slide order on each page visit.
`autoplay`	true	Automatically advance slides.
`interval`	6500	Delay between slides, in milliseconds.
`pauseOnHover`	true	Pause rotation while the slider is hovered.
`transition`	850	Background crossfade duration in milliseconds.
`contentTransition`	1100	Text and photo animation duration, in milliseconds.
`motion`	36	Distance the text/photo move during transitions, in pixels.
SECTION & LAYOUT
`contained`	true	Constrain the text and image columns within maxWidth.
`maxWidth`	1170px	Maximum width of the inner content.
`fullWidth`	true	Extend the slider background to viewport edges; keep inner content contained if enabled.
`paddingTop`	60px	Top padding of the banner.
`paddingBottom`	60px	Bottom padding of the banner.
`paddingX`	24px	Horizontal inner padding.
`gap`	64px	Space between text and photo columns.
`mobilePadding`	35px	Vertical padding at mobile sizes.
PHOTO
`photoHeight`	340px	Photo box height on desktop; images crop to cover the box.
`mobilePhotoHeight`	240px	Photo box height on mobile.
`photoFit`	cover	Image fitting behavior; cover fills the photo frame.
`photoPosition`	center	Image focal position when cropped (e.g., center, 50% 30%).
`photoRadius`	0px	Corner radius of the photo box.
`photoShadow`	true	Show shadow around the photo box.
TYPOGRAPHY & COLORS
`titleSize`	clamp(30px,3.8vw,52px)	Responsive headline font size.
`descriptionSize`	18px	Description font size.
`kickerSize`	12px	Kicker font size.
`titleColor`	#ffffff	Headline color.
`textColor`	#e0ded8	Description text color.
`kickerColor`	#c0ac6a	Kicker text color.
`accent`	#ad9e64	Slider controls/accent color.
BUTTONS
`button1Bg`	#a99b60	Primary button background.
`button1Color`	#121519	Primary button text color.
`button1Border`	#a99b60	Primary button border color.
`button2Bg`	transparent	Secondary button background.
`button2Color`	#ffffff	Secondary button text color.
`button2Border`	#b3a368	Secondary button border color.
`buttonRadius`	2px	Corner radius for both buttons.
BACKGROUND FALLBACKS
`bgColor`	#171a1e	Fallback for each slide’s Custom Solid background.
`bgStart`	#181b20	Fallback first color for Custom Gradient backgrounds.
`bgEnd`	#33352f	Fallback second color for Custom Gradient backgrounds.
`gradientAngle`	110deg	Angle for custom gradient backgrounds.

A simple horizontal row of links styled as buttons. Useful for downloads, quick navigation, or calls to action.

A configurable multi-column grid of link buttons that can wrap into additional rows. Ideal for larger sets of resources or navigation choices.

Implementation Notes

Requires setting number of columns in "settings > Advanced Settings String > (enter number of columns)"

A grid of text-based cards with headings, descriptions, and optional links. Hover effects emphasize each card without needing images.

Implementation Notes

Requires setting number of columns in "settings > Advanced Settings String > (enter number of columns)"

A grid of content cards with icons, text, optional buttons, and hover effects. Use it for features or service highlights.

Implementation Notes

Requires setting number of columns in "settings > Advanced Settings String > (enter number of columns)"

A flexible grid of icon-led information cards with optional whole-card links, configurable spacing, and a bottom accent on hover.

Full Example - All Options

contained=true; maxWidth=1170; sidePadding=16; sectionBg=#f6f3ec; backgroundFullWidth=true; sectionPaddingTop=55; sectionPaddingBottom=65; fullWidth=false; items=4; tablet=2; mobile=1; gap=24; tabletBreakpoint=992; mobileBreakpoint=767; backgroundColor=#ffffff; iconColor=#88733d; accentColor=#4a4a4a; headingColor=#101827; textColor=#657080; linkColor=#8a6b25; padding=28; radius=0; iconSize=32; titleSize=24; titleWeight=600; textSize=16; textLineHeight=1.5; hoverLift=5; lineHeight=4; speed=250; shadow=true;

Recommended Full-Width Background with Contained Content

contained=true; maxWidth=1170; sectionBg=#f6f3ec; backgroundFullWidth=true; sectionPaddingTop=55; sectionPaddingBottom=65; items=4; tablet=2; mobile=1; gap=24; backgroundColor=#ffffff; iconColor=#88733d; accentColor=#4a4a4a; hoverLift=5;

Simple Contained Grid - Site Heading Weight

contained=true; maxWidth=1170; items=3; tablet=2; mobile=1; gap=20; backgroundColor=#ffffff; textLineHeight=1.5; accentColor=#444444;

Compact Boxes with a More Pronounced Hover

items=4; tablet=2; mobile=1; gap=18; padding=22; radius=8; iconSize=28; titleSize=21; textSize=15; textLineHeight=1.4; hoverLift=8; lineHeight=5; speed=220; shadow=true;

Setting	Default / Example	Description
SECTION & CONTAINMENT
`contained`	true	Constrain the box grid, header, and footer to the configured maximum width.
`maxWidth`	1170	Maximum content width in pixels when contained.
`sidePadding`	16	Horizontal padding for contained content, in pixels.
`sectionBg`	#f6f3ec	Background color for the complete module section. The default is transparent.
`backgroundFullWidth`	true	Extend the section background edge-to-edge, including behind header, boxes, and footer. By default enabled when sectionBg is set.
`sectionPaddingTop`	55	Top padding of the complete module, in pixels.
`sectionPaddingBottom`	65	Bottom padding of the complete module, in pixels.
`fullWidth`	false	Expand the module section itself to viewport width. Normally leave this off and use backgroundFullWidth instead.
GRID & RESPONSIVE LAYOUT
`items`	4	Number of box columns on desktop. The alias `columns` also works.
`tablet`	2	Columns at the tablet breakpoint.
`mobile`	1	Columns at the mobile breakpoint.
`gap`	24	Space between boxes, in pixels.
`tabletBreakpoint`	992	Tablet breakpoint, in pixels.
`mobileBreakpoint`	767	Mobile breakpoint, in pixels.
BOX STYLE & COLORS
`backgroundColor`	#ffffff	Default box background; individual boxes may override it.
`iconColor`	#88733d	Default Font Awesome icon color; individual boxes may override it.
`accentColor`	#4a4a4a	Default bottom hover-line color; individual boxes may override it.
`headingColor`	#101827	Box title text color.
`textColor`	#657080	Description text color.
`linkColor`	#8a6b25	Learn More label color.
`padding`	28	Inside padding around each box, in pixels.
`radius`	0	Box corner radius, in pixels.
`shadow`	true	Enable subtle normal and hover box shadows.
TYPOGRAPHY & ICONS
`iconSize`	32	Font Awesome icon size, in pixels.
`titleSize`	24	Box title size, in pixels.
`titleWeight`	600 (optional)	Override the box heading weight. Omit this setting to keep the site's heading weight. Supports 100-900 and CSS weight keywords.
`textSize`	16	Description font size, in pixels.
`textLineHeight`	1.5	Description line-height multiplier (1 to 2.5), e.g. 1.4 for tighter leading or 1.7 for looser leading.
HOVER & ANIMATION
`hoverLift`	5	Distance the box lifts on hover, in pixels.
`lineHeight`	4	Height of the bottom accent line, in pixels.
`speed`	250	Hover animation duration, in milliseconds.

Animated numerical statistics with supporting labels and optional dividers. Suitable for accomplishments, performance figures, or company metrics.

Implementation Notes

Requires setting number of columns in "settings > Advanced Settings String > (enter number of columns)"

ADD TO SKIN (IN FOOTER) <script src="/data/sites/47/skins/skin-03/assets/js/components/hs.counter.js"></script>

ADD TO SKIN IN SCRIPT BLOCK (IN FOOTER) $.HSCore.components.HSCounter.init('[class*="js-counter"]');

Animated numerical statistics displayed in styled boxes with configurable backgrounds and borders. Good for a prominent statistics section.

Implementation Notes

Requires setting number of columns in "settings > Advanced Settings String > (enter number of columns)"

ADD TO SKIN (IN FOOTER) <script src="/data/sites/47/skins/skin-03/assets/js/components/hs.counter.js"></script>

ADD TO SKIN IN SCRIPT BLOCK (IN FOOTER) $.HSCore.components.HSCounter.init('[class*="js-counter"]');

Animated numerical statistics presented with circular accents and captions. Useful for a compact, graphic-heavy metrics display.

Implementation Notes

Requires setting number of columns in "settings > Advanced Settings String > (enter number of columns)"

ADD TO SKIN (IN FOOTER) <script src="/data/sites/47/skins/skin-03/assets/js/components/hs.counter.js"></script>

ADD TO SKIN IN SCRIPT BLOCK (IN FOOTER) $.HSCore.components.HSCounter.init('[class*="js-counter"]');

A single large hero banner with configurable styling and content. Use it for a featured message without a rotating slideshow.

A photo-and-content feature section with a large image on the left and up to eight information blocks on the right. Good for benefits or key facts.

A customizable single hero or call-to-action banner with a kicker, headline, description, background treatment, and up to two buttons.

A grid of icons paired with titles, descriptions, and optional links. Great for services, features, or quick topic navigation.

A grid of square icon links with a subtle enlarge-on-hover effect. Choose it for compact visual navigation.

Implementation Notes

Requires setting number of columns in "settings > Advanced Settings String > (enter number of columns)"

A grid of circular icon features with optional descriptions and links. Useful when you want a softer, badge-style presentation.

Implementation Notes

Requires setting number of columns in "settings > Advanced Settings String > (enter number of columns)"

A grid of image-based icon features instead of font icons. Best when you have custom illustrations or branded graphics.

Implementation Notes

Requires setting number of columns in "settings > Advanced Settings String > (enter number of columns)"

A grid of rectangular icon links with configurable colors and hover effects. Good for simple feature or navigation blocks.

Implementation Notes

Requires setting number of columns in "settings > Advanced Settings String > (enter number of columns)"

A compact grid of text links with small icons to the left. Useful for resource menus and quick-link collections.

Implementation Notes

SLIDE OPTIONS: Block Title, Description, Link URL, Icon, Icon HEX Color

A multi-column grid of clickable icon cards with hover color and border changes. Suitable for service categories or shortcuts.

Implementation Notes

SLIDE OPTIONS: Title, Description, URL, Icon, Icon Color

Requires setting number of icon blocks per row in "settings > Advanced Settings String > (enter number of buttons)"

A flexible list of icon-and-text links arranged vertically or horizontally. Use it for contact links, resources, or lightweight navigation.

Photographic hover cards that reveal additional text and an optional button. Ideal for service highlights or image-led navigation.

Implementation Notes

Requires setting number of columns in "settings > Advanced Settings String > (enter number of columns)"

A two-column grid of images with titles and descriptions. A straightforward option for visual content that needs accompanying copy.

Image-backed promotional cards with titles, descriptions, and links. Photos zoom subtly on hover for an interactive feature grid.

Implementation Notes

SLIDE OPTIONS: Title, Description, Photo, URL, Button label, Button color, Box height, Copy animation type

Requires setting number of columns in "settings > Advanced Settings String > (enter number of columns)"

Image-backed promotional cards with an added icon, kicker, description, and link. Useful for services or category navigation.

Full example - All Options

contained=false; maxWidth=1170; sectionBg=#d6ded9; sectionPaddingTop=70; sectionPaddingBottom=70; items=3; tablet=2; mobile=1; tabletBreakpoint=992; mobileBreakpoint=767; gap=24; height=390; padding=27; radius=22; align=left; textColor=#ffffff; kickerColor=#ffffff; titleColor=#ffffff; descriptionColor=#ffffff; linkColor=#ffffff; overlayColor=#121932; overlayOpacity=84; iconBg=#ffffff; titleSize=26; kickerSize=12; descriptionSize=15; linkSize=15; iconSize=68; iconPadding=15; shadow=true; textShadow=3; textShadowOpacity=0.6; zoom=true; hoverZoom=4.5; speed=500

Recommended Full-Width Pane

contained=true; maxWidth=1170; sectionBg=#d6ded9; sectionPaddingTop=70; sectionPaddingBottom=70; items=3; tablet=2; mobile=1; gap=24; textShadow=3; textShadowOpacity=0.6

Setting	Example	Description
SECTION & LAYOUT
`contained`	false	Center cards within maxWidth
`maxWidth`	1170	Maximum card-area width (px or CSS unit)
`sectionBg`	(blank)	Full-width section background; omit to disable
`sectionPaddingTop`	0	Top section padding (px or CSS unit)
`sectionPaddingBottom`	0	Bottom section padding (px or CSS unit)
`items`	3	Desktop columns; extra cards wrap onto new rows
`tablet`	2	Tablet columns
`mobile`	1	Mobile columns
`tabletBreakpoint`	992	Tablet breakpoint (px)
`mobileBreakpoint`	767	Mobile breakpoint (px)
`gap`	24	Horizontal and vertical spacing (px)
`height`	390	Minimum card height (px); alias cardHeight
`padding`	27	Card content padding (px)
`radius`	22	Card corner radius (px)
`align`	left	Text alignment: left / center / right
COLORS & TYPOGRAPHY
`textColor`	#ffffff	General card text color
`kickerColor`	#ffffff	Kicker text color
`titleColor`	#ffffff	Title text color
`descriptionColor`	#ffffff	Description text color
`linkColor`	#ffffff	Link text/arrow color
`overlayColor`	#121932	Overlay gradient color (6-digit hex)
`overlayOpacity`	84	Bottom overlay opacity (0-100)
`iconBg`	#ffffff	Icon badge background; supports transparent
`titleSize`	26	Title font size (px)
`kickerSize`	12	Kicker font size (px)
`descriptionSize`	15	Description font size (px)
`linkSize`	15	Link font size (px)
ICON & EFFECTS
`iconSize`	68	Icon badge width/height (px)
`iconPadding`	15	Padding inside icon badge (px)
`shadow`	true	Enable card box shadow
`textShadow`	3	Text shadow blur (px); 0 disables
`textShadowOpacity`	0.6	Text shadow darkness, 0-1
`zoom`	true	Enable photo zoom on hover
`hoverZoom`	4.5	Hover image zoom percentage (0-35)
`speed`	500	Hover animation duration (ms)

All settings are optional. Use semicolons between options. Text shadows apply to the kicker, title, description and link; icons are unaffected. Per-card text colors can be set in the item fields.

A grid of linked photo cards with titles and zoom-on-hover behavior. Good for simple visual navigation or featured content.

Full Example - All Options

contained=false; maxWidth=1170; sidePadding=16; sectionBg=#d6ded9; backgroundFullWidth=true; sectionPaddingTop=60; sectionPaddingBottom=60; fullWidth=false; items=3; tablet=2; mobile=1; tabletBreakpoint=992; mobileBreakpoint=767; gap=24; height=300; radius=14; fontColor=#ffffff; fontSize=20; fontWeight=700; captionBg=#23272e; captionOpacity=80; captionBackground=true; captionPadding=19; captionPosition=bottom; captionFit=false; align=center; textTransform=none; textShadow=0; photoPosition=center; zoom=true; hoverZoom=6; hoverLift=0; speed=500; shadow=true; overlayColor=#000000; overlayOpacity=0

Recommended Full-Width Pane

contained=true; maxWidth=1170; sidePadding=16; sectionBg=#d6ded9; sectionPaddingTop=60; sectionPaddingBottom=60; items=3; tablet=2; mobile=1; gap=24; height=300; radius=14; hoverZoom=6; captionBg=#23272e; captionOpacity=80

Setting	Example	Description
SECTION & LAYOUT
`contained`	false	true centers and limits the card grid to maxWidth.
`maxWidth`	1170	Maximum contained grid width (px or CSS unit).
`sidePadding`	16	Left/right inner grid padding when contained (px or CSS unit).
`sectionBg`	(blank)	Section background color; also enables viewport-wide background by default.
`backgroundFullWidth`	true	Extend section background edge to edge; false keeps it within the module.
`sectionPaddingTop`	0	Top section padding (px or CSS unit).
`sectionPaddingBottom`	0	Bottom section padding (px or CSS unit).
`fullWidth`	false	Make the entire section viewport-wide, not just its background.
`items`	3	Desktop columns (1–12); extra cards wrap to additional rows.
`tablet`	2	Tablet columns (1–12).
`mobile`	1	Mobile columns (1–6).
`tabletBreakpoint`	992	Tablet breakpoint, in pixels (500–1600).
`mobileBreakpoint`	767	Mobile breakpoint, in pixels (300–1200).
`gap`	24	Space between cards (px or CSS unit).
`height`	300	Height of each card (px or CSS unit); images cover this area.
`radius`	14	Corner radius (px or CSS unit).
CAPTION & TEXT
`fontColor`	#ffffff	Caption/title font color.
`fontSize`	20	Caption/title size (px or CSS unit).
`fontWeight`	700	Font weight (100–900).
`captionBg`	#23272e	Caption background color; use hex RGB for best compatibility.
`captionOpacity`	80	Caption background opacity (0–100).
`captionBackground`	true	Show caption background; false makes it transparent.
`captionPadding`	19	Inside padding for caption (px or CSS unit).
`captionPosition`	bottom	Caption placement: bottom, top, or middle.
`captionFit`	false	With middle caption, shrink caption width to its content.
`align`	center	Text alignment: left, center, or right.
`textTransform`	none	none, uppercase, lowercase, or capitalize.
`textShadow`	0	Text shadow blur (0–20); 0 disables shadow.
PHOTO & HOVER
`photoPosition`	center	Crop focus: center, top, bottom, left, right, or e.g. 50% 30%.
`zoom`	true	Enable image zoom on hover.
`hoverZoom`	6	Hover image zoom percentage (0–60).
`hoverLift`	0	Card lift on hover (px or CSS unit); 0 disables.
`speed`	500	Hover transition duration, in milliseconds (0–2500).
`shadow`	true	Enable card drop shadow.
`overlayColor`	#000000	Tint over the image, before the caption.
`overlayOpacity`	0	Photo overlay opacity (0–100).

Notes: All settings are optional. Separate key=value pairs with semicolons. Photos always cover their card area. contained controls grid width independently of the section background.

Linked image cards that include an optional date, title, and hover effect. Ideal for news, events, or dated announcements.

Full Example - All Options

contained=true; maxWidth=1170; sidePadding=16; sectionBg=#f3f4f6; backgroundFullWidth=true; sectionPaddingTop=40; sectionPaddingBottom=40; fullWidth=false; items=3; tablet=2; mobile=1; tabletBreakpoint=992; mobileBreakpoint=767; gap=24; height=300; radius=14; fontColor=#ffffff; fontSize=20; fontWeight=700; captionBg=#23272e; captionOpacity=80; captionBackground=true; captionPadding=19; captionPosition=bottom; captionFit=false; align=left; textTransform=none; textShadow=0; showDate=true; dateColor=#ffffff; dateBg=#000000; dateOpacity=75; dateSize=13; dateWeight=700; datePosition=topleft; dateTop=18; dateLeft=18; dateRadius=0; datePadding=10px 14px; dateAlign=left; dateTransform=uppercase; hoverZoom=6; zoom=true; speed=500; photoPosition=center; hoverLift=0; shadow=true; overlayColor=#000000; overlayOpacity=0

Recommended Full-Width Pane

contained=true; maxWidth=1170; sidePadding=16; sectionBg=#d6ded9; backgroundFullWidth=true; sectionPaddingTop=60; sectionPaddingBottom=60; items=3; tablet=2; mobile=1; gap=24; height=300; radius=14; captionPosition=bottom; datePosition=topleft

Simple Contained Grid - No Background

contained=true; maxWidth=1170; sidePadding=16; items=3; tablet=2; mobile=1; gap=24; height=300; radius=14

Setting	Example	Description
SECTION & LAYOUT
`contained`	false	Center and constrain the card grid to maxWidth.
`maxWidth`	1170	Maximum contained grid width (px or CSS length).
`sidePadding`	16	Internal horizontal grid padding when contained; use 0 for flush edges.
`sectionBg`	(blank)	Section background color; triggers full-width background by default.
`backgroundFullWidth`	true	Extend section background to viewport edges; false confines it to module width.
`sectionPaddingTop`	0	Section top padding (px or CSS length).
`sectionPaddingBottom`	0	Section bottom padding (px or CSS length).
`fullWidth`	false	Expand the entire section to viewport width.
`items`	3	Desktop card columns (1–12).
`tablet`	2	Tablet columns (1–12).
`mobile`	1	Mobile columns (1–6).
`tabletBreakpoint`	992	Tablet breakpoint in pixels (500–1600).
`mobileBreakpoint`	767	Mobile breakpoint in pixels (300–1200).
`gap`	24	Space between cards (px or CSS length).
`height`	300	Card height; photos cover the full card.
`radius`	14	Card corner radius (px or CSS length).
CAPTION & TEXT
`fontColor`	#ffffff	Caption title text color.
`fontSize`	20	Caption title size (px or CSS length).
`fontWeight`	700	Caption title weight (100–900).
`captionBg`	#23272e	Caption background color.
`captionOpacity`	80	Caption background opacity (0–100).
`captionBackground`	true	Show caption background; false makes it transparent.
`captionPadding`	19	Padding within the caption area.
`captionPosition`	bottom	Caption vertical position: bottom, middle, top.
`captionFit`	false	Fit caption width to content when positioned in the middle.
`align`	left	Text alignment: left, center, right (default is center).
`textTransform`	none	Title letter casing: none, uppercase, lowercase, capitalize.
`textShadow`	0	Caption title shadow blur size (0–20); 0 disables it.
DATE BADGE
`showDate`	true	Show or hide the date badge.
`dateColor`	#ffffff	Date badge text color.
`dateBg`	#000000	Date badge background color.
`dateOpacity`	75	Date background opacity (0–100).
`dateSize`	13	Date font size (px or CSS length).
`dateWeight`	700	Date font weight (100–900).
`datePosition`	topleft	Badge corner: topleft, topright, bottomleft, bottomright.
`dateTop`	18	Distance from top or bottom edge, depending on position.
`dateLeft`	18	Distance from left or right edge, depending on position.
`dateRadius`	0	Date badge corner radius.
`datePadding`	10px 14px	Date badge padding (CSS shorthand, up to four values).
`dateAlign`	left	Date text alignment: left, center, right.
`dateTransform`	uppercase	Date letter casing: none, uppercase, lowercase, capitalize.
PHOTO & HOVER
`hoverZoom`	6	Photo zoom percentage on hover (0–60).
`zoom`	true	Enable or disable photo hover zoom.
`speed`	500	Hover transition duration in milliseconds (0–2500).
`photoPosition`	center	Photo crop focus: center, top, bottom, left, right, or percentage pair.
`hoverLift`	0	Card vertical lift on hover (px or CSS length).
`shadow`	true	Show or hide card shadow.
`overlayColor`	#000000	Color of the overlay covering the photo.
`overlayOpacity`	0	Photo overlay opacity (0–100).

Notes: contained controls card width independently of backgroundFullWidth. Photos always use cover cropping to fill the defined card height. Ancestor elements using overflow:hidden or overflow:clip may prevent full-width background bleed.

Image cards combining photos, descriptive copy, and hover zoom. Use when each visual needs more context than a title alone.

Full Example - All Options

--sf-columns:3;--sf-tablet-columns:2;--sf-mobile-columns:1;--sf-gap:24px;--sf-max-width:none;--sf-padding:0px;--sf-bg:#f6f5f5;--sf-border:#e7e7e7;--sf-border-width:1px;--sf-radius:12px;--sf-content-padding:20px;--sf-ratio:4 / 3;--sf-fit:cover;--sf-position:center;--sf-title-size:20px;--sf-title:#222;--sf-text:#555;--sf-align:left;--sf-shadow:0 8px 24px rgba(0,0,0,.08);--sf-hover-shadow:0 12px 30px rgba(0,0,0,.12);--sf-lift:-4px;--sf-zoom:1.035;--sf-contained:0;--sf-container-width:var(--site-content-width,1140px);--sf-container-padding:20px;--sf-module-bg:transparent;--sf-module-padding:0px;

Setting	Description
`--sf-columns`	Number of columns on desktop. Example: `3`.
`--sf-tablet-columns`	Number of columns on tablet-sized screens. Default: `2`.
`--sf-mobile-columns`	Number of columns on small/mobile screens. Default: `1`.
`--sf-gap`	Space between cards. Example: `24px`.
`--sf-max-width`	Optional maximum width for the module/grid area. Example: `1200px` or `none`.
`--sf-padding`	Padding around the card grid. Example: `20px` or `20px 0`.
`--sf-bg`	Background color of each card. Example: `#ffffff`.
`--sf-border`	Card border color. Example: `#e7e7e7`.
`--sf-border-width`	Width of the card border. Example: `1px` or `0`.
`--sf-radius`	Card corner rounding. Example: `12px`.
`--sf-content-padding`	Padding inside the card around the title and description.
`--sf-ratio`	Image aspect ratio. Examples: `4 / 3`, `16 / 9`, or `1 / 1`.
`--sf-fit`	How the image fills its area. Usually `cover` or `contain`.
`--sf-position`	Image focal position. Examples: `center`, `top`, or `center top`.
`--sf-title-size`	Title font size. Example: `20px`.
`--sf-title`	Title text color. Example: `#222`.
`--sf-text`	Description/body text color. Example: `#555`.
`--sf-align`	Text alignment inside cards. Use `left`, `center`, or `right`.
`--sf-shadow`	Normal card box shadow. Use `none` to disable it.
`--sf-hover-shadow`	Box shadow shown when hovering over a card.
`--sf-lift`	How far a card moves upward on hover. Example: `-4px`. Use `0px` to disable.
`--sf-zoom`	Image zoom amount on hover. Example: `1.035`. Use `1` for no zoom.
`--sf-contained`	Set to `1` to keep cards within the site's content width while allowing the outer module area to remain full width.
`--sf-container-width`	Overrides the contained content width. Example: `1170px`. Otherwise uses the skin's `--site-content-width` or the built-in fallback.
`--sf-container-padding`	Left/right padding inside the contained content area. Example: `20px`.
`--sf-module-bg`	Background for the full-width outer module area. Useful with contained mode.
`--sf-module-padding`	Padding around the full-width outer module area. Example: `50px 0`.
`Legacy number`	Older modules can still use a number such as `4` by itself. This is retained only for backward compatibility.

Photo cards with an overlaid title, description, and optional button. Choose this for visually rich links with copy on the image.

Implementation Notes

Requires setting number of columns in "settings > Advanced Settings String > (enter number of columns)"

Responsive photo cards with names or titles, contact details, and a button that opens a longer popup description. Ideal for team biographies.

Staff Directory, full background color but cards contained

contained=true; maxWidth=1170; sidePadding=0; sectionBg=#f5f5f3; backgroundFullWidth=true; sectionPaddingTop=45; sectionPaddingBottom=55; items=3; tablet=2; mobile=1; gap=26; backgroundColor=#ffffff; headingColor=#202020; textColor=#505050; align=center; padding=20; radius=6; imagePosition=center top; imageZoom=1.025; titleSize=21; titleWeight=600; contactSize=13px; buttonColor=#aa8a50; buttonTextColor=#ffffff; buttonSize=small; buttonRadius=4; shadow=true; hoverLift=3; popupWidth=650; popupMaxHeight=75vh; popupBackground=#ffffff; popupTextColor=#444444; popupRadius=10; popupPadding=34; popupTitleSize=24; popupTextSize=16; popupTextLineHeight=1.65;

Simple white cards — minimal overrides

contained=true; sidePadding=0; items=3; tablet=2; mobile=1; gap=24; backgroundColor=#ffffff; shadow=true; buttonSize=medium;

Services or portfolio blocks

contained=true; maxWidth=1170; sidePadding=0; items=2; tablet=2; mobile=1; gap=28; imageRatio=4/3; imageFit=cover; imagePosition=center; align=left; radius=10; padding=24; buttonSize=medium; popupWidth=720; popupMaxHeight=75vh;

Uniform-height photos

items=3; tablet=2; mobile=1; imageHeight=280; imageHeightTablet=260; imageHeightMobile=300; imageFit=cover; imagePosition=center top; buttonSize=small;

Advanced Settings Reference

Setting	Default / Example	Description
SECTION AND CONTAINMENT
`contained`	true	Constrain the inner grid to maxWidth.
`maxWidth`	1170	Maximum inner content width, in pixels.
`sidePadding`	16	Horizontal inset around the grid; use 0 to align with the pane.
`sectionBg`	unset	Section background color, e.g. #f5f5f3.
`backgroundFullWidth`	true when sectionBg is set	Extend section background across available full width; may depend on pane/skin.
`sectionPaddingTop`	55	Space above content, in pixels.
`sectionPaddingBottom`	65	Space below content, in pixels.
`fullWidth`	false	Opt into full-width layout treatment.
GRID AND RESPONSIVENESS
`items`	4	Desktop grid columns (columns is an alias).
`tablet`	2	Tablet grid columns.
`mobile`	1	Mobile grid columns.
`gap`	24	Grid gap in pixels.
`tabletBreakpoint`	992	Tablet breakpoint in pixels.
`mobileBreakpoint`	767	Mobile breakpoint in pixels.
CARD LAYOUT AND STYLING
`backgroundColor`	#ffffff	Card background color.
`headingColor`	inherit	Card title color.
`textColor`	inherit	Card supporting text color.
`align`	center	Card text alignment: left, center, right.
`padding`	22	Card body inner padding, in pixels.
`radius`	8	Corner radius in pixels.
`shadow`	true	Enable soft card shadows.
`hoverLift`	4	Hover movement amount in pixels.
`speed`	250	Hover transition duration in milliseconds.
IMAGES
`imageRatio`	not set	Optional width/height ratio, e.g. 4/3. Without a ratio or height, images use natural proportions.
`imageHeight`	not set	Optional fixed image height in pixels, overrides imageRatio.
`imageHeightTablet`	inherit imageHeight	Optional tablet image height, only meaningful with imageHeight.
`imageHeightMobile`	inherit prior height	Optional mobile image height, only meaningful with imageHeight.
`imageFit`	cover	Image fitting: cover, contain or fill. Mainly relevant with fixed ratio/height.
`imagePosition`	center	Crop focus, e.g. center top.
`imageZoom`	1.035	Image zoom factor on hover; 1 disables enlargement.
TYPOGRAPHY AND BUTTONS
`kickerSize`	12px	Kicker text size.
`titleSize`	22	Card title size in pixels.
`titleWeight`	inherit	Optional title font weight, e.g. 600; omit to inherit site font.
`textSize`	15	Supporting text size in pixels.
`textLineHeight`	1.5	Supporting text line height.
`contactSize`	13px	Phone/email text size.
`buttonColor`	#88733d	Button background color.
`buttonTextColor`	#ffffff	Button label color.
`buttonSize`	medium	small (11px / 32px minimum), medium (13px / 36px), large (14px / 44px); legacy pixel values accepted.
`buttonRadius`	5	Button corner radius in pixels.
FLOATING POPUP
`popupWidth`	600	Maximum popup width in pixels.
`popupMaxHeight`	70vh	Maximum popup height, e.g. 75vh.
`popupBackground`	#ffffff	Popup background color.
`popupTextColor`	#303944	Popup body text color.
`popupRadius`	12	Popup corner radius in pixels.
`popupPadding`	30	Popup content padding in pixels.
`popupTitleSize`	23	Popup heading size in pixels.
`popupTextSize`	16	Popup body text size in pixels.
`popupTextLineHeight`	1.6	Popup body line height.

Optional Item Fields

Field	Required?	Description
Image / Image Alt Text	No	Photo and accessible alternate text.
Kicker	No	Small label above the title.
Title	No	Primary heading.
Subtitle	No	Secondary heading or short supporting text.
Phone Number	No	Displays a clickable tel: link with small icon when populated.
Email Address	No	Displays a clickable mailto: link with small icon when populated.
Button Text	No	Label for popup trigger; blank suppresses the popup button.
Popup Description	No	Rich HTML content displayed in the floating panel; blank suppresses the popup button.

Image sizing: No image height or ratio uses the image's natural proportions. imageHeight overrides imageRatio. Use imageFit=cover for fixed-height crops.

Spacing: sidePadding=0 removes the outer horizontal inset; padding adjusts the interior of each card.

Popup: Button displays only if both Button Text and Popup Description exist. Supports close button, outside click, Escape, and scrolling for long content.

A responsive photo gallery with hover zoom and enlarged image viewing. Best for a conventional tiled collection of photos.

Implementation Notes

Requires setting number of columns in "settings > Advanced Settings String > (enter number of columns 1-12)." Either works for legacy placements 4 4|imageFolder=~/Data/Sites/8/media/|maxWidth=1000|jpegQuality=60 Classes to change behavior: ImageGalleryGrid-contained - Full-width module background, gallery content aligned to the site container ImageGalleryGrid-wide - Full-width gallery

A uniform photo grid with captions presented in the enlarged image view. Good when the gallery should keep consistent columns.

Implementation Notes

With CSS you can override the number of images in a row and the spacing between grid-template-columns: repeat(3, 1fr); gap: 10px;

An edge-to-edge photo grid without gaps, with optional hover overlays and enlarged photo viewing. Ideal for a dense gallery.

A masonry-style gallery that accommodates photos of differing proportions, with hover effects and enlarged image viewing.

Implementation Notes

Includes upload/format photo option:

A horizontal photo carousel with navigation arrows and optional captions. Useful for a compact, manually browsed gallery.

An automatically rotating photo carousel with randomized slides, navigation arrows, and fade or slide transitions.

Implementation Notes

Advanced Setting String options: --sfcr-random:true;--sfcr-autoplay:true;--sfcr-delay:4500ms;--sfcr-speed:750ms;--sfcr-effect:fade;--sfcr-arrows:true;--sfcr-pause-hover:true;--sfcr-swipe:true;

A horizontally scrolling strip of logos or other graphics. Great for partners, clients, sponsors, or brand collections.

Implementation Notes

Requires setting height in "settings > Advanced Settings String > (enter number of pixels)"

Display scheduled announcements, promotional graphics, or custom HTML in responsive modal popups. Show multiple notices in sequence, control how often visitors see them, and customize the appearance without jQuery, Bootstrap, or Unify.

Modal Popup — Standalone (2.0.6)

Displays image, text, or rich HTML announcements in an accessible modal overlay. Multiple active items appear one at a time in SuperFlexi sort order; closing one opens the next. All CSS and JavaScript are included in the solution.

Advanced Settings — Complete Example

--mp-max-width:700px; --mp-padding:20; --mp-radius:6; --mp-background:#ffffff; --mp-overlay-opacity:0.75; --mp-animation:fade; --mp-animation-speed:250; --mp-open-delay:500; --mp-mobile-padding:15; --mp-close-on-overlay:true; --mp-frequency:session; --mp-frequency-days:7;

Paste these into the module's Advanced Settings / Custom Settings field. This module uses CSS custom properties (--mp-name:value;), not the usual name=value; format. Enter only the properties you want to override.

Common Presets

Image-only poster, edge-to-edge:

--mp-max-width:650px; --mp-padding:0; --mp-radius:0; --mp-frequency:session;

Compact text announcement:

--mp-max-width:480px; --mp-padding:30; --mp-radius:8; --mp-overlay-opacity:0.65; --mp-animation:fade;

Always display on page load:

--mp-frequency:always; --mp-open-delay:500;

Once every seven days:

--mp-frequency:days; --mp-frequency-days:7;

Instant, non-dismissible backdrop:

--mp-animation:none; --mp-open-delay:0; --mp-close-on-overlay:false;

Appearance & Behavior Settings

Setting	Default	Description / Accepted Values
Layout & Styling
`--mp-max-width`	700px	Maximum popup width. Accepts px, rem, em, or vw units (e.g. `800px`).
`--mp-padding`	20	Inner panel padding in pixels, from 0 to 100. Enter a number without px.
`--mp-mobile-padding`	15	Inner panel padding at screen widths 600px and below, in pixels (0–60).
`--mp-radius`	6	Corner radius in pixels (0–100).
`--mp-background`	#ffffff	Popup panel background; any valid CSS color.
`--mp-overlay-opacity`	0.75	Opacity of the black screen mask: 0 (transparent) to 1 (opaque).
Animation & Interaction
`--mp-animation`	fade	`fade` or `none`. Fade includes a subtle upward entrance movement.
`--mp-animation-speed`	250	Entrance animation duration in milliseconds (0–1500). Reduced-motion preferences are respected.
`--mp-open-delay`	500	Delay before the initial popup queue opens, in milliseconds.
`--mp-close-on-overlay`	true	`true` or `false`. Controls whether clicking outside the panel closes the current popup. Close button and Escape remain available.
Visitor Frequency
`--mp-frequency`	session	`always` = every page load; `session` = once per browser tab/session; `days` = once within the configured interval.
`--mp-frequency-days`	7	Interval for `days` mode (1–3650 days). Has no effect for `always` or `session`.

Popup Item Fields

Field	Purpose
Internal Popup Name	Administration-only label, shown inside the blue Edit Popup button; not displayed to visitors.
Show Popup Live	Enable or disable the announcement without deleting it.
Start Date	Optional first eligible day. Accepts `M/D/YYYY` or `YYYY-MM-DD`.
Expiration Date	Optional final eligible day; inclusive. Leave blank to run indefinitely.
Popup Content	WYSIWYG HTML content: images, formatted text, buttons, links, or embedded content.
Sort Rank	Standard SuperFlexi item ordering; determines which announcement appears first.

Operational Notes

Active popups are queued across module instances on the page and displayed sequentially. Each popup can be closed with its X button or Escape key. Popup content scrolls within the panel if taller than the available viewport. Visitors are evaluated using their local calendar date; invalid non-empty dates suppress an item.

Frequency tracking is per popup and page, stored in the browser: sessionStorage for session mode and localStorage for days mode. An announcement is marked as shown when displayed. Logged-in administrators do not consume frequency allowances during preview. Private browsing, cleared storage, or disabled storage may cause repeat appearances.

The module is self-contained (no jQuery, Bootstrap, Unify, or Custombox). The WYSIWYG editor can insert rich HTML, so grant editing permissions only to trusted administrators. Module options affect all popup items in that module; item-specific live dates and content are edited individually.

A step-by-step content slider with navigation across the top, a photo, text, and an optional button for each step.

Implementation Notes

Advanced setting string allows you to set a custom HEX color for the slide background color.

A three-column product or service grid with photos, descriptions, and links. Cards respond subtly on hover.

A horizontally scrolling collection of product cards with photos, descriptions, and links. Starts in randomized order and uses arrow navigation.

Implementation Notes

Can disable the random slides by adding this CSS class to the module "no-random"

Product Slider - Advanced Settings

Full example - All Options

contained=false; maxWidth=1170; sectionBg=#d6ded9; sectionPaddingTop=70; sectionPaddingBottom=70; items=3; tablet=2; mobile=1; tabletBreakpoint=992; mobileBreakpoint=767; scroll=1; gap=24; align=left; equalHeight=true; padding=20; radius=14; blockColor=#344c5c; textColor=#ffffff; titleColor=#ffffff; descriptionColor=#ffffff; titleSize=22; descriptionSize=16; imageRatio=auto; imageFit=cover; imageZoom=false; shadow=true; hover=lift; hoverAmount=-6; speed=450; autoPlay=false; interval=5000; pauseHover=true; loop=true; arrows=true; dots=true; arrowSize=46; arrowBg=#ffffff; arrowColor=#263640; dotColor=#b8bec3; dotActiveColor=#344c5c; random=true

Recommended Full-Width Pane

contained=true; maxWidth=1170; sectionBg=#d6ded9; sectionPaddingTop=70; sectionPaddingBottom=70; items=3; tablet=2; mobile=1; gap=24

Setting	Example	Description
SECTION & LAYOUT
`contained`	false	Center content within maxWidth
`maxWidth`	1170	Maximum content width (px or CSS unit)
`sectionBg`	#d6ded9	Full-width section background; omit to disable
`sectionPaddingTop`	0	Top section padding (px or CSS unit)
`sectionPaddingBottom`	0	Bottom section padding (px or CSS unit)
`items`	3	Desktop cards visible
`tablet`	2	Tablet cards visible
`mobile`	1	Mobile cards visible
`tabletBreakpoint`	992	Tablet breakpoint (px)
`mobileBreakpoint`	767	Mobile breakpoint (px)
`scroll`	1	Cards advanced per navigation step
`gap`	24	Spacing between cards (px)
`align`	left	left / center / right
`equalHeight`	true	Equal-height cards
`padding`	20	Card text padding (px)
`radius`	14	Card corner radius (px)
COLORS & TYPOGRAPHY
`blockColor`	#344c5c	Card body background
`textColor`	#ffffff	General card text
`titleColor`	#ffffff	Title color
`descriptionColor`	#ffffff	Description color
`titleSize`	22	Title size (px)
`descriptionSize`	16	Description size (px)
IMAGES & EFFECTS
`imageRatio`	auto	auto / square / 1:1 / 4:3 / 16:9
`imageFit`	cover	cover / contain
`imageZoom`	false	Zoom photo on hover
`shadow`	true	Enable card shadow
`hover`	lift	none / lift / scale / lift-scale / brighten
`hoverAmount`	-6	Hover lift distance (px)
`speed`	450	Slide transition (ms)
NAVIGATION & ORDER
`autoPlay`	false	Automatically advance slides
`interval`	5000	Autoplay interval (ms)
`pauseHover`	true	Pause on hover/focus
`loop`	true	Wrap to beginning
`arrows`	true	Show navigation arrows
`dots`	true	Show navigation dots
`arrowSize`	46	Arrow diameter (px)
`arrowBg`	#ffffff	Arrow background
`arrowColor`	#263640	Arrow icon color
`dotColor`	#b8bec3	Inactive dot color
`dotActiveColor`	#344c5c	Active dot color
`random`	true	Shuffle products on load

A horizontal product carousel with photos and titles that appear over a darkened image on hover. Good for compact visual catalogs.

Implementation Notes

Requires setting number of boxes to show in "settings > Advanced Settings String > (enter number of boxes)"

A vertically stacked set of service rows with an image beside descriptive copy and an optional link. Separators distinguish each row.

Implementation Notes

Advanced Setting String options: --sbv1-image-width:33%;--sbv1-max-width:1200px;--sbv1-gap:30px;--sbv1-background:transparent;--sbv1-title-color:inherit;--sbv1-text-color:inherit;--sbv1-padding-y:0px;--sbv1-padding-x:0px;--sbv1-title-size:26px;--sbv1-text-size:inherit;--sbv1-radius:0px;--sbv1-image-radius:0px;--sbv1-image-aspect:auto;--sbv1-image-fit:cover;--sbv1-image-position:center;--sbv1-align:start;--sbv1-divider-color:#e3e3e3;--sbv1-divider-spacing:50px;--sbv1-divider-display:block;--sbv1-button-bg:#2f6fab;--sbv1-button-color:#ffffff;--sbv1-button-hover-bg:#245a8c;--sbv1-button-hover-color:#ffffff;--sbv1-button-radius:4px;--sbv1-button-padding-x:14px;--sbv1-button-padding-y:8px;--sbv1-button-font-size:inherit;--sbv1-button-font-weight:600;--sbv1-button-min-height:25px;--sbv1-button-border-width:0px;--sbv1-button-border-color:transparent;"

A responsive series of image-and-text service sections with a layout alternative to Service Blocks v1.

A customizable sequence of service sections with images on either side, copy, optional buttons, and adjustable section backgrounds and spacing.

1. Full-width background, contained blocks

Top/bottom pane. Full browser-width background, content centered at 1170px.

--sbv3-background-width:100vw; --sbv3-content-width:1170px; --sbv3-section-bg:#f3f5f7; --sbv3-copy-bg:transparent; --sbv3-copy-padding-x:0px; --sbv3-copy-padding-y:40px; --sbv3-copy-image-gap:48px; --sbv3-copy-align:left; --sbv3-row-gap:0px;

2. Full-width background and full-width blocks

Top/bottom pane. Blocks fill the available parent width.

--sbv3-background-width:100vw; --sbv3-content-width:100%; --sbv3-section-bg:#f3f5f7; --sbv3-copy-bg:transparent; --sbv3-copy-padding-x:40px; --sbv3-copy-padding-y:50px; --sbv3-copy-image-gap:40px; --sbv3-copy-align:left; --sbv3-row-gap:0px; --sbv3-image-width:50%;

3. Center pane, no backgrounds

Transparent section and text blocks, contained in parent pane.

--sbv3-background-width:100%; --sbv3-content-width:100%; --sbv3-section-bg:transparent; --sbv3-copy-bg:transparent; --sbv3-copy-padding-x:0px; --sbv3-copy-padding-y:40px; --sbv3-copy-image-gap:40px; --sbv3-copy-align:left; --sbv3-row-gap:24px; --sbv3-image-width:50%;

Layout	Background Width	Content Width
Quick Layout Reference
Full background / contained	100vw	1170px
Full background / full blocks	100vw	100%
Center pane / no background	100%	100%

Setting	Purpose / Example Values
Available CSS Variable Options
--sbv3-background-width	Section background width: 100%, 100vw
--sbv3-content-width	Maximum content width: 100%, 1170px, 1400px
--sbv3-section-width	Section width constraint: 100%, 1170px
--sbv3-section-bg	Outer section background: #f3f5f7, transparent
--sbv3-copy-bg	Text-block background: #ffffff, transparent
--sbv3-copy-padding-x	Horizontal text padding: 0px, 20px, 40px
--sbv3-copy-padding-y	Vertical text padding: 20px, 40px, 60px
--sbv3-copy-image-gap	Extra padding on the image-facing side: 0px, 24px, 48px
--sbv3-copy-align	Text alignment: left, center, right, justify
--sbv3-image-width	Image column width: 40%, 50%, 60%
--sbv3-row-min-height	Minimum row height: 300px, 400px, auto
--sbv3-row-gap	Spacing between rows: 0px, 20px, 40px
--sbv3-gap	General layout gap: 0px, 20px, 30px
--sbv3-image-radius	Image corner rounding: 0px, 12px, 20px
--sbv3-row-radius	Row corner rounding: 0px, 12px, 20px
--sbv3-mobile-padding-x	Mobile horizontal text padding: 12px, 20px

Notes: 100vw spans the viewport; 100% follows the available parent width. For full-width blocks, the parent pane must also permit full-width content. Image-side padding automatically switches left/right based on block orientation and is removed when blocks stack on mobile. Existing photo-position, image-height, and button-color fields remain available in the normal module editor. Replace the entire Advanced Settings String when switching between example layouts to avoid conflicting declarations.

A row of linked social-platform icons for company profiles. Useful in footers, contact sections, or about pages.

Horizontal headings that reveal content in compact expandable panels. Useful when several topics need to share limited page space.

A traditional horizontal tab interface that switches between content panels. Good for related information visitors can compare.

A horizontal tab system for switching between groups of content without leaving the page. Suitable for FAQs or structured details.

A vertical tab menu on the left that changes the content panel on the right. Useful for larger groups of related topics.

A simple list of people or items with an image on the left and text on the right. Good for staff profiles and basic product lists.

Implementation Notes

Requires setting photo column size in "settings > Advanced Settings String > (enter number of 1, 2, 3, 4, 6, 12)"

A vertically stacked list of testimonials. Choose it when you want several customer quotes visible without a slider.

A rotating testimonial display with navigation arrows and configurable appearance. Best for showcasing quotes one at a time.

Full Example - All Options

contained=true; maxWidth=1180; sidePadding=16; sectionBg=#ffffff; backgroundFullWidth=true; sectionPaddingTop=35; sectionPaddingBottom=40; quoteSize=32; quoteLineHeight=1.42; quoteColor=#8f99a3; quoteMarkSize=106; quoteMarkGap=4; showQuote=true; textColor=#3f454b; nameColor=#262b31; mutedColor=#737b84; align=center; arrows=true; arrowBackground=#ffffff; arrowHoverBackground=#252b31; arrowBorderColor=#c9ced3; counter=true; autoplay=true; interval=6000; speed=560; randomStart=true; pauseOnHover=true;

Cream Background with Contained Content

contained=true; maxWidth=1170; sectionBg=#f6f3ec; backgroundFullWidth=true; sectionPaddingTop=55; sectionPaddingBottom=65; quoteSize=34; quoteLineHeight=1.4; quoteMarkSize=106; quoteMarkGap=-6; autoplay=true; interval=6500; randomStart=true;

Compact Testimonial Section

contained=true; maxWidth=1000; sectionPaddingTop=20; sectionPaddingBottom=25; quoteSize=27; quoteLineHeight=1.35; quoteMarkSize=90; quoteMarkGap=-10;

Static Testimonials with Manual Navigation

autoplay=false; randomStart=false; arrows=true; counter=true; sectionBg=#ffffff; quoteSize=30; quoteMarkGap=0;

Setting	Default / Example	Description
SECTION & CONTAINMENT
`contained`	true	Constrain the testimonial, module heading, links, and footer within maxWidth.
`maxWidth`	1180	Maximum contained content width, in pixels.
`sidePadding`	16	Left and right inner padding, in pixels.
`sectionBg`	#ffffff	Background color for the entire module section.
`backgroundFullWidth`	true	Extend the section background across the viewport, including behind header and footer.
`sectionPaddingTop`	35	Top padding for the whole module, in pixels.
`sectionPaddingBottom`	40	Bottom padding for the whole module, in pixels.
QUOTE & TYPOGRAPHY
`quoteSize`	32	Testimonial font size in pixels on desktop; capped at 26px on tablet and 20px on mobile.
`quoteLineHeight`	1.42	Testimonial line-height multiplier.
`quoteColor`	#8f99a3	Decorative quotation mark color.
`quoteMarkSize`	106	Decorative quotation mark size, in pixels (16-180).
`quoteMarkGap`	4	Gap below quotation mark, in pixels (-50 to 100). Negative values bring it closer to the text.
`showQuote`	true	Display the decorative opening quotation mark.
`textColor`	#3f454b	Testimonial copy color.
`nameColor`	#262b31	Attribution/name and module heading color.
`mutedColor`	#737b84	Slide counter text color.
`align`	center	Text alignment: left, center, or right.
CONTROLS & SLIDE BEHAVIOR
`arrows`	true	Show previous/next navigation arrows.
`arrowBackground`	#ffffff	Arrow button background color.
`arrowHoverBackground`	#252b31	Arrow background color on hover.
`arrowBorderColor`	#c9ced3	Arrow button border color.
`counter`	true	Show current slide / total slide count.
`autoplay`	true	Automatically advance between testimonials.
`interval`	6000	Autoplay delay, in milliseconds.
`speed`	560	Slide transition duration, in milliseconds.
`randomStart`	true	Begin on a randomly selected testimonial.
`pauseOnHover`	true	Pause autoplay while mouse is over the rotator or a control has focus.

A testimonial carousel with navigation, slide count, and optional Google-style star ratings. Useful for review-focused sections.

Implementation Notes

Advanced Setting String options: --tr2-primary:#003f6b;--tr2-primary-dark:#00304f;--tr2-accent:#f4b740;--tr2-delay:8000ms;--tr2-shadow:0 14px 38px rgba(0,0,0,.10);--tr2-radius:22px;--tr2-autoplay:1;

A rotating quote display over a shared photographic background. Suitable for testimonials needing a stronger visual presence.

Implementation Notes

Requires setting the photo path in "settings > Advanced Settings String > (enter path. ex: /data/sites/42/media/home/photo.jpg)"

A testimonial rotator beside a fixed image, with quotes changing on the opposite side. Useful for a split-layout testimonial section.

Implementation Notes

Requires setting the photo path in "settings > Advanced Settings String > (enter path. ex: /data/sites/42/media/home/photo.jpg)"

A two-column grid of static testimonial quote boxes. Good when readers should see several short endorsements at once.

A vertical, connected timeline of milestones or steps with headings, descriptions, and optional links. Ideal for company history or processes.

Implementation Notes

Requires setting the timeline primary color in "settings > Advanced Settings String > (enter a HEX color, no # symbol)"

A multi-row grid of embedded YouTube videos with titles. Visitors can play videos in place or expand them to full screen.

No solutions in this category.

Contact

16540 W. Beloit Road
New Berlin, WI 53151

414-708-0777

About Us

Waukesha website design: We provide website design, development, website hosting, email service and graphic design solutions to the Greater Milwaukee - Waukesha Wisconsin area and the surrounding communities in southeastern Wisconsin, but we are more than willing to work with those out of this area.

Clients

Use our secure portal to view current and past projects, open invoices and website hosting accounts.

Client Portal Support