Colors can be applied with helper classes by adding one of the following prefixes before the color name: text--, background--, or border--.
Note: border-- only adds the border-color. You'll still need to add the border-style and width separately.
Sass variables can also be used to apply colors directly to any property.
Fonts can be applied using either a helper class (font-- + font name) or using a variable on the font-family property. The body font is applied to all text and the header font is applied to all headers automatically.
Font size and line-height can also be set via helper class: font-size-- or line-height-- plus any number between 1 and 60.
In some Autobahn Page Designer components the text fields (e.g. Title, Primary Text, etc) have styles associated with them. These styles can be overridden by using the header or banner classes shown below in the associated class field. If you want to create a more customized look you can add 'custom' as a class and then utilize the above typography helper classes.
Header styles are automatically applied to all <h1> through <h6> tags. Additionally, you can add header styles using either a helper class or a mixin that passes the tag number as a parameter, e.g. @include header(1).
Banner styles can be added using either a helper class (b1-b4) or a mixin that passes the tag number as a parameter, e.g. @include banner(1).
Code Use Examples:
Code Use Examples:
Code Use Examples:
Code Use Examples:
Paragraph styles are automatically applied to all <p> tags. Small paragraph styles are applied to <small> tags, and large styles are applied to the .lead class. You can also use helper classes or mixins as shown below.
Unordered Lists
- Cookie biscuit jujubes pastry brownie liquorice sesame snaps sesame snaps. Fruitcake cheesecake chocolate jelly beans toffee sugar plum sweet.
- Icing wafer cotton candy dragée jelly. Donut caramels oat cake pudding chocolate cake brownie cheesecake dragée.
- Sesame snaps pie bonbon marzipan liquorice lemon drops.
- Candy sesame snaps jelly beans cheesecake.
- Dessert jelly-o soufflé sweet cotton candy chocolate bar liquorice toffee. Candy canes cotton candy sweet roll powder marshmallow cotton candy gummies.
- Cotton candy cotton candy apple pie cookie biscuit candy.
- Dragée fruitcake cheesecake oat cake toffee. Fruitcake icing bear claw. Macaroon jelly icing cotton candy.
Ordered Lists
- Cookie biscuit jujubes pastry brownie liquorice sesame snaps sesame snaps. Fruitcake cheesecake chocolate jelly beans toffee sugar plum sweet.
- Icing wafer cotton candy dragée jelly. Donut caramels oat cake pudding chocolate cake brownie cheesecake dragée.
- Sesame snaps pie bonbon marzipan liquorice lemon drops.
- Candy sesame snaps jelly beans cheesecake.
- Dessert jelly-o soufflé sweet cotton candy chocolate bar liquorice toffee. Candy canes cotton candy sweet roll powder marshmallow cotton candy gummies.
- Cotton candy cotton candy apple pie cookie biscuit candy.
- Dragée fruitcake cheesecake oat cake toffee. Fruitcake icing bear claw. Macaroon jelly icing cotton candy.
Text link styles are applied by default to any <a> tag that isn’t a button. You can also apply them to any other element by using a helper class (.text-link) or a mixin.
Add navigation text styles using either a helper class (.navigation-link) or a mixin, e.g. @include navigation-link.
Icons are managed in Icomoon. Instructions for editing/adding icons can be found in scss/utilities/_icons.scss in the rvw_autobahn_core cartridge.
Icons can be added using either the icon’s name as a helper class or by using a mixin. The mixin provides the additional options of placement, size, and color.
Store Type icons are stored in \static\default\images\icons and referenced in the AutoBahn Store Type Preferences Custom Preference.
If a store type doesn't have an icon defined, it falls back to the default value in the JSON. If both the store type and the default value are not defined the fallback is used.
The color value can be either a name or a hex value.
1
Current custom preference for store type preferences:
falseIn order to get form styles applied to labels, help text, and error messages, form elements should be wrapped in a div with a class of form-group.
This site is built using the Bootstrap Grid System. It can be configured by setting variables in scss/_variables.scss.
- $grid-breakpoints are used to define the viewport widths at which responsive changes will happen. There are five breakpoints available:
- Extra Small: xs ←
- Small: sm ←
- Medium: md ←
- Large: lg ←
- Extra Large: xl ←
- $container-max-widths can be used to prevent the .container divs from expanding to the full width of the breakpoints defined above.
Content can be shown or hidden by using either helper classes or the media-breakpoint mixin. Try resizing your browser to view the various configurations below:
Your browser is currently at the extra small breakpoint: xs
Your browser is currently at the small breakpoint: sm
Your browser is currently at the medium breakpoint: md
Your browser is currently at the large breakpoint: lg
Your browser is currently at the extra large breakpoint: xl
There are three column size variations: Mobile, Desktop, and Desktop XL. Gutter widths can be customized by updating the values in the $grid-gutter-widths array in scss/_variables.scss.
Alerts can be displayed either inline or in toast messages that appear at the top of the screen.
Toast message alerts can be displayed using either JavaScript or data attributes. They will disappear automatically after five seconds unless they're set to be dismissible.
To show a toast message using JavaScript, call the show method in the toast.js file and pass the type, message, and dismissible parameters.
Click here to view the toast message from this example.
The buttons below are using data attributes to show toast messages. Note the use of the data-dismissible attribute which, if set to true, prevents the message from disappearing and adds a close icon.
Click the buttons to trigger the toast messages.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Collapsible lists can be built using the card component and adding a class of collapsible-, followed by the breakpoint under which the collapsible behavior should be applied. For example, `collapsible-md` would be collapsible on mobile and table only. To make the card collapsible across all breakpoints, use a class of collapsible-xl.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
A modal can be created by adding modal markup (see below for the markup used in this example) to an .isml template and then triggering it by using data attributes on a button in that same .isml template. See full documentation here for more configuration options.
Modal sizes can be set via helper class or mixin (applied to the .modal-dialog div). Choose an option below and hit the button above to preview.
Be default, if there is too much content to fit on the screen, the entire modal will scroll. Adding the helper class below will cause only the modal's body to scroll.
The quick links bar is used as a wayfinding element. The links when clicked will either send the user to the url set in `data-link-to` or send the user to the appropriate section See full documentation here.
A drawer is a modified modal that appears on the right hand side of the page. Typically housing the mini cart and account navigation elements. A drawer modal can be created by adding modal markup (see below for the markup used in this example) to an .isml template and then triggering it by using data attributes on a button in that same .isml template. See full documentation here for more configuration options.
In situations where you need to add a button or display more elaborate content than will work in a tooltip, popovers are the way to go. Documentation can be found here. Like tooltips, popovers can be created using either data attributes or JavaScript.
Sliders are powered by Tiny Slider. They can be customized by adding helper classes and data attributes to the .slider-container div.
Sliders with thumbnails can be created by using two sliders with settings as follows. A couple requirements to note:
- The data-slider-thumbnail-container attribute needs to contain a selector that matches the thumbnail slider it corresponds with. (In this case, it's .slider-thumbnails.)
- The data-slider-items attributes on the thumbnail slider need to be set to the same number of items that are in the main slider (5, in this case).
Tabbed navigation is powered by the Bootstrap Navs component.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Urna nunc id cursus metus aliquam. Arcu bibendum at varius vel pharetra vel. Volutpat est velit egestas dui. Tristique senectus et netus et malesuada fames. Elit at imperdiet dui accumsan sit amet nulla facilisi morbi. Eros in cursus turpis massa tincidunt dui ut ornare. Tortor id aliquet lectus proin nibh nisl. Ullamcorper sit amet risus nullam eget felis eget nunc. Fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate sapien nec. Ut sem viverra aliquet eget sit amet tellus. Porttitor massa id neque aliquam vestibulum morbi blandit cursus. Enim blandit volutpat maecenas volutpat blandit aliquam etiam. Nisl rhoncus mattis rhoncus urna neque viverra justo nec.
Praesent tristique magna sit amet purus gravida quis. Odio facilisis mauris sit amet massa vitae. At elementum eu facilisis sed odio morbi quis commodo. Elementum integer enim neque volutpat. Tincidunt praesent semper feugiat nibh. Amet luctus venenatis lectus magna fringilla. Scelerisque viverra mauris in aliquam sem fringilla ut morbi. Lacus vel facilisis volutpat est. Amet volutpat consequat mauris nunc congue nisi vitae suscipit tellus. Aliquet risus feugiat in ante metus dictum at tempor. Et tortor consequat id porta nibh venenatis cras. Egestas congue quisque egestas diam. Iaculis at erat pellentesque adipiscing. Arcu bibendum at varius vel pharetra vel. Ipsum consequat nisl vel pretium lectus. Tempor orci dapibus ultrices in iaculis nunc sed augue. Pretium aenean pharetra magna ac placerat vestibulum lectus. Nulla pharetra diam sit amet nisl. Bibendum arcu vitae elementum curabitur. Metus dictum at tempor commodo ullamcorper a lacus.
Faucibus a pellentesque sit amet. Aliquet nec ullamcorper sit amet risus nullam. Dictum fusce ut placerat orci nulla pellentesque dignissim enim. Tempor orci dapibus ultrices in iaculis nunc. Tristique et egestas quis ipsum suspendisse ultrices gravida dictum. Convallis a cras semper auctor neque vitae tempus quam. Donec ultrices tincidunt arcu non sodales neque sodales ut etiam. Eu turpis egestas pretium aenean. Enim diam vulputate ut pharetra. Nullam ac tortor vitae purus faucibus ornare. Magnis dis parturient montes nascetur ridiculus. Posuere sollicitudin aliquam ultrices sagittis orci a scelerisque purus. Urna molestie at elementum eu.
Nunc faucibus molestie risus eu lobortis. Nam sit amet lectus posuere, venenatis nisl eu, imperdiet leo. Duis eget felis sapien. Pellentesque interdum convallis neque ac varius. Vivamus nulla nisl, semper eget aliquet eget, auctor ut velit. Duis in leo nisl. Vestibulum dignissim risus congue, cursus leo id, interdum nisl.
Quisque ac dignissim dolor. Praesent ut magna aliquet, aliquet justo quis, interdum mauris. Nunc convallis nulla et enim rhoncus, et bibendum magna molestie. Donec porta, magna nec iaculis dictum, lorem orci feugiat justo, vitae faucibus nulla augue id arcu. Vestibulum venenatis egestas est at mattis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Urna nunc id cursus metus aliquam. Arcu bibendum at varius vel pharetra vel. Volutpat est velit egestas dui. Tristique senectus et netus et malesuada fames. Elit at imperdiet dui accumsan sit amet nulla facilisi morbi. Eros in cursus turpis massa tincidunt dui ut ornare. Tortor id aliquet lectus proin nibh nisl. Ullamcorper sit amet risus nullam eget felis eget nunc. Fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate sapien nec. Ut sem viverra aliquet eget sit amet tellus. Porttitor massa id neque aliquam vestibulum morbi blandit cursus. Enim blandit volutpat maecenas volutpat blandit aliquam etiam. Nisl rhoncus mattis rhoncus urna neque viverra justo nec.
Praesent tristique magna sit amet purus gravida quis. Odio facilisis mauris sit amet massa vitae. At elementum eu facilisis sed odio morbi quis commodo. Elementum integer enim neque volutpat. Tincidunt praesent semper feugiat nibh. Amet luctus venenatis lectus magna fringilla. Scelerisque viverra mauris in aliquam sem fringilla ut morbi. Lacus vel facilisis volutpat est. Amet volutpat consequat mauris nunc congue nisi vitae suscipit tellus. Aliquet risus feugiat in ante metus dictum at tempor. Et tortor consequat id porta nibh venenatis cras. Egestas congue quisque egestas diam. Iaculis at erat pellentesque adipiscing. Arcu bibendum at varius vel pharetra vel. Ipsum consequat nisl vel pretium lectus. Tempor orci dapibus ultrices in iaculis nunc sed augue. Pretium aenean pharetra magna ac placerat vestibulum lectus. Nulla pharetra diam sit amet nisl. Bibendum arcu vitae elementum curabitur. Metus dictum at tempor commodo ullamcorper a lacus.
Faucibus a pellentesque sit amet. Aliquet nec ullamcorper sit amet risus nullam. Dictum fusce ut placerat orci nulla pellentesque dignissim enim. Tempor orci dapibus ultrices in iaculis nunc. Tristique et egestas quis ipsum suspendisse ultrices gravida dictum. Convallis a cras semper auctor neque vitae tempus quam. Donec ultrices tincidunt arcu non sodales neque sodales ut etiam. Eu turpis egestas pretium aenean. Enim diam vulputate ut pharetra. Nullam ac tortor vitae purus faucibus ornare. Magnis dis parturient montes nascetur ridiculus. Posuere sollicitudin aliquam ultrices sagittis orci a scelerisque purus. Urna molestie at elementum eu.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Urna nunc id cursus metus aliquam. Arcu bibendum at varius vel pharetra vel. Volutpat est velit egestas dui. Tristique senectus et netus et malesuada fames. Elit at imperdiet dui accumsan sit amet nulla facilisi morbi. Eros in cursus turpis massa tincidunt dui ut ornare. Tortor id aliquet lectus proin nibh nisl. Ullamcorper sit amet risus nullam eget felis eget nunc. Fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate sapien nec. Ut sem viverra aliquet eget sit amet tellus. Porttitor massa id neque aliquam vestibulum morbi blandit cursus. Enim blandit volutpat maecenas volutpat blandit aliquam etiam. Nisl rhoncus mattis rhoncus urna neque viverra justo nec.
Praesent tristique magna sit amet purus gravida quis. Odio facilisis mauris sit amet massa vitae. At elementum eu facilisis sed odio morbi quis commodo. Elementum integer enim neque volutpat. Tincidunt praesent semper feugiat nibh. Amet luctus venenatis lectus magna fringilla. Scelerisque viverra mauris in aliquam sem fringilla ut morbi. Lacus vel facilisis volutpat est. Amet volutpat consequat mauris nunc congue nisi vitae suscipit tellus. Aliquet risus feugiat in ante metus dictum at tempor. Et tortor consequat id porta nibh venenatis cras. Egestas congue quisque egestas diam. Iaculis at erat pellentesque adipiscing. Arcu bibendum at varius vel pharetra vel. Ipsum consequat nisl vel pretium lectus. Tempor orci dapibus ultrices in iaculis nunc sed augue. Pretium aenean pharetra magna ac placerat vestibulum lectus. Nulla pharetra diam sit amet nisl. Bibendum arcu vitae elementum curabitur. Metus dictum at tempor commodo ullamcorper a lacus.
Faucibus a pellentesque sit amet. Aliquet nec ullamcorper sit amet risus nullam. Dictum fusce ut placerat orci nulla pellentesque dignissim enim. Tempor orci dapibus ultrices in iaculis nunc. Tristique et egestas quis ipsum suspendisse ultrices gravida dictum. Convallis a cras semper auctor neque vitae tempus quam. Donec ultrices tincidunt arcu non sodales neque sodales ut etiam. Eu turpis egestas pretium aenean. Enim diam vulputate ut pharetra. Nullam ac tortor vitae purus faucibus ornare. Magnis dis parturient montes nascetur ridiculus. Posuere sollicitudin aliquam ultrices sagittis orci a scelerisque purus. Urna molestie at elementum eu.
The custom tooltips that come with SFRA have been replaced with Bootstrap Tooltips in order to provide more flexibility and better positioning. Full configuration options can be found here. You can create a new tooltip either with data attributes or via JavaScript.
Hover over the info icon to view the tooltip.
Hover over the info icon to view the dark tooltip.
The custom sizing extends what already exists in Bootstrap by allowing breakpoints to be added, giving it more flexibility for such applications as in page designer components. Original Bootstrap documentation can be found here.
The image width classes set an image's width to a percentage of their containing element.
Notes
- Class starts with `img-w`
- Values increment by 5 from 5-100
- Similar to Bootstrap classes breakpoint sizes can be added `img-w-<size>-50`
The image height classes set an image's width to a percentage of their containing element.
Notes
- Class starts with `img-h`
- Values increment by 5 from 5-100
- Similar to Bootstrap classes breakpoint sizes can be added `img-h-<size>-50`