Welcome to the the Tableau Style Guide! This style guide is a curated collection of components used to build websites and pages with the Tableau corporate brand. Explore the style guide with the navigation on the left to find working examples of components as well as any variations (modifiers) and markup examples.
Please note that this is a living style guide which automatically reflects the latest updates and additions. Components will occasionally be updated, added, and possibly even removed.
Download the Assets
ZIP file. The ZIP will decompress into a
build folder. If you rename this when
adding it to your environment, make sure to update all paths below to be
relative to the renamed folder rather than
Include CSS in <head>
<link rel="stylesheet" href="/build/vendor/slick.js/slick/slick.css" media="all" /> <link rel="stylesheet" href="/build/css/style.min.css" media="all" />
Other Requirements in <head>
<meta charset="UTF-8"> <!-- Ensures proper page width and zoom level on mobile devices --> <meta name="viewport" content="width=device-width, initial-scale=1" /> <!-- Tableau Sparkle favicon --> <link rel="icon" href="/build/images/favicon.ico" type="image/x-icon" />
Scripts at Bottom of HTML
We concatenate most of our third-party plugins and scripts into a
file, but keep jQuery and jQuery UI separate in case your system already
<script src="build/vendor/jquery/dist/jquery.min.js"></script> <script src="build/vendor/jquery-ui/jquery-ui.min.js"></script> <script src="build/js/vendor.js"></script> <script src="build/js/scripts.js"></script>
Once all the assets above are included on the page/site, all of the components described in this style guide should work out of the box. If you're working with static markup on a page, it's as simple as copying the markup example from the style guide and updating with your content. To get a basic page layout going, check out the Basic Page Layout component.
Applying styles to an existing system takes a bit more work, however. Essentially classes and DOM will need to be modified in any generated markup so that they match the structure and classes of the component in the style guide.
Alternatively, if the system being integrated doesn't easily allow for inserting classes where needed or doesn't allow for manipulation of HTML output, there's some more involved options that involve customizing the component library. For more information on this, see the Development section below and the linked development documentation.
If, for some reason, the style guide styles interfere with existing base styles
on the platform the style guide is being integrated on and only certain regions
of the page use components from the style guide, the included
styles.encapsulated.css can be used. This will allow you to specify particular
regions of the site such as the global navigation area where style guide styles
are applied rather than including the styles globally on the site.
We strongly encourage integrating the full style guide as described above in order to guarantee more consistency between platforms. This encapsulated version should only be used when absolutely required in order not to break existing styles that are still necessary.
- Include the encapsulated stylesheet rather than the base style.css
<link rel="stylesheet" href="/build/css/style.encapsulated.min.css" media="all" />
- In order to specify a region of the page that inherits style guide styles,
wrap the region in a div with a
<div class="tableau-styles"> <div class="global-nav"> <!-- Global Nav Component markup here --> </div> </div>
tableau-styles wrapper must be a wrapper around any components
rather than a class added to a component itself.
Release Notes & Bug Reports
When we release new features, bug fixes, or any other changes to this project, we provide notes detailing all changes made. Use these to inform your testing as you update to the latest version. Release notes live in the [Release Notes] (https://github.com/tableau-mkt/components/releases) section on GitHub.
All bug reports, feature requests, and issue tracking are handled through the Issue Queue on GitHub. Please feel free to submit anything you find to the issue queue; we will monitor and provide fixes where needed.
If you don't have access to the GitHub repo yet, request it from email@example.com.