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.

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.

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.

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.

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:

This paragraph is a typical component of every company website. You can use it to list some features or present a list of guest/sponsors at your event. Each item gets its title, icon, description and CTA button. So many possibilities!

Here you can see a simpler version of Text Blocks Paragraph. There are no icons or CTAs. It looks clean. Have you noticed an increased number of columns? With Droopler you can choose how many columns you want to have in one row (1-12).

Choose the "Invert theme" option to invert all paragraph colors. The background becomes dark, the text is white now. Choose the "Full width" option to span the paragraph 100% width.

This paragraph accepts not only text blocks. You can put a node inside it. Check the "Enable grid" option to put everything into a grid.

You can convert all paragraph items to clickable tiles with an image background. In this example, we enabled the "Paragraph header in two columns" option.

With Droopler you can put almost every form into a Paragraph. Such form has a modern, Bootstrap 4 layout and an image background. You can also add some title and an optional icon. See the example below.

You can choose an alternative layout for the form. Try changing the layout from "Bottom" to "Right". The title and description will go to the left column and the form itself will go to the right..

There are times, creating pages using paragraphs, we need to embed a block with views result, or some custom block. In that kind of situation with help comes Block Paragraph. You can use it to embed any block that can be placed in the Block Layout, so it gives us quite a lot of possibilities.

Below we have an example of embedding a block with Social Icons - the same block is also placed in our footer, just the title of the block is overwritten here.

Quite often you probably noticed, that there is a common content shared between multiple subpages. Let's think for example of "Our Partners" section or "Contact us" banner. Instead of adding identical paragraphs over again, you could create Content Block with that paragraph and embed it in all pages using Block Paragraph like we did bellow.

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.

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.

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.

Header 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel euismod mauris. Bold Text - Vestibulum rutrum augue mauris, eu lacinia libero volutpat ac. Vivamus maximus quam et libero accumsan ultricies. Sed eget ipsum mauris. Integer id hendrerit tellus, quis venenatis lacus. Fusce vel turpis sit amet quam malesuada consectetur. Nulla maximus porta bibendum. Mauris ut imperdiet ex, vitae aliquam mi. Proin vitae dignissim quam. Italic text - Ut vitae urna egestas, laoreet libero sed, consequat mi. Nunc tincidunt elit elit, eu sodales sapien hendrerit quis. Bold Italic Text - Aenean ut euismod felis, quis placerat arcu. Praesent viverra imperdiet nulla, eu tempor orci malesuada quis. Cras porttitor ante enim, vel ornare neque imperdiet a.

Header 2

Nulla facilisi. Underlined fragment - Nunc aliquam elementum nisl, vel venenatis ante ornare eget. Vivamus pulvinar, ante ut posuere hendrerit, arcu magna maximus leo, vitae blandit nisi tellus ut justo. Ut sit amet ornare tortor, a vestibulum neque. Fusce varius elementum dolor, vitae sagittis neque. In finibus arcu ac justo cursus commodo. Vestibulum est magna, condimentum sit amet purus et, pretium pellentesque elit. Nulla hendrerit enim ut risus euismod aliquam ultricies nec tellus. Morbi non leo id ante viverra eleifend eu non purus. Curabitur hendrerit tortor nec rutrum semper. Striked out fragment - Sed cursus enim eget massa mollis euismod sit amet quis risus. Fusce scelerisque ultricies sapien, vitae laoreet enim egestas eu. Horizontal line:

Nulla facilisi. Underlined fragment - Nunc aliquam elementum nisl, vel venenatis ante ornare eget. Vivamus pulvinar, ante ut posuere hendrerit, arcu magna maximus leo, vitae blandit nisi tellus ut justo.

Header 3

Donec commodo felis lorem, in hendrerit orci superscript ahead - scelerisque^superscript eget. Sed mattis elit nibh, et posuere mi aliquam nec. Vivamus pellentesque dictum ligula, at imperdiet augue dapibus id. Etiam ligula quam, semper nec turpis eget, tristique imperdiet sapien. Subscript ahead -  pellentesque_subscript porttitor nulla quis felis eleifend, non venenatis erat faucibus. Sed aliquet vitae enim quis aliquet. Suspendisse potenti. Nam justo mi, scelerisque eleifend volutpat quis, fringilla vitae velit. Nulla interdum ornare est, fringilla dapibus lacus sollicitudin vulputate.

