Inkcite 1.18.3


Responsive-ready anchor tags with built-in tagging and tracking

Inkcite’s built-in {a} helper streamlines working with links in your email by keeping your code DRY and tagging hrefs if desired.

Every link requires the id attribute. The first time you declare the ID, Inkcite remembers the corresponding href. Subsequent links that use the same ID will automatically inherit the original href. This keeps your email code DRY (don’t repeat yourself) and, if the link ever needs to be changed, you can change it in one spot and it updates everywhere.

Alternatively, you can define links in your project’s links.tsv file where the first field is the unique ID of the link and the second field (delimited by a tab) is the href. This givens you a central file to manage all of the links in this email project and further cleans up your email code - you only need to add {a id=...} in your code.

Link IDs and hrefs are shared with the {button} Helper.


By default, Inkcite will look for a #link color declaration in your helpers.tsv file. By defining this, you are setting the default color for all of the links in your email.

You can control the color of all links inside of a table cell by adding the #link attribute to the {td}. All links that are direct descendants of that table cell will default to the color you specified. This is helpful if you have a section of your email with an alternate background color that your default link color doesn’t display clearly against.

The {a} Helper also supports the full array of font-related attributes such as font or the individual attributes such as font-family and font-size allowing you to fully customize the appearance of any link.


Inkcite can be configured to automatically tag every link in your email with custom query data. This makes it easy to pull performance data from your website’s logs or analytics package. Link tagging is enabled in the config.yml file using the tag-links configuration field.

If defined, when Inkcite builds or previews your email, every href is automatically tagged with the query string you specified. If you’d like to track exactly which links are being clicked, include {id} somewhere in the tag-links declaration and during the build process, Inkcite will include the link’s ID in the string.

For example, if tag-links was declared as source=fall14_newsletter_{id} and the link had an ID of primary-cta, the resulting destination for that link would be


Example Inkcite markup:

 {a id="cta" href=""}ORDER NOW!{/a}
 {a id="cta"}ORDER TODAY!{/a}

An example of the resulting email HTML output:

 <a href="" style="color:#0099cc;text-decoration:none" target=_blank>ORDER NOW!</a>
<a href="" style="color:#0099cc;text-decoration:none" target=_blank>ORDER TODAY!</a>

Inkcite’s markup is 58% shorter than conventional HTML.


Attributes in bold are required.

Specifies the alignment of the text within this element. Set alignment to justify to enable justified text within this element.
The background gradient color for this element or none to disable an inherited gradient
Controls the position of the background gradient - accepts standard CSS background positions such as top left, bottom and center. The default depends on the shape of the gradient. radial gradients default to center whereas linear gradients default to the bottom.
Controls the shape of the background gradient - either liner or radial.
The background color for this element
Specifies a CSS border that appears on all sides of this element - e.g. 2px solid #445566. You can also the border for a specific direction on the element using a direction like border-top.
When a border is enabled for this element this attribute applies a radius to the border corners, in pixels.
The color for this link. If not specified, Inkcite will look to the parent td, table or default #link declaration in your project’s configuration file. You can also define the link color for a named font style by using the [name]-link declaration. When declared like this, all links within a contain with font=[name] will be colored consistently.
Specifies the color of the text on or inside this element. Colors specified in CSS shorthard (e.g. #345) will automatically expand to the full declaration (e.g. #334455) to maximize compatibility.
Specifies the CSS display attribute for this container.
Specifies the named font style corresponding to one or more values set in the helpers.tsv file describing the font.
Specifies one or more font familes for this element in the order they will be used per CSS standards.
Specifies the size of the font in pixels for text on or inside of this element.
Specifies the font weight for this element’s text either as a weight (e.g. 400) or simply as bold. Overrides the font weight attribute of the named font style if it is applied to this element.
This boolean attribute allows you to override Inkcite’s automatic link validation. This is useful when hrefs include ESP-specific characters that trigger Inkcite’s link validation errors.
If this is the first time this link ID is defined, and the ID is not already present in your links.tsv file, this href is required and becomes the destination of the link any time the corresponding ID is encountered on other links or buttons.
The unique identity to associate with this href and which will appear in the tagging code, if specified. Inkcite will look in links.tsv to see if this ID corresponds to a predefined href for convenience.
Specifies the spacing in pixels between the letters on this element. Overrides the letter spacing if a named font style is applied to this element.
Specifies the line height in pixels by default, or if units are provided (e.g. 1.5em) they will be converted to pixels to maximize compatibility. Overrides the line height of the named font style if it is applied to this element.
Specifies margin (in pixels) around this element. Supports directional margin (e.g. margin-left).
Specifies one of several built-in mobile Apply the “mobile” attribute or use the override if one was provided.
Specifies one of several built-in mobile Apply the “mobile” attribute or use the override if one was provided.
Specifies the border for this element when it appears on mobile devices. You may also specify side-specific border such as mobile-border-top.
Allows you to override the CSS display attribute for this element on mobile devices.
Allows you to override the CSS display attribute for this element on mobile devices.
This boolean attribute indicates that, when viewed on a mobile device, the contents of this container element should not wrap.
This boolean attribute indicates that, if nowrap is also present, when viewed on a mobile device the contents of this container element will wrap normally.
If this boolean attribute is present and link tagging is enabled for this project, this link will not be tagged. This is useful when the tagging interferes with behavior on dynamic pages.
This boolean attribute indicates text within the container element should not wrap.
Specifies the padding in pixels of the container element as either a single value applied to all sides (e.g. 10) or any of the standard CSS formats for directional padding (e.g. 10px 20px). Note! Outlook compatibility is not guaranteed if the latter format is used.
Enables text shadowing in the specified hex color. By default the shadow is offset directly below the text by one pixel.
When shadow is enabled, overrides the CSS blur default value in pixels.
When shadow is enabled, overrides the vertical CSS shadow offset, set in pixels.
Specifies the vertical alignment of content within the container - top, middle or bottom

Project Config

Set the default values for all {Links} Helpers by setting these attributes in helpers.tsv:


When set to true enables verbose MSO-specific styles enabling text shadows in certain versions of Microsoft Outlook (e.g. 2007-2016) whenever shadow is applied to an element.