Add attributes
Maizzle can automatically add attributes to HTML elements in your email templates.
This can be useful for:
- adding default attributes based on build Environment or Template
- not having to write required attributes all the time
- automating email accessibility
The attributes.add
key in your config defines which elements in your emails should receive which attributes with what values.
Usage
Here is how you would add a role="article"
attribute to a <div>
:
export default {
attributes: {
add: {
div: {
role: 'article',
},
},
}
}
Default attributes
By default, Maizzle makes any <table>
accessible, resets its spacing, and ensures that an empty alt=""
attribute is added to images that don't have it.
This is the default configuration:
let attributes = {
table: {
cellpadding: 0,
cellspacing: 0,
role: 'none',
},
img: {
alt: '',
}
}
Disabling
You may turn this off by setting extraAttributes
to false
in your config:
export default {
attributes: {
add: false,
}
}
Selectors
Tag, class, id, and attribute selectors are supported:
export default {
extraAttributes: {
div: {
id: 'new',
},
'.test': {
editable: true,
},
'#test': {
'data-foo': 'bar',
},
'[role]': {
'aria-roledescription': 'slide',
},
}
}
Multiple selectors
Add multiple attributes to multiple elements in one go:
export default {
attributes: {
add: {
'div, p': {
class: 'test',
},
'div[role=alert], section.alert': {
class: 'alert',
},
},
}
}
Tailwind CSS
Any Tailwind CSS classes that you add with this Transformer need to be added to your content
key, otherwise they will not be generated.
To do this, simply add the path to your config.js
file to the content
array:
export default {
content: ['./config.js'],
}
API
import { addAttributes } from '@maizzle/framework'
const options = {
div: {
role: 'article'
}
}
const html = await addAttributes('<div></div>', options)