Header 4

Align left - Nam nec nunc eu lacus ultricies aliquet ac et dui. Proin ultricies metus ac consectetur faucibus. Phasellus non dictum turpis. Praesent lobortis mattis mauris, eu condimentum ex fermentum vestibulum. Ut a lobortis sem. Aenean vel elementum nibh. Vestibulum et lacus convallis, semper eros eu, eleifend risus. Cras tincidunt vehicula scelerisque.

Align center - Nam nec nunc eu lacus ultricies aliquet ac et dui. Proin ultricies metus ac consectetur faucibus. Phasellus non dictum turpis. Praesent lobortis mattis mauris, eu condimentum ex fermentum vestibulum. Ut a lobortis sem. Aenean vel elementum nibh. Vestibulum et lacus convallis, semper eros eu, eleifend risus. Cras tincidunt vehicula scelerisque.

Align right - Nam nec nunc eu lacus ultricies aliquet ac et dui. Proin ultricies metus ac consectetur faucibus. Phasellus non dictum turpis. Praesent lobortis mattis mauris, eu condimentum ex fermentum vestibulum. Ut a lobortis sem. Aenean vel elementum nibh. Vestibulum et lacus convallis, semper eros eu, eleifend risus. Cras tincidunt vehicula scelerisque.

Justify - Nam nec nunc eu lacus ultricies aliquet ac et dui. Proin ultricies metus ac consectetur faucibus. Phasellus non dictum turpis. Praesent lobortis mattis mauris, eu condimentum ex fermentum vestibulum. Ut a lobortis sem. Aenean vel elementum nibh. Vestibulum et lacus convallis, semper eros eu, eleifend risus. Cras tincidunt vehicula scelerisque.

Header 5 (Hyperlinks and Tables)

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum id tempor lorem. Proin finibus ut urna sed congue. Sed sagittis dolor ac justo aliquam tempus. Proin interdum dignissim posuere. Nullam nisl felis, volutpat in faucibus congue, viverra egestas justo. Morbi non suscipit elit, at vulputate magna. Nunc pharetra metus mauris, ac semper nunc volutpat nec. Sed accumsan sapien dignissim felis fringilla condimentum.

Header 6 (Lists)

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec ipsum sem, vestibulum vel pretium ut, fringilla eget sapien. Cras eu nulla in eros scelerisque pretium sagittis a ex. Duis rhoncus sollicitudin orci et tempus. Aliquam erat volutpat. Etiam maximus odio id odio gravida maximus:

• Aenean gravida vestibulum condimentum.
• Quisque eget eros ut arcu tincidunt pharetra.
• Nulla laoreet, nulla vel convallis commodo, massa mi cursus ipsum, et consectetur odio risus non magna. Morbi sit amet augue a nisl hendrerit rhoncus. Praesent sagittis erat et tristique iaculis.
• Sed viverra pulvinar justo, eget ullamcorper elit scelerisque quis. Pellentesque id lectus sollicitudin, interdum augue nec, ullamcorper enim. Quisque et laoreet lorem, vitae tristique leo.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec ipsum sem, vestibulum vel pretium ut, fringilla eget sapien. Cras eu nulla in eros scelerisque pretium sagittis a ex. Duis rhoncus sollicitudin orci et tempus. Aliquam erat volutpat. Etiam maximus odio id odio gravida maximus:

1. Aenean gravida vestibulum condimentum. Quisque eget eros ut arcu tincidunt pharetra.
2. Nulla laoreet, nulla vel convallis commodo, massa mi cursus ipsum, et consectetur odio risus non magna.
3. Morbi sit amet augue a nisl hendrerit rhoncus.
4. Praesent sagittis erat et tristique iaculis. Sed viverra pulvinar justo, eget ullamcorper elit scelerisque quis. Pellentesque id lectus sollicitudin, interdum augue nec, ullamcorper enim. Quisque et laoreet lorem, vitae tristique leo.

