Below we've created a fixed- height Slipstream content area that houses a lot of content in a small footprint, but gives our visitors easy access to that content with the Slipstream navigation buttons.
Lorem ipsum dolor sit amet,consectetur adipiscin elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco commodo consequat. Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Excepteur sint occaecat non proident, sunt officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet,consectetur adipiscin elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco commodo consequat. Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Excepteur sint occaecat non proident, sunt officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet,consectetur adipiscin elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco commodo consequat. Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Excepteur sint occaecat non proident, sunt officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet,consectetur adipiscin elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco commodo consequat. Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Excepteur sint occaecat non proident, sunt officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet,consectetur adipiscin elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco commodo consequat. Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Excepteur sint occaecat non proident, sunt officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet,consectetur adipiscin elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet,consectetur adipiscin elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco commodo consequat. Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Excepteur sint occaecat non proident, sunt officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet,consectetur adipiscin elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco commodo consequat. Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Excepteur sint occaecat non proident, sunt officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet,consectetur adipiscin elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco commodo consequat. Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Excepteur sint occaecat non proident, sunt officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet,consectetur adipiscin elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet,consectetur adipiscin elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco commodo consequat. Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Excepteur sint occaecat non proident, sunt officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet,consectetur adipiscin elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco commodo consequat. Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Excepteur sint occaecat non proident, sunt officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet,consectetur adipiscin elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco commodo consequat. Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Excepteur sint occaecat non proident, sunt officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet,consectetur adipiscin elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco commodo consequat. Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Excepteur sint occaecat non proident, sunt officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet,consectetur adipiscin elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco commodo consequat. Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Excepteur sint occaecat non proident, sunt officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet,consectetur adipiscin elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco commodo consequat. Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Excepteur sint occaecat non proident, sunt officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet,consectetur adipiscin elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco commodo consequat. Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Excepteur sint occaecat non proident, sunt officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet,consectetur adipiscin elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet,consectetur adipiscin elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco commodo consequat. Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Excepteur sint occaecat non proident, sunt officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet,consectetur adipiscin elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco commodo consequat. Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Excepteur sint occaecat non proident, sunt officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet,consectetur adipiscin elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco commodo consequat. Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Excepteur sint occaecat non proident, sunt officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet,consectetur adipiscin elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet,consectetur adipiscin elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco commodo consequat. Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Excepteur sint occaecat non proident, sunt officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet,consectetur adipiscin elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco commodo consequat. Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Excepteur sint occaecat non proident, sunt officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet,consectetur adipiscin elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco commodo consequat. Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Excepteur sint occaecat non proident, sunt officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet,consectetur adipiscin elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet,consectetur adipiscin elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco commodo consequat. Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Excepteur sint occaecat non proident, sunt officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet,consectetur adipiscin elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco commodo consequat. Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Excepteur sint occaecat non proident, sunt officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet,consectetur adipiscin elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco commodo consequat. Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Excepteur sint occaecat non proident, sunt officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet,consectetur adipiscin elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco commodo consequat. Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Excepteur sint occaecat non proident, sunt officia deserunt mollit anim id est laborum.
The preferred locations for most layouts will be one of the two sides. The top location does not make use of the Sticky positioning like the left and right locations do. This is because the content area below the navigation items, when using the top location, pushes that navigation out of the way.
Allows you to add a custom label to the top title bar of the tool. This lets you quickly identify what purpose you're using that tool for in your layout. This title is also visible when you've collapsed or hidden the contents of the tool in Edit Mode.
Allows you to choose where, in relation to your Slipstream content, that your navigation items will be placed. The recommened placement is on either the left or right side. Top placement has more limited usability than the side positions.
Here we choose how much horizontal space our navigational items will take up. We measure this in generic units. The full width of the available area is 12 units, much like with the Columns / Grid tool. We have up to 6 units available to us for our navigation items. The default is 4 units. We recommend 3-4 units for your navigation in most cases.
You can set this uniformly for all breakpoints, or click the small plus button to set a different width at each of the breakpoints.
The navigation width sets itself to 12 units and places itself above the content area section automatically at the Extra Small breakpoint for compatibility on small mobile devices.
Allows you to align the text within the navigation buttons. You can align the text to the left, center or right. You can do so uniformly across all responsive breakpoints or you can click the small plus button to adjust the alignment independently at each of the breakpoints.
Slipstream's navigation items use a semi-sticky style navigation. It will stick to the top of the available area when the page scrolls, until the bottom of the Slipstream parent container reaches the top of the page. The Top Offset setting allows you to set an offset from the top of the page to keep the navigation items in a more comfortable viewing area for the visitor.
Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the background of normal items. You're also provided an option to choose a custom one-off color as well.
Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the border of normal items. You're also provided an option to choose a custom one-off color as well.
This color picker allows you to choose the color of the text for the normal items.
Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the background of items when it is the active item or hovered over. You're also provided an option to choose a custom one-off color as well.
This color picker allows you to choose the color of the text when it is the active item or hovered over.
When enabled this setting will set the border color for the active item automatically, matching it to the active background color you've chosen above.
Enabling this feature removes the outer borders and rounded corners to render list group items edge-to-edge in its parent container.
When enabled this feature will set the font weight of the active navigation item to 700 (bold).
This setting adds a decorative arrow pointer to the side of the active navigation item. It is added to the aide of the item closest to the content area of Slipstream.
No pointer is added to the navigation active item if the Location of the navigation items is set to Top.
Here you can choose from the various different Foundry gutter presets. You can change the spacing between columns in both the horizontal and vertical direction, or disable it al together. You'll set one gutter preset spacing and Slipstream will apply it to both the horizontal and vertical value.
Here you'll decide the style of Slipstream content you want to use for your page design. Fixed Height mode is likely to be the most popular, so it is the default choice for a new Slipstream tool.
This allows you to set a specific height for the content section of the tool. You do so at each of the individual 6 responsive breakpoints. You can also choose from various units of meausre for the height as well. The recommended, and default option, is View Height (vh).
When using Fixed Height mode the content inside of the content area of the tool will scroll in place. This allows you the opportunity to include a lot of content on the page in a small package.
When disabled your content will take up its full space on the page and the navigation, when on the left or right, will be locked in place as that content scrolls up the page.
Choose from one of Foundry preset padding options to add a bit of internal spacing around the content within the Content Area of Slipstream.
Foundry provides 5 different presets for rounded corners. These can be found throughout Foundry's various tools. You're also able to remove the roundness of the corners by setting this to none, or provide your own custom value for the border radius, or rounded corners. When using Custom mode you can set a different value on each of the four corners.
Allows you to apply a preset border with to the content area of the Slipstream tool. This is on by default to show the visitor the area that the content within Slipstream will occupy. This is especially helpful to users when using the Fixed Height mode.
Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the background of normal items. You're also provided an option to choose a custom one-off color as well.
Allows you to specify an options class, or classes, that will be added to this tool's wrapper. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.