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

Note: These asset downloads will soon be replaced by CDN-hosted assets that can be directly referenced with versions. This will allow Tableau-owned properties to reference and load in the necessary Javascript and CSS assets withouth the need to upload and manage the assets separately.

These instructions will be updated to reflect the new changes once ready. If you intend to use the below instructions, please contact Marketing Engineering first.

All assets including styles, javascript, and other files are packaged up in a 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 /build/.


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 vendor.js file, but keep jQuery and jQuery UI separate in case your system already includes them.

<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.min.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.

Encapsulated styles

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" />
  • If the components being used have a javascript component (such as global navigation), include the javascript files above as well.
  • In order to specify a region of the page that inherits style guide styles, wrap the region in a div with a tableau-styles class. Example:
    <div class="tableau-styles">
      <div class="global-nav">
        <!-- Global Nav Component markup here -->

Note: The 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 marketing-webteam@tableau.com.


See the project README for development guidelines for working with the style guide. If you don't have access, please request it from marketing-webteam@tableau.com.