Default Fragments Reference
Liferay provides a variety of fragments out-of-the-box, so you can start building your solution right away. To view available fragments, begin editing a content page or page template. While editing, open the Fragment and Widgets tab (
) in the editing sidebar menu.
Fragments are organized into the following sets:
Available configuration options vary by fragment and fragment sub-element. See Configuring Fragments for more information.
Layout Elements
For Liferay 7.3+
Layout Elements define drop zones for designing page and template layouts. By Default, Liferay includes two Layout Elements: Containers and Grids.
| Fragment | Description |
|---|---|
| Container (previously Panel) | Adds a configurable drop zone. |
| Grid (previously Row) | Adds multiple drop zone modules. These modules can be configured and arranged vertically or horizontally. |
Basic Components
These are simple design elements that add basic functionality to a page. Examples include buttons, headings, and tabs. With these Components, you can build your page piece by piece. DXP includes the following Basic Components.
| Fragment | Description |
|---|---|
| Button | Adds a link element with five available button types: Primary, Secondary, Link, Outline Primary, and Outline Secondary. |
| Card | Adds image, rich text, and link elements arranged as a display card. |
| Drop-down 7.4+ | Adds a simple text element and drop zone. You can drag-and-drop other fragments and widgets into the drop zone to create an advanced drop-down menu. |
| External Video 7.4+ | Embeds an external video in a page or template. Supported video sources include YouTube, Facebook, Twitch, Vimeo, and videos stored in Documents and Media. See Embedding Videos for more information. |
| Heading | Adds a simple text element that can be configured to use H1-H6 style. |
| HTML | Adds an editable HTML element. Double-clicking the element opens a modal window where you can edit its content using HTML syntax. |
| Image | Adds a configurable image element. When configuring, determine whether to use the image’s original size, or adjust it to fit its context. |
| Paragraph | Adds a rich text element. When editing, highlight the fragment’s text to access additional formatting options. |
| Separator | Adds a horizontal line between page elements. You can configure its spacing and color. |
| Slider | Adds multiple images with rich text overlay that are grouped into slides. Users can manually cycle through each slide. |
| Social | Adds image elements with Facebook, Twitter, and LinkedIn icons, which you can link to pages on each platform. |
| Spacer | Adds a horizontal blank space between fragments on a page. You can configure its height. |
| Tabs | Adds multiple tabs with simple text elements and individual drop zones for adding widgets and other fragments. |
| Video URL (previously Video Fragment) | Embeds a video from Youtube or Documents and Media in a page or template. You can set the video to autoplay, loop, or mute. You can also hide video controls from end users. See Embedding Videos for more information. |
Form Components
For Liferay 7.4 U45+/GA45+
Use Form Components fragments to build forms in content pages. These fragments only support custom objects. To access them, you must have at least one published object. See Using Fragments to Build Forms for more information.
| Fragment | Description |
|---|---|
| Form Container | Adds a container for building forms in content pages. Once added, you must map the container to a custom object. The container automatically generates form fragments for each field in the object. You can add or remove fragments from the container and set a custom success message for form submissions. You can only place other form components in a mapped form container. |
| CAPTCHA | Adds CAPTCHA confirmation to a form container. Once added, the form container requires human verification for submissions. |
| Checkbox | Adds a checkbox to the form container that you can map to boolean fields. |
| Date | Adds a field that you can map to custom date fields. |
| File Upload | Adds a file upload button that you can map to attachment fields. The mapped attachment field determines how files are uploaded. By default, this fragment displays supported file extensions. |
| Multiselect List | Adds a field that you can map to multiselect picklists. |
| Numeric Input | Adds a field that you can map to custom numeric fields (i.e., integer, long integer, decimal, and precision decimal). You can set a placeholder value and help text. |
| Rich Text | Adds a field that you can map to rich text fields. |
| Select from List | Adds a drop-down menu that you can map to custom picklist and relationship fields. If the mapped field includes more than 10 options, the drop-down menu also includes a search bar for querying options. |
| Submit Button | Adds a button for submitting the form entry. Every form container must include a submit button. |
| Text Input | Adds a field that you can map to text fields (i.e., text, long text). |
| Textarea | Adds a field that you can map to long text fields. |
| Tags | Adds a field to add tags from the current site or global site to object entries. |
| Categories | Adds a field to add categories from the current site or global site to object entries. |
Content Display
For Liferay 7.3+
Use Content Display fragments to display site content individually or as part of a Collection. You can also add page elements for rating or flagging page content. DXP includes the following Content Display fragments:
| Fragment | Description |
|---|---|
| Content Display | Displays a single content item from Documents and Media, Web Content, Blogs, or Categories. Available configuration options depend on the selected content type. |
| Content Flags | Adds an element for flagging a content item. |
| Content Ratings | Adds an element for rating a content item. |
| Collection Filter (Available 7.4+) | Adds an element for filtering a collection display using a vocabulary or category. |
| Applied Filters (Available 7.4+) | Adds an element for displaying and managing filters applied to a collection display. |
| Collection Display | Displays manually and dynamically defined collections, as well as collections defined by a collection provider. You can configure whether the collection is displayed in a grid, or with a list template (i.e., bordered, bulleted, inline, numbered, and unstyled). See Displaying Collections for more information. |
Cookie Banner
Available Liferay 7.4+
| Fragment | Description |
|---|---|
| Cookie Banner Simple | Adds rich text and link elements for accepting site cookies. |
Featured Content
Featured Content fragments are complex page elements composed of multiple components. To preview a fragment’s layout, switch to Card View ( 
) in the Fragment’s and Widgets panel. Liferay includes the following Featured Content fragments.
For Liferay DXP/Portal 7.3, you can preview layouts by hovering over each fragment’s Information icon (
).
Banners
Use Banner fragments to add text and link elements to a content page for creating CTA (Call to Action) banners. DXP includes the following layouts.
Features
Use the Features fragment to add text, images, and link elements to a content page for promoting key features. DXP includes the following layouts.
Highlights
Use the Highlights fragment to add image, text, and link elements to a content page for highlighting. DXP provides the following layouts.
Footers
Available Liferay 7.3+
Use Footer fragments to add a custom footer to master page templates. Each footer includes a navigation menu, sign-in link, image element, and copyright text. Liferay the following layouts for Footer fragments:
Navigation Bars
Available Liferay 7.3+
Use Navigation Bar fragments to add a custom header to master page templates. Each navigation bar includes a navigation menu, sign-in link, and image element for your logo. Liferay provides the following layouts for Navigation Bar fragments:
Menu Display
Available Liferay 7.4+
Using the Menu Display fragment, you can add menus to your content pages. Once deployed, you can select from any predefined Navigation Menu. To learn more about how to configure the Menu Display fragment for your site navigation, see Managing Site Navigation.