info:
  type: content_page
  title: 'Banner Paragraph'
  path:
    alias: /documentation/banner-paragraph
    pathauto: 0
field_page_section:
  paragraphs:
    -
      paragraph_type: d_p_text_paged
      data:
        field_d_main_title:
          type: text
          data: 'Banner 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 version of the Banner Paragraph includes everything literally. There is the main title with a smaller subtitle, an SVG icon above, some longer body text and a big CTA button. The image below adapts to the screen thanks to Backstretch JS library. This paragraph looks excellent when used as a first one, directly below site navigation.</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_banner
      data:
        field_d_media_icon:
          type: media_image
          directory: demo
          files:
            -
              path: d_demo/demo_droopler_white.svg
        field_d_media_background:
          type: media_image
          directory: demo
          files:
            -
              path: d_demo/d_demo_car_engine_centurion.jpg
              alt: Portfolio
        field_d_main_title:
          type: text
          data: 'Main Title'
        field_d_subtitle:
          type: text
          data: Subtitle
        field_d_long_text:
          type: text_long
          data: '<p class="text-align-center">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_cta_link:
          type: cta
          data:
            link: 'internal:/documentation/banner-paragraph'
            text: 'Call To Action!'
        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
    -
      paragraph_type: d_p_text_paged
      data:
        field_d_main_title:
          type: text
          data: 'Basic Example'
        field_d_long_text:
          type: text_long
          data: '<p>Do you prefer minimalism over complexity? Remember that only header and image fields are mandatory. You can drop all those icons, subtitles, long texts and CTAs. Sticking to a straightforward version is ok. It still looks nice.</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_banner
      data:
        field_d_media_background:
          type: media_image
          directory: demo
          files:
            -
              path: d_demo/d_demo_car_engine_contact.jpg
              alt: Event
        field_d_main_title:
          type: text
          data: 'Main Title'
        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
    -
      paragraph_type: d_p_text_paged
      data:
        field_d_main_title:
          type: text
          data: 'Half-transparent Example:'
        field_d_long_text:
          type: text_long
          data: '<p>You can alter the banner entirely by applying a "half-transparent" option. It adds an overlay over the image and pulls the text into the left side. An additional "theme invert" option makes the text black.</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_banner
      data:
        field_d_main_title:
          type: text
          data: 'Main Title'
        field_d_subtitle:
          type: text
          data: Subtitle
        field_d_media_background:
          type: media_image
          directory: demo
          files:
            -
              path: d_demo/d_demo_architecture2.jpg
              alt: Motor
        field_d_long_text:
          type: text_long
          data: '<p class="text-align-center">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_cta_link:
          type: cta
          data:
            link: 'internal:/documentation/banner-paragraph'
            text: 'Call To Action!'
        field_d_settings:
          type: field_p_configuration_storage
          custom_class: half-transparent theme-default padding-top-default padding-bottom-default margin-top-default margin-bottom-default
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.'
