Shift
Create elegant, animated, hero style sliders focused on delivering content to your visitors in a unique way.
- Set your slide height at each of the three breakpoints
- Choose which breakpoints to show, or hide, the navigation icon, label and descriptors
- Use the Typeface stack integration to customize your navigation labels
- Choose to have animated or non-animated content within your slides
- Customize the navigation item width at each breakpoint
- Opt for either drag-and-drop or remote images for your slide backgrounds.
- Style the slides and navigation to match your site design using color pickers and images
- Opt to have the slides auto advacne on their own at a set rate
- Choose from hundreds of icons for your navigation items
- Use Brand Preset colors for slide backgrounds
Example
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.
Using Shift
General
Dark Mode
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.
- Please Note: Features marked with the purple moon icon will include color picker(s) for Dark Mode when Dark Mode is enabled.
Slide Height
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.
Navigation Items
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.
Hide Icons
Choose to show or hide navigation item icons at each of the three breakpoints.
Hide Labels
Choose to show or hide navigation item labels at each of the three breakpoints.
Hide Descriptors
Choose to show or hide navigation item descriptors at each of the three breakpoints.
Navigation Styling
Bkg. Gradient
Use two color pickers to set the background gradient for the navigation bar that resides on top of the Shift stack slides.
Border Top
Choose whether or not to include a border on the top of the Shift navigation bar as well as set its color.
Label
Set the normal and active colors for the navigation item labels.
Descriptor
Set the normal and active colors for the navigation item descriptors.
Navigation Label Font
Font
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.
Animation
Auto Advance
When enabled the slider will automatically advance to the next slide, and then rotate back around to the first slide.
Pause Length
The amount of time the slider will pause on each Shift slide.
Shift Item
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.
General
Dark Mode
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.
Icon
Choose an icon for your slide’s navigation item. You can choose from hundreds of different icons.
Size
Choose a size for your navigation item’s icon.
Nav Name
Set the label for this slide’s navigation item.
Descriptor
Provide a small bit of text for this slide’s navigation item.
Inner Content
Type
Choose which type of Container you’d like it to be. You can choose from a Fixed-Width or Fluid container.
- Fixed-Width: Allows you to set a maximum width for your container. At the smaller breakpoints the Container stack automatically adjusts becoming a Fluid container to best fit mobile devices.
- Fluid: The Container remains flexible at all breakpoints, filling out the entire width of any space it is placed within.
Slide Styling
Background Type
You can choose from several different background types for your slide. Opt for one of the following:
- Brand Presets: Allows you to use one of the Foundry Brand Preset colors assigned in the main Control Center stack (Primary, Success, Info, etc.)
- Color Picker: Use a color picker to choose one solid color for your slide background.
- Color Picker (with Dark Mode): Use a color picker to choose one solid color for your slide background. You're also given a Dark Mode color picker as well.
- Gradient: Make use of two seperate color pickers to setup a two-color gradient for your slide background.
- Image: Use an image of your own as the slide background. The image will be sized to cover the background of the slide. This can include sizing the image up or down and cropping the image as the browser width changes.
- Remote Image: Supply a URL to an image of your own on your server to use as the slide background. The image will be sized to cover the background of the slide. This can include sizing the image up or down and cropping the image as the browser width changes.
Bakground
Background Overlay
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.
Navigation Styling
Indicator Color
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.
Icon
Use a set of color pickers to set the normal and active colors for each individual navigation item.
Child Stacks
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.
Customizable
Hide and show icons, labels and descriptions at different breakpoints to give a different look to your Shift slider at each responsive breakpoint.