Header 1

Header 2

Header 3

Header 4

Header 5

Header 6

Normal text. Sed suscipit tellus leo. Maecenas facilisis erat non ex rhoncus, eget suscipit est suscipit. Aliquam lobortis, eros vel tristique malesuada, felis lorem lacinia nisl, et laoreet nunc magna eget eros. Nam non tellus eu odio facilisis semper a vitae elit.

Preformatted Text - Nunc sed orci justo. Duis posuere faucibus ipsum, et semper eros pharetra nec. Aenean ac scelerisque orci, ac lobortis orci. Suspendisse facilisis dui ut lectus faucibus, at vestibulum ligula viverra. In pharetra in mauris sit amet suscipit. Nam consequat nunc sed lacus cursus tincidunt. Nullam velit est, laoreet sed turpis vestibulum, rhoncus porta dui. Morbi vel lorem vitae enim blandit fringilla.

Normal text. Nam maximus hendrerit accumsan. Maecenas accumsan maximus condimentum. Suspendisse sit amet mauris massa. Curabitur vehicula dictum tincidunt. Duis sed tellus ac ipsum placerat vestibulum quis vel nunc.

Quote - Maecenas lobortis nulla diam, sed mollis velit maximus eu. Aenean vitae lobortis eros. Donec et convallis magna. Fusce dui sapien, accumsan sit amet lobortis quis, fermentum ut erat. Duis magna orci, convallis sed placerat vitae, efficitur at mi. Morbi venenatis consequat convallis. Phasellus dignissim, elit ac condimentum scelerisque, elit massa efficitur odio, ut congue nisi arcu id ex. Vestibulum id felis tempor, elementum orci sit amet, condimentum leo. Suspendisse sit amet lectus semper.

Normal text. Maecenas lobortis nulla diam, sed mollis velit maximus eu. Aenean vitae lobortis eros. Donec et convallis magna. Fusce dui sapien, accumsan sit amet lobortis quis, fermentum ut erat. Duis magna orci, convallis sed placerat vitae, efficitur at mi.

Alerts

Badges

Heading 1 Primary

Heading 2 Secondary

Heading 3 Success

Heading 4 Danger

Heading 5 Warning

Heading 6 Info

Paragraph Primary Secondary Success Danger Warning Info

Alternate pill-style Primary Secondary Success Danger Warning Info

Breadcrumb

1. Home
2. Library
3. Data

Buttons

Primary Secondary Success Info Warning Danger Light Dark Link

Primary Outline Secondary Outline Success Outline Info Outline Warning Outline Danger Outline Light Outline Dark Outline

Primary Large Primary Normal Primary Small Primary Blocklevel

Danger Large Secondary Normal Success Small Info Blocklevel

Primary O/Large Secondary O/Normal Success O/Small Info O/Blocklevel

Cards

Accordions

Dropdown menu

Jumbotron

List group

• Cras justo odio 14
• Dapibus ac facilisis in 2
• Morbi leo risus 1

Another list group

Modal

Tabs

• Active
• Link
• Disabled
• Dropdown
  Action Another action Something else here

  Separated link

Pagination

• « Previous
• 1 (current)
• 2
• 3
• 4
• 5
• » Next

Popover

Popover on left Popover on top Popover on bottom Popover on right

Progress bars

Tooltips

Tooltip on top Tooltip on right Tooltip on bottom Tooltip on left

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dui libero, congue at pellentesque eu, porta sit amet dui. Sed at gravida nunc. Duis vitae quam metus. Aliquam ut ante at eros imperdiet varius. Curabitur sit amet aliquet leo. Etiam ante orci, tempus quis dapibus non, pulvinar ac est. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer maximus, ligula vel euismod condimentum, metus ligula vulputate erat, quis malesuada metus sapien sit amet arcu.

