No JS Component

Include this snippet directly in your <head> along with adding class .vf-no-js to your <html> (<html class="vf-no-js">).

If JS is enabled in a user's browser, .vf-no-js will be swapped to .vf-js.

This method allows using CSS to conditionally show content.

.vf-no-js .js-is-not-on {
  /* SHOW block that says you need js to use this site */
}
.vf-js .js-is-not-on {
  /* HIDE block that says you need js to use this site */
}

File system location: components/vf-no-js

Variants

Variant: Default live element

Nunjucks demo

{% render '@vf-no-js--default', {
  "component-type": "element"
} %}

Sample output

Sample output as HTML

<script>
  // Detect if JS is on and swap vf-no-js for vf-js on the html element
  (function(H) {
    H.className = H.className.replace(/\bvf-no-js\b/, 'vf-js')
  })(document.documentElement);
</script>

Assets

All components in this design system

This page is part of the components section.