Create elegant, animated, hero style sliders focused on delivering content to your visitors in a unique way.
The Shift stack can often take up a good deal of space, especially when used as a banner of sorts. So to showcase it a little better we’ve built a separate page to show off what Shift is capable of accomplishing.
When enabled you'll be given additional options throughout the Shift stack's settings that allow you to customize the styling for visitors who have Dark Mode enabled in their computer's OS or browser.
Mobile, Tablet & Desktop Height
Allows you to set a different height for the Shift stack based on the three Foundry responsive breakpoints. In addition to these height settings for Shift you can use other stacks’ responsive breakpoint settings to customize the content that you place within the Shift stack’s slides.
Mobile, Tablet & Desktop Width
Set a different width for the Shift stack navigation items based on the three Foundry responsive breakpoints. Adjust the size of the navigation items to best fit on different devices and browser widths.
Choose to show or hide navigation item icons at each of the three breakpoints.
Choose to show or hide navigation item labels at each of the three breakpoints.
Choose to show or hide navigation item descriptors at each of the three breakpoints.
Use two color pickers to set the background gradient for the navigation bar that resides on top of the Shift stack slides.
Choose whether or not to include a border on the top of the Shift navigation bar as well as set its color.
Set the normal and active colors for the navigation item labels.
Set the normal and active colors for the navigation item descriptors.
Choose whether the Shift labels use the Foundry Control Center’s Base Font or whether you’d like to use the Typeface stack’s font assignments.
Label Weight & Active Weight
Choose a font weight for your normal and active labels. If using Typeface font assignments be sure you’ve loaded the correct font weights in the Typeface stack as well.
When enabled the slider will automatically advance to the next slide, and then rotate back around to the first slide.
The amount of time the slider will pause on each Shift slide.
Each slide with Shift has its own set of options as well. The Shift Slide child stack also contains a few child stacks of its own as well.
When enabled you'll be given additional options throughout the Shift child stack's settings that allow you to customize the styling for visitors who have Dark Mode enabled in their computer's OS or browser.
Choose an icon for your slide’s navigation item. You can choose from hundreds of different icons.
Choose a size for your navigation item’s icon.
Set the label for this slide’s navigation item.
Provide a small bit of text for this slide’s navigation item.
Choose which type of Container you’d like it to be. You can choose from a Fixed-Width or Fluid container.
You can choose from several different background types for your slide. Opt for one of the following:
You can use a color picker, and its opacity slider, to set an overlay color for your slide’s background. This can help increase text legibility depending on your background.
Shift’s navigation items have an indicator line above them to mark the active item. You can use a color picker to choose a color for each slide’s active indicator.
Use a set of color pickers to set the normal and active colors for each individual navigation item.
The Shift Item stack, which is a child stack of the main Shift stack also has a couple of child stacks of its own. These two child stacks allow you to determine whether the content in your slide will be animated into place when the slides change or not. You can use multiples of either within the Shift Item stack and can mix and match them.
The Animated Content child stack allows you to set a delay period before the animation occurs. This means you could stagger animations by using differing delay value for multiple Animated Content stacks.
Hide and show icons, labels and descriptions at different breakpoints to give a different look to your Shift slider at each responsive breakpoint.