Integer egestas volutpat lectus vel elementum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque pharetra in dolor eu dictum. Phasellus ultrices, odio vel elementum molestie, justo mi volutpat neque, non porttitor urna dolor id velit. Nunc molestie erat et molestie semper. Nullam sagittis hendrerit sapien vel sagittis. Duis commodo lorem a dolor mattis, faucibus convallis turpis dapibus. Fusce ipsum urna, laoreet ut libero in, ultrices tincidunt lectus. Phasellus sollicitudin libero nec hendrerit ultricies. Proin et interdum lorem, id mollis dui. Vestibulum condimentum sem non bibendum interdum. Sed vitae sodales lectus, vitae tincidunt odio.

Proin a metus nisl. Quisque arcu nisl, consectetur et feugiat non, posuere eget urna. Integer blandit convallis varius. Curabitur diam lorem, consectetur at volutpat eu, gravida quis neque. Fusce tincidunt aliquam lacus, sit amet consequat enim malesuada quis. Etiam eu ullamcorper lacus, eu tempus magna. Donec magna enim, condimentum tristique urna ac, condimentum vehicula ligula. In hac habitasse platea dictumst.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dui libero, congue at pellentesque eu, porta sit amet dui. Sed at gravida nunc. Duis vitae quam metus. Aliquam ut ante at eros imperdiet varius. Curabitur sit amet aliquet leo. Etiam ante orci, tempus quis dapibus non, pulvinar ac est. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer maximus, ligula vel euismod condimentum, metus ligula vulputate erat, quis malesuada metus sapien sit amet arcu.

Integer egestas volutpat lectus vel elementum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque pharetra in dolor eu dictum. Phasellus ultrices, odio vel elementum molestie, justo mi volutpat neque, non porttitor urna dolor id velit. Nunc molestie erat et molestie semper. Nullam sagittis hendrerit sapien vel sagittis. Duis commodo lorem a dolor mattis, faucibus convallis turpis dapibus. Fusce ipsum urna, laoreet ut libero in, ultrices tincidunt lectus. Phasellus sollicitudin libero nec hendrerit ultricies. Proin et interdum lorem, id mollis dui. Vestibulum condimentum sem non bibendum interdum. Sed vitae sodales lectus, vitae tincidunt odio.

Proin a metus nisl. Quisque arcu nisl, consectetur et feugiat non, posuere eget urna. Integer blandit convallis varius. Curabitur diam lorem, consectetur at volutpat eu, gravida quis neque. Fusce tincidunt aliquam lacus, sit amet consequat enim malesuada quis. Etiam eu ullamcorper lacus, eu tempus magna. Donec magna enim, condimentum tristique urna ac, condimentum vehicula ligula. In hac habitasse platea dictumst.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dui libero, congue at pellentesque eu, porta sit amet dui. Sed at gravida nunc. Duis vitae quam metus. Aliquam ut ante at eros imperdiet varius. Curabitur sit amet aliquet leo. Etiam ante orci, tempus quis dapibus non, pulvinar ac est. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer maximus, ligula vel euismod condimentum, metus ligula vulputate erat, quis malesuada metus sapien sit amet arcu.

Integer egestas volutpat lectus vel elementum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque pharetra in dolor eu dictum. Phasellus ultrices, odio vel elementum molestie, justo mi volutpat neque, non porttitor urna dolor id velit. Nunc molestie erat et molestie semper. Nullam sagittis hendrerit sapien vel sagittis. Duis commodo lorem a dolor mattis, faucibus convallis turpis dapibus. Fusce ipsum urna, laoreet ut libero in, ultrices tincidunt lectus. Phasellus sollicitudin libero nec hendrerit ultricies. Proin et interdum lorem, id mollis dui. Vestibulum condimentum sem non bibendum interdum. Sed vitae sodales lectus, vitae tincidunt odio.

Proin a metus nisl. Quisque arcu nisl, consectetur et feugiat non, posuere eget urna. Integer blandit convallis varius. Curabitur diam lorem, consectetur at volutpat eu, gravida quis neque. Fusce tincidunt aliquam lacus, sit amet consequat enim malesuada quis. Etiam eu ullamcorper lacus, eu tempus magna. Donec magna enim, condimentum tristique urna ac, condimentum vehicula ligula. In hac habitasse platea dictumst.