This page covers the basic components available for HelpX content. This list is not exhaustive. When viewed in preview mode, this page also does not load with a table of contents on the left hand. The ToC takes up horizontal space which can affect the layout of pages on smaller screens or when the browser window has been resized.
HelpX has a collection of components that can be used to control how content is displayed on a page. For example, this text is part of a text component. Each component has differences in how it works.
For example, this second text component has a property that allows it to appear as a Note or Alert to help draw attention.
This component is used to caution users to inform them of potential pitfalls or issues.
An alert is used as the highest level of warning to users to help them avoid potentially destructive behavior.
Tips help users with a little extra guidance to help improve workflows or access some usually hidden functionality.
This is an example of a definition entry block. Note that the text of the first line is indented, while subsequent lines are not. Lorem ipsum This is an example of a definition entry block. Note that the text of the first line is indented, while subsequent lines are not.This is an example of a definition entry block. Note that the text of the first line is indented, while subsequent lines are not.
As far as text goes, we are limited to the following styles:
Pre
Small
Additionally, text can be bolded, italicized, or underlined. Superscript and subscript are also available.
To get around these limits, text could added in images, but this limits the opportunity for linking from text.
Images wider than the page size stretch to fit the width of the page - for example, the image above is 900x250, but it is automatically shrunk to fit.
Images smaller than the page width are not stretched, like the image below
As a result, we generally recommend that banners and images that are intended to stretch across the page are 800-1200 pixels wide.
Images always have top and bottom padding. It is not possible to remove the top/bottom padding from an image unless the HelpX team makes an engineering change, which we should not assume will happen.
Images can link to other web pages.
An option to enable click to expand is available for images. This option is turned on for the image below. The functionality does not work perfectly, as a small browser window will still limit how far the image is expanded.
HelpX supports most generally accepted image formats, although JPG is preferred to keep file sizes lower. PNG is supported, but since there is no way to have images overlapping each other, transparency is generally not a useful tool.
Video can be embedded from Youtube, Vimeo, Adobe TV, or directly from HelpX (although this last is not recommended). The video above is embedded from Adobe TV.
Video players are automatically sized to fit the width of the parent component. In the case above, the parent is the page.
Options are available to enable autoplay and disable audio.
Preferred: 1080p MP4
Resolutions as high as 4k are supported (3840x2160), but 1920x1080 is generally recommended.
MP4 is the preferred format.
Video duration is not limited.
The Flex container allows an author to control positioning of components by providing access to some of the functionality of divs/spans. Despite their name, Flex containers are not particularly flexible.
By default flex container content appears like this - with components appearing in individual columns.
Adding more components means more columns - 4 components, 4 columns.
Padding can be controlled at the container level, so padding affects all components in the container equally.
Position containers can also be used inside flex containers so that multiple components can be placed in a single column. The example below is taken from the current viewer home page.
Drag and drop 3D models into Photoshop (Beta) as Smart Objects.
Open and view 3D content in a user-friendly way. Integration with Photoshop (Beta) means you can open and view 3D content like CAD files or widely used formats, including USD, OBJ, FBX, and STL.
This is an accordion, commonly used for FAQ content.
All of the links below are examples of the button component using different styles.
The Before/After component allows a user to slide and compare between two similar images.
