info:
  type: content_page
  title: 'Sidebar Image Paragraph'
  path:
    alias: /documentation/sidebar-image-paragraph
    pathauto: 0
field_page_section:
  paragraphs:
    -
      paragraph_type: d_p_text_paged
      data:
        field_d_main_title:
          type: text
          data: 'Sidebar Image Paragraph'
        field_d_subtitle:
          type: text
          data: 'Droopler Documentation'
        field_d_settings:
          type: field_p_configuration_storage
          custom_class: theme-primary padding-top-default padding-bottom-default margin-top-default margin-bottom-default
          heading_type: h1
    -
      paragraph_type: d_p_text_paged
      data:
        field_d_main_title:
          type: text
          data: 'Full Example'
        field_d_long_text:
          type: text_long
          data: '<p>This paragraph is one of the most interesting visual features of Droopler. It allows you to put an image to a side, and fill the rest with text. There''s a possibility to use a header, icon and CTA link.</p>'
        field_d_settings:
          type: field_p_configuration_storage
          custom_class: theme-default padding-top-default padding-bottom-default margin-top-default margin-bottom-default
    -
      paragraph_type: d_p_side_image
      data:
        field_d_media_icon:
          type: media_image
          directory: demo
          files:
            -
              path: d_demo/demo_droopler_white.svg
              alt: 'Droopler icon'
        field_d_main_title:
          type: text
          data: 'Main Title'
        field_d_media_background:
          type: media_image
          directory: demo
          files:
            -
              path: d_demo/d_demo_engine_airplane_1.jpg
              alt: 'Event 3'
        field_d_long_text:
          type: text_long
          data: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum mi elit, id commodo ligula viverra vitae. Aliquam lorem diam, lobortis at ante et, gravida blandit enim. Ut bibendum egestas sem. Nulla porttitor lorem in erat maximus, id vulputate est auctor. Curabitur consectetur nec ante ac ornare. Nam aliquam elit ex. Nam feugiat nulla pulvinar nunc commodo, eget faucibus mauris egestas.</p>'
        field_d_cta_link:
          type: cta
          data:
            link: 'internal:/documentation/sidebar-image-paragraph'
            text: 'Call To Action!'
            options:
              attributes:
                class:
                  - btn
                  - btn-secondary
        field_d_settings:
          type: field_p_configuration_storage
          custom_class: full-example theme-default padding-top-default padding-bottom-default margin-top-default margin-bottom-default
          side_image_layout: right
    -
      paragraph_type: d_p_text_paged
      data:
        field_d_main_title:
          type: text
          data: 'Basic Example'
        field_d_long_text:
          type: text
          data: '<p>Side Image Paragraph does not need all those complicated fields around the text. Use it with only a header and see that it is an excellent way to create feature lists.</p>'
        field_d_settings:
          type: field_p_configuration_storage
          custom_class: theme-default padding-top-default padding-bottom-default margin-top-default margin-bottom-default
    -
      paragraph_type: d_p_side_image
      data:
        field_d_main_title:
          type: text
          data: 'Main Title'
        field_d_media_background:
          type: media_image
          directory: demo
          files:
            -
              path: d_demo/d_demo_engine_oil_change_1.jpg
              alt: 'Event 3'
        field_d_settings:
          type: field_p_configuration_storage
          custom_class: basic-example theme-default padding-top-default padding-bottom-default margin-top-default margin-bottom-default
          side_image_layout: left
    -
      paragraph_type: d_p_text_paged
      data:
        field_d_main_title:
          type: text
          data: 'Let''s put it together!'
        field_d_long_text:
          type: text_long
          data: '<p>So now... Let''s put the paragraphs together, with image side changing from right to left. This layout is the most used method of displaying this Side Image element of Droopler.</p> <p>You can enable the "Invert theme" options to alter the look of this paragraph. You can change the background to a light one and the font color will turn dark. See the last example.</p>'
        field_d_settings:
          type: field_p_configuration_storage
          custom_class: theme-default padding-top-default padding-bottom-default margin-top-default margin-bottom-default
    -
      paragraph_type: d_p_side_image
      data:
        field_d_main_title:
          type: text
          data: 'Main Title'
        field_d_media_background:
          type: media_image
          directory: demo
          files:
            -
              path: d_demo/d_demo_engine_car_2.jpg
              alt: 'Event 3'
        field_d_long_text:
          type: text_long
          data: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum mi elit, id commodo ligula viverra vitae. Aliquam lorem diam, lobortis at ante et, gravida blandit enim. Ut bibendum egestas sem. Nulla porttitor lorem in erat maximus, id vulputate est auctor. Curabitur consectetur nec ante ac ornare. Nam aliquam elit ex. Nam feugiat nulla pulvinar nunc commodo, eget faucibus mauris egestas.</p>'
        field_d_settings:
          type: field_p_configuration_storage
          custom_class: theme-default padding-top-default padding-bottom-default margin-top-default margin-bottom-default
          side_image_layout: right
    -
      paragraph_type: d_p_side_image
      data:
        field_d_main_title:
          type: text
          data: 'Main Title'
        field_d_media_background:
          type: media_image
          directory: demo
          files:
            -
              path: d_demo/d_demo_engine_boat_1.jpg
              alt: 'Event 3'
        field_d_long_text:
          type: text_long
          data: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum mi elit, id commodo ligula viverra vitae. Aliquam lorem diam, lobortis at ante et, gravida blandit enim. Ut bibendum egestas sem. Nulla porttitor lorem in erat maximus, id vulputate est auctor. Curabitur consectetur nec ante ac ornare. Nam aliquam elit ex. Nam feugiat nulla pulvinar nunc commodo, eget faucibus mauris egestas.</p>'
        field_d_settings:
          type: field_p_configuration_storage
          custom_class: theme-default padding-top-default padding-bottom-default margin-top-default margin-bottom-default
          side_image_layout: left
    -
      paragraph_type: d_p_side_image
      data:
        field_d_main_title:
          type: text
          data: 'Main Title'
        field_d_media_background:
          type: media_image
          directory: demo
          files:
            -
              path: d_demo/d_demo_engine_airplane_2.jpg
              alt: 'Event 3'
        field_d_long_text:
          type: text_long
          data: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum mi elit, id commodo ligula viverra vitae. Aliquam lorem diam, lobortis at ante et, gravida blandit enim. Ut bibendum egestas sem. Nulla porttitor lorem in erat maximus, id vulputate est auctor. Curabitur consectetur nec ante ac ornare. Nam aliquam elit ex. Nam feugiat nulla pulvinar nunc commodo, eget faucibus mauris egestas.</p>'
        field_d_settings:
          type: field_p_configuration_storage
          custom_class: theme-default padding-top-default padding-bottom-default margin-top-default margin-bottom-default
          side_image_layout: right
    -
      paragraph_type: d_p_side_image
      data:
        field_d_main_title:
          type: text
          data: 'Main Title'
        field_d_media_background:
          type: media_image
          directory: demo
          files:
            -
              path: d_demo/d_demo_services_spacecrafts.jpg
              alt: 'Event 3'
        field_d_long_text:
          type: text_long
          data: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum mi elit, id commodo ligula viverra vitae. Aliquam lorem diam, lobortis at ante et, gravida blandit enim. Ut bibendum egestas sem. Nulla porttitor lorem in erat maximus, id vulputate est auctor. Curabitur consectetur nec ante ac ornare. Nam aliquam elit ex. Nam feugiat nulla pulvinar nunc commodo, eget faucibus mauris egestas.</p>'
        field_d_settings:
          type: field_p_configuration_storage
          custom_class: theme-secondary all-example padding-top-default padding-bottom-default margin-top-default margin-bottom-default
          side_image_layout: left
    -
      paragraph_type: d_p_text_paged
      data:
        field_d_main_title:
          type: text
          data: 'Wide Example'
        field_d_long_text:
          type: text_long
          data: '<p>There is a higher version available, with a wider image. If you select the "Right (wide)" or "Left (wide)" side of the image, the paragraph looks like this:</p>'
        field_d_settings:
          type: field_p_configuration_storage
          custom_class: theme-default padding-top-default padding-bottom-default margin-top-default margin-bottom-default
    -
      paragraph_type: d_p_side_image
      data:
        field_d_main_title:
          type: text
          data: 'Main Title'
        field_d_media_background:
          type: media_image
          directory: demo
          files:
            -
              path: d_demo/d_demo_enginge_overhaul_1.jpg
              alt: 'Event 3'
        field_d_long_text:
          type: text_long
          data: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum mi elit, id commodo ligula viverra vitae. Aliquam lorem diam, lobortis at ante et, gravida blandit enim. Ut bibendum egestas sem. Nulla porttitor lorem in erat maximus, id vulputate est auctor. Curabitur consectetur nec ante ac ornare. Nam aliquam elit ex. Nam feugiat nulla pulvinar nunc commodo, eget faucibus mauris egestas.</p>'
        field_d_settings:
          type: field_p_configuration_storage
          custom_class: theme-default padding-top-default padding-bottom-default margin-top-default margin-bottom-default
          side_image_layout: right-wide
    -
      paragraph_type: d_p_side_image
      data:
        field_d_main_title:
          type: text
          data: 'Main Title'
        field_d_media_background:
          type: media_image
          directory: demo
          files:
            -
              path: d_demo/d_demo_tile_boat.jpg
              alt: 'Event 3'
        field_d_long_text:
          type: text_long
          data: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum mi elit, id commodo ligula viverra vitae. Aliquam lorem diam, lobortis at ante et, gravida blandit enim. Ut bibendum egestas sem. Nulla porttitor lorem in erat maximus, id vulputate est auctor. Curabitur consectetur nec ante ac ornare. Nam aliquam elit ex. Nam feugiat nulla pulvinar nunc commodo, eget faucibus mauris egestas.</p>'
        field_d_settings:
          type: field_p_configuration_storage
          custom_class: wide-example theme-default padding-top-default padding-bottom-default margin-top-default margin-bottom-default
          side_image_layout: left-wide
field_teaser_media_image:
  type: media_image
  directory: demo
  files:
    -
      path: d_demo/demo-logo.svg
      alt: Droopler
field_teaser_text:
  type: text_long
  data: 'Discover possibilities of Droopler distribution for Drupal.'
