Components
The components in anthem build out the screens in each task. Find the right component below and learn more about how it behaves, its configurable properties, and the best practices for using it.
Screen layout
Help Tooltips provide additional information about a specific UI element, opened by selecting the help icon beside the UI element. Help Tooltips are used in conjunction with other components and cannot be used on their own.
Horizontal Tabs are tabs that align horizontally and provide internal navigation options as a means to organize information within a single screen. After navigating to a given screen using the network composer and the side menu, Horizontal Tabs allow users to access key groups of screen-level information. .
Screen Headers provide the title of the screen and additional information about the screen.
Section Headers identify a section of the screen, adding structure to screens with varied content.
Toolbars provide a row of actions aligned horizontally with the Screen Header, such as toggles that switch between dashboard and table views.
Vertical Tabs are tabs that align vertically on the left side of another component and provide internal navigation options as a means to organize information within a single screen. After navigating to a given screen using the network composer and the side menu, Vertical Tabs allow users to change the view of the information in the content area to the right of the tabs.
Cards and data display
Action Cards display limited information about an object in the system (e.g. user, process), including an optional count of how many instances of that object exist. This card also allows users to take an action on the object without going to another screen (e.g. deleting or duplicating an instance of an object).
Formatted Content displays read-only information as plain text, formatted text, or a user avatar. Formatted Content is used to display a wide range of read-only content, from static links to related content to user avatars that link to full user profiles.
IFrame displays embedded content from a specified external source (e.g. Google Maps) in a screen.
Information List provides a list of read-only data from the system that users can scan quickly, such as might be used to display a list of users and their contact information.
List View provides a list of objects in the system (e.g. filming locations) that users can quickly browse through and take action on.
Number Cards display a quantity of objects in the system (e.g. number of views of a trailer), retrieved from a query.
Screen Breadcrumb displays a list (or breadcrumb trail) of one or more sequential screens. It acts a secondary navigational aid to orient users where they are in an experience task.
Summary Cards display a summary of specific data in the system and can expand to show additional information.
The Summary Card Carousel is a row of Summary Cards that scroll horizontally to display more cards while taking up less space on the screen. All of the cards in the carousel display information from the same query.
Table View provides a table that displays one object in the system per row, automatically paginating if the number of objects exceeds available space. All of the table rows display objects from the same query, and each row is expandable to display more information. Users can search the objects in the table and take actions on these objects.
Text Cards display only static text that is not connected to an object in the system (i.e. it does not react to object changes). The Text Card can be used anywhere static content is required, such as providing basic informational content.
Charts
Bar Charts display a single series of data represented by horizontal bars. The data represented can also be categorized by color to represent relationships between similar data values.
Butterfly Charts provide a comparison between two series of data from the same source using bi-directional horizontal bars, though the series on either side of the chart do not typically oppose each other. The data represented can also be categorized by color to represent relationships between similar data values.
Summary Charts present a generally small set of simple data in a bar chart or table, prioritizing scannability over detail and providing a high-level view of a given data set.
Timeline Charts display a series of data over a specific period of time using vertical bars. The data represented can also be categorized by color to represent relationships between similar data values.
Search
Facets are chips that provide a quick way for users to filter and refine search results, allowing them to better understand large sets of data.
Filter Panels allow users to filter the data on the screen by specific attributes for the type of data displayed on the screen.
Forms and fields
Action Forms allow users to add new objects, edit information about objects, or view information about objects (e.g. a list of users). This component is useful for creating forms with a large number of fields.
Buttons allow users to take an action on a screen, panel, or dialog. There are three versions of buttons (primary, secondary, and tertiary) that correspond to an action's relative importance on a given screen.
Form - Add is a form that includes one to many fields where a user can define attributes of a single object and add that object to the system.
Object Typeaheads provide a field that predicts a user's text entry as they type by querying all objects of a defined type in the system, providing suggestions for likely entries in real time.
Progress Indicators show users which step of a multi-step process they are currently viewing.
Workflow Transitions are dropdown fields that give users the opportunity to change the workflow state of a particular object in the system (e.g. transitioning a film from production to post-production).
