name: JL Pricing Table
description: Pricing Tables allows you to display not just the cost, but also the features you wish to portray.
type: particle
icon: fa-money
form:
  overrideable: false
  fields:
    enabled:
      type: input.checkbox
      label: Enabled
      description: Globally enable to the particles.
      default: true
    _tabs:
      type: container.tabs
      fields:
        _tab_content:
          label: Content
          fields:
            items:
              overridable: false
              type: collection.list
              array: true
              label: Items
              description: Create each item to appear in the content row.
              value: name
              ajax: true
              fields:
                .title:
                  type: input.text
                  label: Title
                  description: Customize the Title.
                  placeholder: Basic
                .meta:
                  type: input.text
                  label: Meta
                  description: Customize the description for title (optional).
                  placeholder: Free trial 30 days.
                .price:
                  type: input.number
                  label: Price
                  description: Customize the price.
                  placeholder: 50
                  min: 0
                .price_symbol:
                  type: input.text
                  label: Symbol
                  description: Customize the price symbol.
                  placeholder: $
                .subtitle:
                  type: textarea.textarea
                  label: Description
                  description: Customize the description for price (optional).
                  placeholder: Billed Yearly
                .details:
                  type: collection.list
                  array: true
                  label: List Features
                  description: Create the feature list for pricing table you wish to portray.
                  value: title
                  ajax: true
                  fields:
                    .icon:
                      type: input.icon
                      label: Icon
                      description: Pick an optional icon.
                    .text:
                      type: input.text
                      label: Feature Title
                      description: Create the feature title for your pricing.
                      placeholder: Core Values
                .featured_text:
                  type: input.text
                  label: Featured Text
                  description: Enter the Featured label for the table.
                  placeholder: Popular
                .buttonlink:
                  type: input.text
                  label: Link
                  description: Specify the link for button.
                  placeholder: http://
                .buttontext:
                  type: input.text
                  label: Link Text
                  description: Enter the text for the link.
                  placeholder: Purchase Now
                .buttontarget:
                  type: select.selectize
                  label: Target
                  description: Open the link in a same or new window.
                  placeholder: 'Select...'
                  default: _self
                  options:
                      _self: Self
                      _blank: New Window
                .buttonclass:
                  type: select.select
                  label: Button Style
                  description: Set the button style.
                  default: default
                  options:
                      default: Button Default
                      primary: Button Primary
                      secondary: Button Secondary
                      danger: Button Danger
                      text: Button Text
                      link: Link
                      link-muted: Link Muted
                      link-text: Link Text
                .background_settings:
                  type: separator.note
                  class: alert alert-info
                  content: 'Head Background'
                .bgimage:
                  type: input.imagepicker
                  label: Background Image
                  description: An image field with an image picker.
                  placeholder: Upload a background image.
                .bgcolor:
                  type: input.colorpicker
                  label: Background Color
                  description: Select the background color.
                .background_size:
                  type: select.select
                  label: Background Size
                  description: Determine whether the image will fit the section dimensions by clipping it or by filling the empty areas with the background color.
                  default: cover
                  options:
                    auto: Auto
                    cover: Cover
                    contain: Contain
                .background_position:
                  type: select.select
                  label: Background Position
                  description: Set the initial background position, relative to the section layer.
                  default: center-center
                  options:
                    top-left: Top Left
                    top-center: Top Center
                    top-right: Top Right
                    center-left: Center Left
                    center-center: Center Center
                    center-right: Center Right
                    bottom-left: Bottom Left
                    bottom-center: Bottom Center
                    bottom-right: Bottom Right
                .background_blendmode:
                  type: select.select
                  label: Blend Mode
                  description: Determine how the image will blend with the background color.
                  default: inherit
                  options:
                      inherit: Normal
                      multiply: Multiply
                      screen: Screen
                      overlay: Overlay
                      darken: Darken
                      lighten: Lighten
                      color-dodge: Color-dodge
                      color-burn: Color-burn
                      hard-light: Hard-light
                      soft-light: Soft-light
                      difference: Difference
                      exclusion: Exclusion
                      hue: Hue
                      saturation: Saturation
                      color: Color
                      luminosity: Luminosity
                .inverse:
                  type: select.select
                  label: Inverse Color
                  description: Inverse the color for light or dark backgrounds.
                  default: default
                  options:
                    default: None
                    light: Light
                    dark: Dark
                .body_note:
                  type: separator.note
                  class: alert alert-info
                  content: 'Body Background'
                .body_color:
                  type: input.colorpicker
                  label: Background Color
                  description: Select the body background color.
                .body_inverse:
                  type: select.select
                  label: Inverse Color
                  description: Inverse the color for light or dark for body backgrounds.
                  default: default
                  options:
                    default: None
                    light: Light
                    dark: Dark
                .item_class:
                  type: input.selectize
                  label: CSS Classes
                  description: Specify the CSS class name for item.                      
            layout_settings:
              type: separator.note
              class: alert alert-info
              content: 'Layout'
            grid_type:
              type: select.select
              label: Content Layout
              description: Present the content with slider mode or grid mode.
              default: grid
              options:
                slider: Slider
                grid: Grid
            grid_info:
              type: separator.note
              class: alert alert-info
              content: 'Grid Settings: Depends on the Content Style Grid is selected'
            grid_masonry:
              type: input.checkbox
              label: Enable Masonry
              description: The masonry effect creates a layout free of gaps even if grid cells have different heights.
              default: false
            grid_parallax:
              type: input.number
              label: Parallax
              description: The parallax effect moves single grid columns at different speeds while scrolling. Define the vertical parallax offset in pixels.
              min: 0
              max: 600
              placeholder: 300
            grid_column_gap:
              type: select.select
              label: Column Gap
              description: Set the size of the gap between the grid columns.
              default: default
              options:
                small: Small
                medium: Medium
                default: Default
                large: Large
                collapse: None  
            grid_row_gap:
              type: select.select
              label: Row Gap
              description: Set the size of the gap between the grid rows.
              default: default
              options:
                small: Small
                medium: Medium
                default: Default
                large: Large
                collapse: None
            center_columns:
              type: input.checkbox
              label: Center columns
              default: false
            center_rows:
              type: input.checkbox
              label: Center rows
              default: false
            grid_divider:
              type: input.checkbox
              label: Dividers
              description: Display dividers between grid cells
              default: false
            column_settings:
              type: separator.note
              class: alert alert-info
              content: 'Column Settings for Grid or Slider Layout'
            phone_portrait:
              type: select.select
              label: Phone Portrait
              description: Set the number of grid columns for each breakpoint. Inherit refers to the number of columns on the next smaller screen size.
              default: 1
              options:
                1: 1 Column
                2: 2 Columns
                3: 3 Columns
                4: 4 Columns
                5: 5 Columns
                6: 6 Columns
            phone_landscape:
              type: select.select
              label: Phone Landscape
              description: Set the number of grid columns for each breakpoint. Inherit refers to the number of columns on the next smaller screen size.
              default: inherit
              options:
                inherit: Inherit
                1: 1 Column
                2: 2 Columns
                3: 3 Columns
                4: 4 Columns
                5: 5 Columns
                6: 6 Columns
            tablet_landscape:
              type: select.select
              label: Tablet Landscape
              description: Set the number of grid columns for each breakpoint. Inherit refers to the number of columns on the next smaller screen size.
              default: 3
              options:
                inherit: Inherit
                1: 1 Column
                2: 2 Columns
                3: 3 Columns
                4: 4 Columns
                5: 5 Columns
                6: 6 Columns
            desktop:
              type: select.select
              label: Desktop
              description: Set the number of grid columns for each breakpoint. Inherit refers to the number of columns on the next smaller screen size.
              default: inherit
              options:
                inherit: Inherit
                1: 1 Column
                2: 2 Columns
                3: 3 Columns
                4: 4 Columns
                5: 5 Columns
                6: 6 Columns
            large_desktop:
              type: select.select
              label: Large Screens
              description: Set the number of grid columns for each breakpoint. Inherit refers to the number of columns on the next smaller screen size.
              default: inherit
              options:
                inherit: Inherit
                1: 1 Column
                2: 2 Columns
                3: 3 Columns
                4: 4 Columns
                5: 5 Columns
                6: 6 Columns
            match_height:
              type: input.checkbox
              label: Match Height
              description: To match the height of the direct child of each cell.
              default: true
            class:
              type: input.selectize
              label: CSS Classes
              description: CSS class name for the particle.
        _tab_settings:
          label: Slider
          overridable: false
          fields:
            _info:
              type: separator.note
              content: 'If you set the <i>Grid</i> for Content Layout, all the Slider settings stated below will be ignored.'
            slider_animation_info:
              type: separator.note
              class: alert alert-info
              content: 'Slider Animation'
            slider_animation_set:
              type: select.select
              label: Set
              description: Slide all visible items at once. Group items into sets. The number of items within a set depends on the defined item width, e.g. 33% means that each set contains 3 items.
              default: disabled
              options:
                enabled: Enable
                disabled: Disable
            slider_animation_center:
              type: select.select
              label: Center
              description: Center the active slide.
              default: disabled
              options:
                enabled: Enable
                disabled: Disable
            slider_animation_finite:
              type: select.select
              label: Finite
              description: Disable infinite scrolling.
              default: disabled
              options:
                enabled: Enable
                disabled: Disable
            slider_velocity:
              type: input.number
              label: Velocity
              description: Set the velocity in pixels per millisecond. Min 20, Max 300
              min: 20
              max: 300
            slider_animation_autoplay:
              type: select.select
              label: Autoplay
              description: Enable autoplay for slider items.
              default: disabled
              options:
                enabled: Enable
                disabled: Disable
            slider_pause_onhover:
              type: select.select
              label: Pause On Hover
              description: Pause autoplay on hover.
              default: enabled
              options:
                enabled: Enable
                disabled: Disable
            slider_animation_interval:
              type: input.number
              label: Interval
              description: Set the autoplay interval in seconds. Min 5 Max 15.
              min: 5
              max: 15
              placeholder: 7
            navigation_info:
              type: separator.note
              class: alert alert-info
              content: 'Navigation Settings'
            navigation:
              type: select.select
              label: Navigation
              description: Select the navigation type.
              default: enabled
              options:
                enabled: Enable
                disabled: Disable
            navigation_position:
              type: select.select
              label: Position
              description: Align the navigation's items.
              default: center
              options:
                left: Left
                center: Center
                right: Right
            navigation_margin:
              type: select.select
              label: Margin
              description: Set the vertical margin.
              default: top
              options:
                small-top: Small
                top: Default
                medium-top: Medium
            navigation_breakpoint:
              type: select.select
              label: Breakpoint
              description: Display the navigation only on this device width and larger.
              default: s
              options:
                always: Always
                s: Small (Phone Landscape)
                m: Medium (Tablet Landscape)
                l: Large (Desktop)
                xl: X-Large (Large Screens)
            navigation_color:
              type: select.select
              label: Color
              description: Set light or dark color mode.
              default: default
              options:
                default: None
                light: Light
                dark: Dark
            slidenav_info:
              type: separator.note
              class: alert alert-info
              content: 'Slidenav Settings'
            slidenav_position:
              type: select.select
              label: Position
              description: Select the position of the slidenav.
              default: default
              options:
                none: None
                default: Default
                outside: Outside
                top-left: Top Left
                top-right: Top Right
                center-left: Center Left
                center-right: Center Right
                bottom-left: Bottom Left
                bottom-center: Bottom Center
                bottom-right: Bottom Right
            slidenav_hover:
              type: select.select
              label: Show On Hover
              description: Show on hover only.
              default: disabled
              options:
                enabled: Enable
                disabled: Disable
            larger_slidenav:
              type: input.checkbox
              label: Larger style
              description: To increase the size of the slidenav icons.
              default: false
            slidenav_margin:
              type: select.select
              label: Margin
              description: Apply a margin between the slidenav and the slider container.
              default: medium
              options:
                none: None
                small: Small
                medium: Medium
                large: Large
            slidenav_breakpoint:
              type: select.select
              label: Breakpoint
              description: Display the slidenav only on this device width and larger.
              default: s
              options:
                always: Always
                s: Small (Phone Landscape)
                m: Medium (Tablet Landscape)
                l: Large (Desktop)
                xl: X-Large (Large Screens)
            slidenav_color:
              type: select.select
              label: Color
              description: Set light or dark color mode.
              default: default
              options:
                default: None
                light: Light
                dark: Dark
            slidenav_outsite_breakpoint:
              type: select.select
              label: Outside Breakpoint
              description: Display the slidenav only outside on this device width and larger. Otherwise it will be displayed inside.
              default: xl
              options:
                always: Always
                s: Small (Phone Landscape)
                m: Medium (Tablet Landscape)
                l: Large (Desktop)
                xl: X-Large (Large Screens)
            slidenav_outside_color:
              type: select.select
              label: Outside Color
              description: Set light or dark color if the slidenav is outside of the slider.
              default: default
              options:
                default: None
                light: Light
                dark: Dark
            slidenav_icon_info:
              type: separator.note
              class: alert alert-info
              content: 'Custom previous/next icons'                
            slidenav_icon_left:
              type: input.icon
              label: Previous Icon
            slidenav_icon_right:
              type: input.icon
              label: Next Icon
        _tab_style:
          label: Style
          overridable: false
          fields:
            featured_settings:
              type: separator.note
              class: alert alert-info
              content: 'Featured Settings'            
            featured_bgcolor:
              type: input.colorpicker
              label: Featured Background
              description: Select the background color for featured text.
            featured_color:
              type: input.colorpicker
              label: Featured Color
              description: Select the color for featured text.
            title_settings:
              type: separator.note
              class: alert alert-info
              content: 'Title Settings'
            title_style:
              type: select.select
              label: Style
              description: Title styles differ in font-size but may also come with a predefined color, size and font.
              default: h3
              options:
                 default: None
                 heading-2xlarge: 2XLarge
                 heading-xlarge: XLarge
                 heading-large: Large
                 heading-medium: Medium
                 heading-small: Small
                 h1: H1
                 h2: H2
                 h3: H3
                 h4: H4
                 h5: H5
                 h6: H6
            title_decoration:
              type: select.select
              label: Decoration
              description: Decorate the headline with a divider, bullet or a line that is vertically centered to the heading.
              default: none
              options:
                 none: None
                 divider: Divider
                 bullet: Bullet
                 line: Line
            title_color:
              type: select.select
              label: Predefined Color
              description: Select the text color. If the Background option is selected, styles that don't apply a background image use the primary color instead.
              default: default
              options:
                 default: None
                 muted: Muted
                 emphasis: Emphasis
                 primary: Primary
                 secondary: Secondary
                 success: Success
                 warning: Warning
                 danger: Danger
                 background: Background
            customize_title_color:
              type: input.colorpicker
              label: Title Color
              description: Customize the title color instead using predefined title color mode.<br> You need to set the predefined color to None to use the customize color option.
            customize_title_fontsize:
              type: input.number
              label: Title Font Size
              min: 0
              description: Customize the title text font size.
            title_text_transform:
              type: select.select
              label: Transform
              description: The following options will transform text into uppercased, capitalized or lowercased characters.
              default: ''
              options:
                 '': Inherit
                 uppercase: Uppercase
                 capitalize: Capitalize
                 lowercase: Lowercase
            title_element:
              type: select.select
              label: HTML Element
              description: Choose one of the elements to fit your semantic structure.
              default: h3
              options:
                 h1: H1
                 h2: H2
                 h3: H3
                 h4: H4
                 h5: H5
                 h6: H6
                 div: div
            title_margin_top:
              type: select.select
              label: Margin Top
              description: Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.
              default: default
              options:
                 small: Small
                 default: Default
                 medium: Medium
                 large: Large
                 xlarge: X-Large
                 remove: None
            header_settings:
              type: separator.note
              class: alert alert-info
              content: 'Header Padding'
            header_padding_top:
              type: input.number
              label: Padding Top
              description: Set the padding top value to add spacing between top container and their content
              min: 0
              default: 20
              placeholder: 20
            header_padding_bottom:
              type: input.number
              label: Padding Bottom
              description: Set the padding bottom value to add spacing between bottom container and their content
              min: 0
              default: 20
              placeholder: 20
            header_padding_left:
              type: input.number
              label: Padding Left
              description: Set the padding left value to add spacing between left container and their content
              min: 0
              default: 25
              placeholder: 25
            header_padding_right:
              type: input.number
              label: Padding Right
              description: Set the padding right value to add spacing between right container and their content
              min: 0
              default: 25
              placeholder: 25
            body_settings:
              type: separator.note
              class: alert alert-info
              content: 'Body'
            body_padding_top:
              type: input.number
              label: Padding Top
              description: Set the padding top value to add spacing between top container and their content
              min: 0
              default: 0
              placeholder: 20
            body_padding_bottom:
              type: input.number
              label: Padding Bottom
              description: Set the padding bottom value to add spacing between bottom container and their content
              min: 0
              default: 0
              placeholder: 20
            body_padding_left:
              type: input.number
              label: Padding Left
              description: Set the padding left value to add spacing between left container and their content
              min: 0
              default: 25
              placeholder: 25
            body_padding_right:
              type: input.number
              label: Padding Right
              description: Set the padding right value to add spacing between right container and their content
              min: 0
              default: 25
              placeholder: 25
            list_style:
              type: select.select
              label: Feature List Style
              description: Select the list style and add larger padding between items.
              default: default
              options:
                 default: None
                 divider: Divider
                 striped: Striped
                 bullet: Bullet
            large_padding:
              type: input.checkbox
              label: Larger padding
              default: false
            feature_margin_top:
              type: select.select
              label: Margin Top
              description: Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.
              default: default
              options:
                 small: Small
                 default: Default
                 medium: Medium
                 large: Large
                 xlarge: X-Large
                 remove: None
            price_settings:
              type: separator.note
              class: alert alert-info
              content: 'Price Settings'
            price_style:
              type: select.select
              label: Style
              description: Heading styles differ in font-size but may also come with a predefined color, size and font.
              default: h3
              options:
                 default: None
                 heading-2xlarge: 2XLarge
                 heading-xlarge: XLarge
                 heading-large: Large
                 heading-medium: Medium
                 heading-small: Small
                 h1: H1
                 h2: H2
                 h3: H3
                 h4: H4
                 h5: H5
                 h6: H6
            price_color:
              type: select.select
              label: Predefined Color
              description: Select the text color. If the Background option is selected, styles that don't apply a background image use the primary color instead.
              default: default
              options:
                 default: None
                 muted: Muted
                 emphasis: Emphasis
                 primary: Primary
                 secondary: Secondary
                 success: Success
                 warning: Warning
                 danger: Danger
                 background: Background
            price_title_color:
              type: input.colorpicker
              label: Price Color
              description: Customize the title color instead using predefined title color mode.<br> You need to set the predefined color to None to use the customize color option.
            price_title_fontsize:
              type: input.number
              label: Price Font Size
              min: 0
              description: Customize the title text font size.
            symbol_fontsize:
              type: input.number
              label: Symbol Font Size
              min: 0
              description: Customize the symbol text font size.
            symbol_color:
              type: input.colorpicker
              label: Symbol Color
              description: Customize the symbol color.
            price_margin:
              type: select.select
              label: Price Margin
              description: Set the vertical margin.
              default: small
              options:
                 default: Default
                 small: Small
                 remove: None
            price_element:
              type: select.select
              label: HTML Element
              description: Choose one of the elements to fit your semantic structure.
              default: h3
              options:
                 h1: H1
                 h2: H2
                 h3: H3
                 h4: H4
                 h5: H5
                 h6: H6
                 div: div
            meta_settings:
              type: separator.note
              class: alert alert-info
              content: 'Meta Settings'
            meta_style:
              type: select.select
              label: Style
              description: Select a predefined meta text style, including color, size and font-family.
              default: text-meta
              options:
                 default: None
                 text-meta: Meta
                 heading-2xlarge: 2XLarge
                 heading-xlarge: XLarge
                 heading-large: Large
                 heading-medium: Medium
                 heading-small: Small
                 h1: H1
                 h2: H2
                 h3: H3
                 h4: H4
                 h5: H5
                 h6: H6
            pre_meta_color:
              type: select.select
              label: Predefined Color
              description: Select the predefined meta color.
              default: default
              options:
                 default: None
                 muted: Muted
                 emphasis: Emphasis
                 primary: Primary
                 secondary: Secondary
                 success: Success
                 warning: Warning
                 danger: Danger
            meta_color:
              type: input.colorpicker
              label: Meta Color
              description: Customize the meta color.
            meta_fontsize:
              type: input.number
              label: Font Size
              min: 0
              description: Customize the meta text font size
            meta_text_transform:
              type: select.select
              label: Transform
              description: The following options will transform text into uppercased, capitalized or lowercased characters.
              default: ''
              options:
                 '': Inherit
                 uppercase: Uppercase
                 capitalize: Capitalize
                 lowercase: Lowercase
            meta_margin_top:
              type: select.select
              label: Margin Top
              description: Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.
              default: default
              options:
                 small: Small
                 default: Default
                 medium: Medium
                 large: Large
                 xlarge: X-Large
                 remove: None
            content_settings:
              type: separator.note
              class: alert alert-info
              content: 'Description Settings'
            content_style:
              type: select.select
              label: Style
              description: Select a predefined meta text style, including color, size and font-family.
              default: default
              options:
                 default: None
                 lead: Lead
                 meta: Meta
            content_text_color:
              type: select.select
              label: Predefined Color
              description: Select the text color. If the Background option is selected, styles that don't apply a background image use the primary color instead.
              default: default
              options:
                 default: None
                 muted: Muted
                 emphasis: Emphasis
                 primary: Primary
                 secondary: Secondary
                 success: Success
                 warning: Warning
                 danger: Danger
            customize_content_color:
              type: input.colorpicker
              label: Customize Color
              description: Customize the description color instead using predefined text color. <br> You need to set the predefined color to None to use the customize color option.
            customize_content_fontsize:
              type: input.number
              label: Font Size
              min: 0
              description: Customize the content text font size.
            content_text_transform:
              type: select.select
              label: Transform
              description: The following options will transform text into uppercased, capitalized or lowercased characters.
              default: ''
              options:
                 '': Inherit
                 uppercase: Uppercase
                 capitalize: Capitalize
                 lowercase: Lowercase
            content_margin_top:
              type: select.select
              label: Margin Top
              description: Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.
              default: default
              options:
                 small: Small
                 default: Default
                 medium: Medium
                 large: Large
                 xlarge: X-Large
                 remove: None
            button_settings:
              type: separator.note
              class: alert alert-info
              content: 'Button Padding'
            button_padding_top:
              type: input.number
              label: Padding Top
              description: Set the padding top value to add spacing between top container and their content
              min: 0
              default: 20
              placeholder: 20
            button_padding_bottom:
              type: input.number
              label: Padding Bottom
              description: Set the padding bottom value to add spacing between bottom container and their content
              min: 0
              default: 20
              placeholder: 20
            button_padding_left:
              type: input.number
              label: Padding Left
              description: Set the padding left value to add spacing between left container and their content
              min: 0
              default: 25
              placeholder: 25
            button_padding_right:
              type: input.number
              label: Padding Right
              description: Set the padding right value to add spacing between right container and their content
              min: 0
              default: 25
              placeholder: 25
            link_button_size:
              type: select.select
              label: Button Size
              description: Set the button size. Button size not working with Link button style like Link, Link Muted, Link Text and Button text.
              default: default
              options:
                 small: Small
                 default: Default
                 large: Large
            fullwidth:
              type: input.checkbox
              label: Full Width Button
              default: false
            button_margin_top:
              type: select.select
              label: Margin Top
              description: Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.
              default: default
              options:
                 small: Small
                 default: Default
                 medium: Medium
                 large: Large
                 xlarge: X-Large
                 remove: None
        _tab_general:
          label: General
          overridable: false
          fields:
            particle_title_info:
              type: separator.note
              class: alert alert-info
              content: 'Particle Title Style'
            particle_title:
              type: input.text
              label: Title
              description: Add an optional particle title.
              placeholder: Enter particle title
            particle_title_style:
              type: select.select
              label: Style
              description: Title styles differ in font-size but may also come with a predefined color, size and font.
              default: h3
              options:
                 default: None
                 heading-2xlarge: 2XLarge
                 heading-xlarge: XLarge
                 heading-large: Large
                 heading-medium: Medium
                 heading-small: Small
                 h1: H1
                 h2: H2
                 h3: H3
                 h4: H4
                 h5: H5
                 h6: H6
            particle_title_decoration:
              type: select.select
              label: Decoration
              description: Decorate the headline with a divider, bullet or a line that is vertically centered to the heading.
              default: none
              options:
                 none: None
                 divider: Divider
                 bullet: Bullet
                 line: Line
            particle_title_align:
              type: select.select
              label: Alignment
              description: Center, left and right alignment for Particle title.
              default: inherit
              options:
                  inherit: Inherit
                  left: Left
                  center: Center
                  right: Right
                  justify: Justify
            particle_predefined_color:
              type: select.select
              label: Predefined Color
              description: Select the text color. If the Background option is selected, styles that don't apply a background image use the primary color instead.
              default: default
              options:
                 default: None
                 muted: Muted
                 emphasis: Emphasis
                 primary: Primary
                 secondary: Secondary
                 success: Success
                 warning: Warning
                 danger: Danger
            particle_title_color:
              type: input.colorpicker
              label: Custom Color
              description: Customize the title color instead using predefined color mode. Set the Predefined color to None before using this color customization mode.
            particle_title_fontsize:
              type: input.number
              label: Font Size
              description: Customize the particle title font size.
              min: 0
            particle_title_element:
              type: select.select
              label: HTML Element
              description: Choose one of the elements to fit your semantic structure.
              default: h3
              options:
                 h1: H1
                 h2: H2
                 h3: H3
                 h4: H4
                 h5: H5
                 h6: H6
                 div: div
            general_content_info:
              type: separator.note
              class: alert alert-info
              content: 'General Settings'
            align:
              type: select.select
              label: Text Alignment
              description: Center, left and right alignment may depend on a breakpoint and require a fallback.
              default: inherit
              options:
                  inherit: None
                  left: Left
                  center: Center
                  right: Right
                  justify: Justify
            breakpoint:
              type: select.select
              label: Alignment Breakpoint
              description: Define the device width from which the alignment will apply.
              default: always
              options:
                  always: Always
                  s: Small (Phone Landscape)
                  m: Medium (Tablet Landscape)
                  l: Large (Desktop)
                  xl: X-Large (Large Screens)
            fallback:
              type: select.select
              label: Alignment Fallback
              description: Define an alignment fallback for device widths below the breakpoint.
              default: inherit
              options:
                  inherit: None
                  left: Left
                  center: Center
                  right: Right
                  justify: Justify
            g_maxwidth:
              type: select.select
              label: Max Width
              description: Set the maximum content width.
              default: inherit
              options:
                  inherit: None
                  small: Small
                  medium: Medium
                  large: Large
                  xlarge: X-Large
                  xxlarge: XX-Large
            g_maxwidth_alignment:
              type: select.select
              label: Max Width Alignment
              description: Define the alignment in case the container exceeds the element's max-width.
              default: left
              options:
                  left: Left
                  center: Center
                  right: Right
            g_maxwidth_breakpoint:
              type: select.select
              label: Max Width Breakpoint
              description: Define the device width from which the element's max-width will apply.
              default: always
              options:
                  always: Always
                  s: Small (Phone Landscape)
                  m: Medium (Tablet Landscape)
                  l: Large (Desktop)
                  xl: X-Large (Large Screens)
            margin:
              type: select.select
              label: Margin
              description: Set the vertical margin.
              default: inherit
              options:
                  inherit: Keep existing
                  small: Small
                  default: Default
                  medium: Medium
                  large: Large
                  xlarge: X-Large
                  remove-vertical: None
            visibility:
              type: select.select
              label: Visibility
              description: Display the element only on this device width and larger.
              default: inherit
              options:
                  inherit: Always
                  s: Small (Phone Landscape)
                  m: Medium (Tablet Landscape)
                  l: Large (Desktop)
                  xl: X-Large (Large Screens)
            general_animation_info:
              type: separator.note
              class: alert alert-info
              content: 'Animation Settings'
            animation:
              type: select.select
              label: Animation
              description: Apply an animation to particles once they enter the viewport.
              default: inherit
              options:
                  inherit: None
                  fade: Fade
                  scale-up: Scale Up
                  scale-down: Scale Down
                  slide-top-small: Slide Top Small
                  slide-bottom-small: Slide Bottom Small
                  slide-left-small: Slide Left Small
                  slide-right-small: Slide Right Small
                  slide-top-medium: Slide Top Medium
                  slide-bottom-medium: Slide Bottom Medium
                  slide-left-medium: Slide Left Medium
                  slide-right-medium: Slide Right Medium
                  slide-top: Slide Top 100%
                  slide-bottom: Slide Bottom 100%
                  slide-left: Slide Left 100%
                  slide-right: Slide Right 100%
                  parallax: Parallax
            animation_delay:
              type: input.number
              label: Delay
              description: Set the delay animations for particle. Delay time in ms.
              min: 0
              placeholder: 200
            animation_repeat:
              type: select.select
              label: Repeat
              description: Repeat an animation to particle once it enter the viewport.
              default: disabled
              options:
                enabled: Enable
                disabled: Disable
            delay_element_animations:
              type: input.checkbox
              label: Delay Element
              description: Delay element animations so that animations are slightly delayed and don't play all at the same time. Slide animations can come into effect with a fixed offset or at 100% of the element’s own size.
              default: false
        _tab_parallax_animation:
          label: Parallax
          overridable: false
          fields:
            parallax_info:
              type: separator.note
              class: alert alert-info
              content: 'To configure a parallax animation, make sure to set the Animation to Parallax in the <i>General</i> tab. <a href="https://joomlead.com/gantry-5-particles/particles-documentation/#parallax-settings" target="_blank">Learn more</a>'
            pa_horizontal_start:
              type: input.number
              label: Horizontal Start
              description: Animate the horizontal position (translateX) in pixels. Min -600 and Max 600.
              min: -600
              max: 600
              placeholder: 0
            pa_horizontal_end:
              type: input.number
              label: Horizontal End
              description: Animate the horizontal position (translateX) in pixels. Min -600 and Max 600.
              min: -600
              max: 600
              placeholder: 0
            pa_vertical_start:
              type: input.number
              label: Vertical Start
              description: Animate the vertical position (translateY) in pixels. Min -600 and Max 600.
              min: -600
              max: 600
              placeholder: 0
            pa_vertical_end:
              type: input.number
              label: Vertical End
              description: Animate the vertical position (translateY) in pixels. Min -600 and Max 600.
              min: -600
              max: 600
              placeholder: 0
            scale_start:
              type: input.number
              label: Scale Start
              description: Animate the scaling. 100 means 100% scale, 200 means 200% scale, and 50 means 50% scale. Min 50 and Max 200
              min: 50
              max: 200
              placeholder: 100
            scale_end:
              type: input.number
              label: Scale End
              description: Animate the scaling. 100 means 100% scale, 200 means 200% scale, and 50 means 50% scale. Min 50 and Max 200
              min: 50
              max: 200
              placeholder: 100
            rotate_start:
              type: input.number
              label: Rotate Start
              description: Animate the rotation clockwise in degrees. Min 0 and Max 360
              min: 0
              max: 360
              placeholder: 0
            rotate_end:
              type: input.number
              label: Rotate End
              description: Animate the rotation clockwise in degrees. Min 0 and Max 360
              min: 0
              max: 360
              placeholder: 0
            opacity_start:
              type: input.number
              label: Opacity Start
              description: Animate the opacity. 100 means 100% opacity, 0 means 0% opacity and 50 means 50%. Min 0 and Max 100
              min: 0
              max: 100
              placeholder: 100
            opacity_end:
              type: input.number
              label: Opacity End
              description: Animate the opacity. 100 means 100% opacity, 0 means 0% opacity and 50 means 50%. Min 0 and Max 100
              min: 0
              max: 100
              placeholder: 100
            easing:
              type: input.number
              label: Easing
              description: Determine how the speed of the animation behaves over time. A value below 100 is faster in the beginning and slower towards the end while a value above 100 behaves inversely. Min 10 and Max 200
              min: 10
              max: 200
              placeholder: 10
            pa_viewport:
              type: input.number
              label: Viewport
              description: Set the animation end point relative to viewport height, e.g. 50 for 50% of the viewport. Min 10 and Max 100
              min: 10
              max: 100
              placeholder: 50
            pa_breakpoint:
              type: select.select
              label: Breakpoint
              description: Display the parallax effect only on this device width and larger.
              default: always
              options:
                always: Always
                s: Small (Phone Landscape)
                m: Medium (Tablet Landscape)
                l: Large (Desktop)
                xl: X-Large (Large Screens)
        _tab_parallax:
          label: Parallax Background
          overridable: false
          fields:
            parallax_bg_info:
              type: separator.note
              class: alert alert-info
              content: 'The Parallax Background settings allow you to animate a background image depending on the scroll position of the document. <a href="https://joomlead.com/gantry-5-particles/particles-documentation/#parallax-background-settings" target="_blank">Learn more</a>'
            parallax_image:
              type: input.imagepicker
              label: Background Image
              description: Select parallax background image for particle.
              placeholder: Pick an image
            background_image_size:
              type: select.select
              label: Image Size
              description: Determine whether the image will fit the section dimensions by clipping it or by filling the empty areas with the background color.
              default: auto
              options:
                auto: Auto
                cover: Cover
                contain: Contain
            background_image_position:
              type: select.select
              label: Image Position
              description: Set the initial background position, relative to the section layer.
              default: center-center
              options:
                top-left: Top Left
                top-center: Top Center
                top-right: Top Right
                center-left: Center Left
                center-center: Center Center
                center-right: Center Right
                bottom-left: Bottom Left
                bottom-center: Bottom Center
                bottom-right: Bottom Right
            parallax_bg_breakpoint:
              type: select.select
              label: Parallax Breakpoint
              description: Display the parallax effect only on this device width and larger.
              default: always
              options:
                always: Always
                s: Small (Phone Landscape)
                m: Medium (Tablet Landscape)
                l: Large (Desktop)
                xl: X-Large (Large Screens)
            parallax_bg_visibility:
              type: select.select
              label: Image Visibility
              description: Display the image only on this device width and larger.
              default: always
              options:
                always: Always
                s: Small (Phone Landscape)
                m: Medium (Tablet Landscape)
                l: Large (Desktop)
                xl: X-Large (Large Screens)
            parallax_bg_color:
              type: input.colorpicker
              label: Background Color
              description: Use the background color in combination with blend modes, a transparent image or to fill the area, if the image doesn't cover the whole section.
            blendmode:
              type: select.select
              label: Blend Mode
              description: Determine how the image will blend with the background color.
              default: inherit
              options:
                  inherit: Normal
                  multiply: Multiply
                  screen: Screen
                  overlay: Overlay
                  darken: Darken
                  lighten: Lighten
                  color-dodge: Color-dodge
                  color-burn: Color-burn
                  hard-light: Hard-light
                  soft-light: Soft-light
                  difference: Difference
                  exclusion: Exclusion
                  hue: Hue
                  saturation: Saturation
                  color: Color
                  luminosity: Luminosity
            parallax_bg_overlay:
              type: input.colorpicker
              label: Overlay Color
              description: Set an additional transparent overlay to soften the image.
            horizontal_start:
              type: input.number
              label: Horizontal Start
              description: Animate the horizontal position (translateX) in pixels. Min -600 and Max 600.
              min: -600
              max: 600
              default: 0
            horizontal_end:
              type: input.number
              label: Horizontal End
              description: Animate the horizontal position (translateX) in pixels. Min -600 and Max 600.
              min: -600
              max: 600
              default: 0
            vertical_start:
              type: input.number
              label: Vertical Start
              description: Animate the vertical position (translateY) in pixels. Min -600 and Max 600.
              min: -600
              max: 600
              default: 0
            vertical_end:
              type: input.number
              label: Vertical End
              description: Animate the vertical position (translateY) in pixels. Min -600 and Max 600.
              min: -600
              max: 600
              default: 0
            parallax_easing:
              type: input.number
              label: Parallax Easing
              description: Set the animation easing. Zero transitions at an even speed, a positive value starts off quickly while a negative value starts off slowly. Min -20 Max 20
              min: -20
              max: 20
            container_maxwidth:
              type: select.select
              label: Max Width
              description: Set the Fullwidth (Flushed Content) for parent section then use this option to define the container width for the particles inside this section.
              default: default
              options:
                default: Default
                xsmall: X-Small
                small: Small
                large: Large
                xlarge: X-Large
                expand: Expand
                none: None
            viewport_height:
              type: select.select
              label: Height
              description: Enabling viewport height on a section that directly follows the header will subtract the header's height from it. On short pages, a section can be expanded to fill the browser window.
              default: none
              options:
                none: None
                full: Viewport
                percent: Viewport (Minus 20%)
                section: Viewport (Minus 50%)
                expand: Expand
            padding:
              type: select.select
              label: Padding
              description: Set the vertical padding.
              default: default
              options:
                default: Default
                xsmall: X-Small
                small: Small
                large: Large
                xlarge: X-Large
                none: None
            vertical_alignment:
              type: select.select
              label: Vertical Alignment
              description: Align the section content vertically, if the section height is larger than the content itself.
              default: none
              options:
                none: Top
                middle: Middle
                bottom: Bottom
            parallax_text_color:
              type: select.select
              label: Inverse Color
              description: Set light or dark color mode for text, buttons and controls.
              default: default
              options:
                default: None
                light: Light
                dark: Dark
    copyright:
      type: separator.note
      class: alert alert-success
      content: 'JL Pricing Table 2 <strong>Version: 2.1.3</strong> Copyright (C) <a href="https://joomlead.com/" target="_blank">https://joomlead.com</a> | <a href="https://joomlead.com/g5/docs/pricing-table-2-documentation/" target="_blank">Documentation</a>'