The Price List component provides website owners with an attractive way to display their services or products, along with their associated costs. Common use cases for this component include restaurant menus, spa packages at wellness centres, or other service offerings.
This component offers a variety of configuration options, divided into the following categories:
| Settings |
This section contains general settings common across all components within the system:
- Hide on Mobile/Tablet/Desktop: Pick whether to hide, or show this component independently on mobile, tablet, and desktop resolutions via a set of three checkboxes.
- Desktop/Mobile Padding: Adjust the top and bottom padding for both desktop and mobile views.
- Section Background Colour: Choose a background colour from a pre-configured list of brand colours.
- Section Width: Set the width of the component.
|
| Animation |
Administrators can select from seven different entrance animation options for the component:
- None
- Slide in from the top
- Slide in from the bottom
- Slide in from the left
- Slide in from the right
- Fade in
- Grow in
|
| Pod Styling |
This section allows administrators to customise the appearance of each pod (menu or service item):
- Title and Content Alignment: Control the alignment of the component’s title and content sections (left, right, or centre aligned).
- Title Colour: Set the text colour for the component’s main title. Option values are based on a pre-configured list of brand colours.
- Title Style: Select the heading size for the title, with options ranging from Heading 1 to Small Paragraph.
- Text Colour: Choose the content paragraph’s text colour. Option values are based on a pre-configured list of brand colours.
- Menu Item Title Colour: Set the text colour for each menu item’s title. Option values are based on a pre-configured list of brand colours.
- Menu Item Title Style: Select the heading size for each menu item title, with options ranging from Heading 1 to Small Paragraph.
- Menu Item Subtitle Colour: Choose the text colour for any subtitles under each menu item. Option values are based on a pre-configured list of brand colours.
- Menu Item Price Colour: Set the text colour for each menu item’s price. Option values are based on a pre-configured list of brand colours.
- Menu Item Underline Colour: Determine the colour of the dotted underline beneath each menu item, creating a visual separator. Option values are based on a pre-configured list of brand colours.
|
| Content |
This section controls the content displayed within the component:
- Title: Add the component’s main title using this text input field.
- Content: Add supporting content with rich formatting options such as bold, italics, links, bullet points, numbered lists, and inline text colour changes.
- Line Items: A repeater field within which, any number of ‘line item’ rows may be added. Within each row, administrators may set a title, optional subtitle, and optional price.
|
You can view examples of the Price List component in various styles and with different entry animations here.
