{{!-- Start container for table of contents --}} {{!-- End container for table of contents --}} {{!-- Start container for docs --}}

{{#heading 2}}Sass Reference{{/heading}} {{#if sass.variable}}

{{#heading 3 'sass-variables'}}Variables{{/heading}}

The default styles of this component can be customized using these Sass variables in your project's settings file.

Name	Type	Default Value	Description
`${{this.context.name}}`	{{sassTypes this.type}}	`{{sassValue this.context.value}}`	{{md this.description}}

{{#heading 3 'sass-mixins'}}Mixins{{/heading}}

We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.

Added in {{this.since.0.version}}

Deprecated in {{this.deprecated}}

{{writeMixin this}}

Parameter	Type	Default Value	Description
`${{this.name}}`	{{sassTypes this.type}}	`{{sassValue this.default}}`	{{md this.description}}

{{#heading 3 'sass-functions'}}Functions{{/heading}} {{#each sass.function}}

Added in {{this.since.0.version}}

Deprecated in {{this.deprecated.version}}

{{writeFunction this}}

Parameter	Type	Default Value	Description
`${{this.name}}`	{{sassTypes this.type}}	`{{sassValue this.default}}`	{{md this.description}}

{{#heading 2}}JavaScript Reference{{/heading}} {{#each js.class}}

{{#heading 3 'js-class'}}Foundation.{{this.name}}{{/heading}} {{md this.description}}

var elem = new Foundation.{{this.name}}(element, options);

Fires these events: {{#each this.fires}} {{this}} {{/each}}

Name	Type	Description
`{{this.name}}`	{{this.type.names.[0]}}	{{this.description}}

{{#heading 3 'js-options'}}Plugin Options{{/heading}}

Use these options to customize an instance of {{title}}. Plugin options can be set as individual data attributes, one combined data-options attribute, or as an object passed to the plugin's constructor. Learn more about how JavaScript plugins are initialized.

Name	Description	Example
{{this.name}}	{{this.description}}	`Sample!`

{{#heading 3 'js-events'}}Events{{/heading}}

These events will fire from any element with a {{title}} plugin attached.

Name	Description
{{this.name}}.zf.{{../title}}	{{this.description}}

{{#heading 3 'js-functions'}}Functions{{/heading}} {{#each js.function}}

{{#heading 4 'js-class'}}{{../../js.class.0.name}}.{{this.name}}{{/heading}} {{md this.description}} {{#if this.fires}}

Fires these events: {{#each this.fires}} {{this}} {{/each}}

Name	Type	Description
`{{this.name}}`	{{this.type.names.[0]}}	{{this.description}}

{{#heading 2 'building-blocks'}}Building Blocks using {{title}}{{/heading}}

Building Blocks is a ZURB-curated resource with useful code snippets that use Foundation components. Here are a few for this component:

{{ title }}