Skip to content

Instantly share code, notes, and snippets.

@alexkilgour
Last active May 24, 2018 13:57
Show Gist options
  • Save alexkilgour/73ad7ddcd86d7d2a2fb68aa6a8d886ef to your computer and use it in GitHub Desktop.
Save alexkilgour/73ad7ddcd86d7d2a2fb68aa6a8d886ef to your computer and use it in GitHub Desktop.
Dynamic shared component templates with handlebars

Create a template that includes handlebars expressions that all the addition of classes

<!-- button.hbs -->
<a id="{{id}}" data-component="{{jsHook}}" class="c-button {{utilityClasses}} {{extensionClasses}}">
  {{text}}
</a>

You can then extend the component within your app by either adding a utility class, or by extending the component with a modifier

{{> button utilityClasses="u-pinLeft"}}

{{> button extensionClasses="c-button--my-app"}}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment