info:
  type: content_page
  title: 'Carousel Paragraph'
  path:
    alias: /documentation/carousel-paragraph
    pathauto: 0
field_page_section:
  paragraphs:
    -
      paragraph_type: d_p_text_paged
      data:
        field_d_main_title:
          type: text
          data: 'Carousel 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>Carousel Paragraph is another type of list. The items are sliding from right to left, one by one. You decide how many items are visible. Below you can see a full version of the carousel. With icon, description and fully equipped boxes.</p>'
        field_d_settings:
          type: field_p_configuration_storage
          custom_class: theme-gray padding-top-default padding-bottom-default margin-top-default margin-bottom-default
    -
      paragraph_type: d_p_carousel
      data:
        field_d_media_icon:
          type: media_image
          directory: demo
          files:
            -
              path: d_demo/demo_droopler.svg
              alt: 'Droopler icon'
        field_d_main_title:
          type: text
          data: 'Main Title'
        field_d_long_text:
          type: text_long
          data: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam cursus tristique dui dignissim gravida. Duis tristique sem non interdum ultricies. Nunc vitae viverra lacus. Vivamus vel mollis nisi. Sed ut fermentum lorem. Vestibulum non accumsan eros, sit amet tempus ex.</p>'
        field_d_p_cs_item_reference:
          type: paragraph_reference
          subtype: d_p_carousel_item
          data:
            -
              field_d_media_icon:
                type: media_image
                directory: demo
                files:
                  -
                    path: d_demo/d_demo_icon_car.svg
                    alt: 'Car icon'
              field_d_main_title:
                type: text
                data: 'Lorem Ipsum'
              field_d_long_text:
                type: text_long
                data: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam cursus tristique dui dignissim gravida.</p>'
              field_d_cta_link:
                type: cta
                data:
                  link: 'internal:/documentation/carousel-paragraph'
                  text: Car
            -
              field_d_media_icon:
                type: media_image
                directory: demo
                files:
                  -
                    path: d_demo/d_demo_icon_boat.svg
                    alt: 'Boat icon'
              field_d_main_title:
                type: text
                data: 'Dolor Amet'
              field_d_long_text:
                type: text_long
                data: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam cursus tristique dui dignissim gravida.</p>'
              field_d_cta_link:
                type: cta
                data:
                  link: 'internal:/documentation/carousel-paragraph'
                  text: Boat
            -
              field_d_media_icon:
                type: media_image
                directory: demo
                files:
                  -
                    path: d_demo/d_demo_icon_cog.svg
                    alt: 'Settings icon'
              field_d_main_title:
                type: text
                data: 'Lorem Ipsum'
              field_d_long_text:
                type: text_long
                data: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam cursus tristique dui dignissim gravida.</p>'
              field_d_cta_link:
                type: cta
                data:
                  link: 'internal:/documentation/carousel-paragraph'
                  text: Settings
            -
              field_d_media_icon:
                type: media_image
                directory: demo
                files:
                  -
                    path: d_demo/d_demo_icon_bag.svg
                    alt: 'Bag icon'
              field_d_main_title:
                type: text
                data: 'Dolor Amet'
              field_d_long_text:
                type: text_long
                data: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam cursus tristique dui dignissim gravida.</p>'
              field_d_cta_link:
                type: cta
                data:
                  link: 'internal:/documentation/carousel-paragraph'
                  text: Bag
            -
              field_d_media_icon:
                type: media_image
                directory: demo
                files:
                  -
                    path: d_demo/d_demo_icon_contact.svg
                    alt: 'Telephone icon'
              field_d_main_title:
                type: text
                data: 'Lorem Ipsum'
              field_d_long_text:
                type: text_long
                data: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam cursus tristique dui dignissim gravida.</p>'
              field_d_cta_link:
                type: cta
                data:
                  link: 'internal:/documentation/carousel-paragraph'
                  text: Telephone
            -
              field_d_media_icon:
                type: media_image
                directory: demo
                files:
                  -
                    path: d_demo/d_demo_icon_file.svg
                    alt: 'File icon'
              field_d_main_title:
                type: text
                data: 'Dolor Amet'
              field_d_long_text:
                type: text_long
                data: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam cursus tristique dui dignissim gravida.</p>'
              field_d_cta_link:
                type: cta
                data:
                  link: 'internal:/documentation/carousel-paragraph'
                  text: File
            -
              field_d_media_icon:
                type: media_image
                directory: demo
                files:
                  -
                    path: d_demo/d_demo_icon_plane.svg
                    alt: 'Plane icon'
              field_d_main_title:
                type: text
                data: 'Lorem Ipsum'
              field_d_long_text:
                type: text_long
                data: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam cursus tristique dui dignissim gravida.</p>'
              field_d_cta_link:
                type: cta
                data:
                  link: 'internal:/documentation/carousel-paragraph'
                  text: Plane
            -
              field_d_media_icon:
                type: media_image
                directory: demo
                files:
                  -
                    path: d_demo/d_demo_icon_download.svg
                    alt: 'Download icon'
              field_d_main_title:
                type: text
                data: 'Dolor Amet'
              field_d_long_text:
                type: text_long
                data: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam cursus tristique dui dignissim gravida.</p>'
              field_d_cta_link:
                type: cta
                data:
                  link: 'internal:/documentation/carousel-paragraph'
                  text: Download
        field_d_cta_link:
          type: cta
          data:
            link: 'internal:/documentation/carousel-paragraph'
            text: 'See more'
        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
          column_count: 4
    -
      paragraph_type: d_p_text_paged
      data:
        field_d_main_title:
          type: text
          data: 'Logos Example'
        field_d_long_text:
          type: text_long
          data: '<p>The Carousel is perfect for presenting a sliding list of logotypes. If you organize an event with the help of sponsors or cooperate with a lot of partners, you usually want to honor them on your website. Of course, you can wrap each item with a hyperlink.</p>'
        field_d_settings:
          type: field_p_configuration_storage
          custom_class: theme-gray padding-top-default padding-bottom-default margin-top-default margin-bottom-default
    -
      paragraph_type: d_p_carousel
      data:
        field_d_main_title:
          type: text
          data: 'Main Title'
        field_d_p_cs_item_reference:
          type: paragraph_reference
          subtype: d_p_carousel_item
          data:
            -
              field_d_media_icon:
                type: media_image
                directory: demo
                files:
                  -
                    path: d_demo/demo_logo1.svg
                    alt: BTU
              field_d_cta_link:
                type: cta
                data:
                  link: 'internal:/documentation/carousel-paragraph'
                  text: BTU
            -
              field_d_media_icon:
                type: media_image
                directory: demo
                files:
                  -
                    path: d_demo/demo_logo2.svg
                    alt: 'Cube Inc.'
              field_d_cta_link:
                type: cta
                data:
                  link: 'internal:/documentation/carousel-paragraph'
                  text: 'Cube Inc.'
            -
              field_d_media_icon:
                type: media_image
                directory: demo
                files:
                  -
                    path: d_demo/demo_logo3.svg
                    alt: 'Atlantic Jetlines'
              field_d_cta_link:
                type: cta
                data:
                  link: 'internal:/documentation/carousel-paragraph'
                  text: 'Atlantic Jetlines'
            -
              field_d_media_icon:
                type: media_image
                directory: demo
                files:
                  -
                    path: d_demo/demo_logo4.svg
                    alt: 'Rock World Cafe'
              field_d_cta_link:
                type: cta
                data:
                  link: 'internal:/documentation/carousel-paragraph'
                  text: 'Rock World Cafe'
            -
              field_d_media_icon:
                type: media_image
                directory: demo
                files:
                  -
                    path: d_demo/demo_logo5.svg
                    alt: YETI
              field_d_cta_link:
                type: cta
                data:
                  link: 'internal:/documentation/carousel-paragraph'
                  text: YETI
            -
              field_d_media_icon:
                type: media_image
                directory: demo
                files:
                  -
                    path: d_demo/demo_droopler.svg
                    alt: Droopler
              field_d_cta_link:
                type: cta
                data:
                  link: 'internal:/documentation/carousel-paragraph'
                  text: Droopler
        field_d_settings:
          type: field_p_configuration_storage
          custom_class: logos-example theme-default padding-top-default padding-bottom-default margin-top-default margin-bottom-default
          column_count: 4
    -
      paragraph_type: d_p_text_paged
      data:
        field_d_main_title:
          type: text
          data: 'Opinions Example'
        field_d_long_text:
          type: text_long
          data: '<p>Does only one item in the Carousel make sense at all? Of course! With one piece of content visible at the time, you can build a list of testimonials. The image field serves as a person''s photo, and the description field holds the opinion.</p>'
        field_d_settings:
          type: field_p_configuration_storage
          custom_class: theme-gray padding-top-default padding-bottom-default margin-top-default margin-bottom-default
    -
      paragraph_type: d_p_carousel
      data:
        field_d_main_title:
          type: text
          data: 'Main Title'
        field_d_p_cs_item_reference:
          type: paragraph_reference
          subtype: d_p_carousel_item
          data:
            -
              field_d_media_icon:
                type: media_image
                directory: demo
                files:
                  -
                    path: d_demo/d_demo_face_1.png
                    alt: 'John Smith'
              field_d_main_title:
                type: text
                data: 'John Smith, CEO of Cube Inc.'
              field_d_long_text:
                type: text_long
                data: '<p><em>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam cursus tristique dui dignissim gravida. Aenean feugiat dui sit amet condimentum volutpat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat.</em></p>'
            -
              field_d_media_icon:
                type: media_image
                directory: demo
                files:
                  -
                    path: d_demo/d_demo_face_2.png
                    alt: 'Anna Novak'
              field_d_main_title:
                type: text
                data: 'Anna Novak, Chief Architect of BTU'
              field_d_long_text:
                type: text_long
                data: '<p><em>Cras malesuada fermentum felis at vulputate. In commodo nunc sed mi placerat eleifend. Morbi maximus, enim at sagittis lobortis, ante quam pulvinar nulla, vel gravida diam magna mi. Nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt.</em></p>'
        field_d_settings:
          type: field_p_configuration_storage
          custom_class: opinions-example theme-default padding-top-default padding-bottom-default margin-top-default margin-bottom-default
          column_count: 1
    -
      paragraph_type: d_p_text_paged
      data:
        field_d_main_title:
          type: text
          data: 'Columns Example'
        field_d_long_text:
          type: text_long
          data: '<p>What if you want four columns in the row in a carousel with precisely four items? There would be nothing to slide! Droopler is prepared for such edge cases. It automatically decreases column count to show a list as a slider. Look at the example below. There are four items in four columns, automatically fitted into three columns.</p>'
        field_d_settings:
          type: field_p_configuration_storage
          custom_class: theme-gray padding-top-default padding-bottom-default margin-top-default margin-bottom-default
    -
      paragraph_type: d_p_carousel
      data:
        field_d_media_icon:
          type: media_image
          directory: demo
          files:
            -
              path: d_demo/demo_droopler.svg
              alt: 'Droopler icon'
        field_d_main_title:
          type: text
          data: 'Main Title'
        field_d_long_text:
          type: text_long
          data: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam cursus tristique dui dignissim gravida. Duis tristique sem non interdum ultricies. Nunc vitae viverra lacus. Vivamus vel mollis nisi. Sed ut fermentum lorem. Vestibulum non accumsan eros, sit amet tempus ex.</p>'
        field_d_p_cs_item_reference:
          type: paragraph_reference
          subtype: d_p_carousel_item
          data:
            -
              field_d_media_icon:
                type: media_image
                directory: demo
                files:
                  -
                    path: d_demo/d_demo_icon_car.svg
                    alt: 'Car icon'
              field_d_main_title:
                type: text
                data: 'Lorem Ipsum'
              field_d_long_text:
                type: text_long
                data: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam cursus tristique dui dignissim gravida.</p>'
              field_d_cta_link:
                type: cta
                data:
                  link: 'internal:/documentation/carousel-paragraph'
                  text: Car
            -
              field_d_media_icon:
                type: media_image
                directory: demo
                files:
                  -
                    path: d_demo/d_demo_icon_boat.svg
                    alt: 'Boat icon'
              field_d_main_title:
                type: text
                data: 'Dolor Amet'
              field_d_long_text:
                type: text_long
                data: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam cursus tristique dui dignissim gravida.</p>'
              field_d_cta_link:
                type: cta
                data:
                  link: 'internal:/documentation/carousel-paragraph'
                  text: Boat
            -
              field_d_media_icon:
                type: media_image
                directory: demo
                files:
                  -
                    path: d_demo/d_demo_icon_cog.svg
                    alt: 'Settings icon'
              field_d_main_title:
                type: text
                data: 'Lorem Ipsum'
              field_d_long_text:
                type: text_long
                data: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam cursus tristique dui dignissim gravida.</p>'
              field_d_cta_link:
                type: cta
                data:
                  link: 'internal:/documentation/carousel-paragraph'
                  text: Settings
            -
              field_d_media_icon:
                type: media_image
                directory: demo
                files:
                  -
                    path: d_demo/d_demo_icon_bag.svg
                    alt: 'Bag icon'
              field_d_main_title:
                type: text
                data: 'Dolor Amet'
              field_d_long_text:
                type: text_long
                data: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam cursus tristique dui dignissim gravida.</p>'
              field_d_cta_link:
                type: cta
                data:
                  link: 'internal:/documentation/carousel-paragraph'
                  text: Bag
            -
              field_d_media_icon:
                type: media_image
                directory: demo
                files:
                  -
                    path: d_demo/d_demo_icon_contact.svg
                    alt: 'Telephone icon'
              field_d_main_title:
                type: text
                data: 'Lorem Ipsum'
              field_d_long_text:
                type: text_long
                data: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam cursus tristique dui dignissim gravida.</p>'
              field_d_cta_link:
                type: cta
                data:
                  link: 'internal:/documentation/carousel-paragraph'
                  text: Telephone
        field_d_settings:
          type: field_p_configuration_storage
          custom_class: columns-example theme-default padding-top-default padding-bottom-default margin-top-default margin-bottom-default
          column_count: 4
    -
      paragraph_type: d_p_text_paged
      data:
        field_d_main_title:
          type: text
          data: 'Full Width With Divider Example'
        field_d_long_text:
          type: text_long
          data: '<p>Choose the "With dividers" option to add a vertical border to all items. The background becomes dark, the text is white now. Choose the "Full width" option to span the paragraph 100% width.</p>'
        field_d_settings:
          type: field_p_configuration_storage
          custom_class: theme-gray padding-top-default padding-bottom-default margin-top-default margin-bottom-default
    -
      paragraph_type: d_p_carousel
      data:
        field_d_media_icon:
          type: media_image
          directory: demo
          files:
            -
              path: d_demo/demo_droopler.svg
              alt: 'Droopler icon'
        field_d_main_title:
          type: text
          data: 'Main Title'
        field_d_long_text:
          type: text_long
          data: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam cursus tristique dui dignissim gravida. Duis tristique sem non interdum ultricies. Nunc vitae viverra lacus. Vivamus vel mollis nisi. Sed ut fermentum lorem. Vestibulum non accumsan eros, sit amet tempus ex.</p>'
        field_d_settings:
          type: field_p_configuration_storage
          custom_class: full-width with-divider full-width-example theme-default padding-top-default padding-bottom-default margin-top-default margin-bottom-default
          column_count: 3
        field_d_p_cs_item_reference:
          type: paragraph_reference
          subtype: d_p_carousel_item
          data:
            -
              field_d_media_icon:
                type: media_image
                directory: demo
                files:
                  -
                    path: d_demo/d_demo_icon_car.svg
                    alt: 'Car icon'
              field_d_main_title:
                type: text
                data: 'Lorem Ipsum'
              field_d_long_text:
                type: text_long
                data: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam cursus tristique dui dignissim gravida.</p>'
              field_d_cta_link:
                type: cta
                data:
                  link: 'internal:/documentation/carousel-paragraph'
                  text: Car
            -
              field_d_media_icon:
                type: media_image
                directory: demo
                files:
                  -
                    path: d_demo/d_demo_icon_boat.svg
                    alt: 'Boat icon'
              field_d_main_title:
                type: text
                data: 'Dolor Amet'
              field_d_long_text:
                type: text_long
                data: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam cursus tristique dui dignissim gravida.</p>'
              field_d_cta_link:
                type: cta
                data:
                  link: 'internal:/documentation/carousel-paragraph'
                  text: Boat
            -
              field_d_media_icon:
                type: media_image
                directory: demo
                files:
                  -
                    path: d_demo/d_demo_icon_cog.svg
                    alt: 'Settings icon'
              field_d_main_title:
                type: text
                data: 'Lorem Ipsum'
              field_d_long_text:
                type: text_long
                data: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam cursus tristique dui dignissim gravida.</p>'
              field_d_cta_link:
                type: cta
                data:
                  link: 'internal:/documentation/carousel-paragraph'
                  text: Settings
            -
              field_d_media_icon:
                type: media_image
                directory: demo
                files:
                  -
                    path: d_demo/d_demo_icon_bag.svg
                    alt: 'Bag icon'
              field_d_main_title:
                type: text
                data: 'Dolor Amet'
              field_d_long_text:
                type: text_long
                data: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam cursus tristique dui dignissim gravida.</p>'
              field_d_cta_link:
                type: cta
                data:
                  link: 'internal:/documentation/carousel-paragraph'
                  text: Bag
            -
              field_d_media_icon:
                type: media_image
                directory: demo
                files:
                  -
                    path: d_demo/d_demo_icon_contact.svg
                    alt: 'Telephone icon'
              field_d_main_title:
                type: text
                data: 'Lorem Ipsum'
              field_d_long_text:
                type: text_long
                data: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam cursus tristique dui dignissim gravida.</p>'
              field_d_cta_link:
                type: cta
                data:
                  link: 'internal:/documentation/carousel-paragraph'
                  text: Telephone
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.'
