Components

Template Card Attachment

Attachment template cards are best used to show a file has been or will be added to a record.

Overview

  • Available since: Orlando
  • A11Y: Not compliant

This component is available for you to include in JavaScript code when creating custom components. It’s not included in UI Builder. This is a pre-configured composition of card element components as one component unit.

Attachment template card is a pre-configured card component that represents an uploaded file.

ServiceNow link
Template Card Attachment code documentation

UIB and developer guidance

Figma link
Template Card Attachment Figma component

Horizon components and styles library

Loading playground

When to use

Use attachment template cards to show that a file has been added to a particular workflow.

When not to use

Don’t use attachment template card if your attachment does not represent a file type. The attachment template card is a predefined set of assembled card subcomponents with set styles. If the default configuration doesn't meet your needs, build a custom card using the card component and its subcomponents.

Anatomy

  1. Identifier (optional): An icon or image that visually represents the attachment
  2. Heading label: Text that describes the attachment
  3. Metadata slot (optional): Container for metadata such as a badge, highlighted-value, or string. Displayed after the heading and before the actions.
  4. Action (optional): Actions related to the attachment that appear in the dropdown menu
  5. Caption: A customizable text label that provides context for the attachment (like file size)

Usage

Use template card attachments to show that a file either is or can be added to a record.

Template Card Attachment

Configurations

The template card attachment is a predefined set of assembled card subcomponents with set styles. If the default configuration doesn't meet your needs, you can build a custom card using the card component and its subcomponents.

See usage guidance for card

Design recommendations

Learn how to apply template card attachment in your design.

Template Card Attachment Usage Do
Do

Display single actions on the card itself, but use the overflow menu for multiple actions. If you have a single action, build a custom attachment card.

Template Card Attachment Usage Don't
Don’t

Don't place a single action in the dropdown menu.

UI text guidelines

These are some recommendations for using text within template card attachment:

  • Keep the heading label and caption short so that they fit in the allotted space and so that people can scan them

 

Behavior

Learn how template card attachment behaves when the display changes or a user interacts with the component.

Interactions

Template card attachment contains the same interactions as card: none, click, or select. By default the interaction for template card attachment is set to none. For more details on interaction types,

See usage guidance for card

Truncation

If the heading label or caption extends beyond the container width, the text truncates with an ellipsis and a tooltip displays the full text.

Usability

Template card attachment complies with all internationalization and accessibility requirements.

Internationalization

When the display translates to a right-to-left (RTL) language, the labels and values display from right-to-left and align on the right, and any actions will appear on the left.

Template Card Attachment Usability Internationalization

Accessibility

Learn how to access the actionable elements of template card attachment through keyboard interactions and screen readers.

Keyboard interactions

  • Tab: Shifts focus to the template card attachment; if the template card attachment is in focus, it shifts the focus to the action area
  • Enter or Space: If the focus is on the action area, it opens that menu; if the focus is on an action, it launches that action

Screen readers

Header tags create structure for your content and provide screen readers with in-page navigation. For template card attachment, remember to assign a header tag to the heading label. This helps define the component's location and importance in your display.