Skip to main content

Text Paragraph

Droopler Documentation

Full Example

The full version of the Text Paragraph looks complex. It has many possibilities. You can extend the content by adding a header, subheader, and icon (including SVG support). You are also able to format the text in any way allowed by CKEditor.

Droopler

Main Title

Subtitle

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.

Basic Example

Sometimes you don't need all the power available for Paragraphs. If you want to create a section with bare text - omit the headers and icon. Adding some formatting is a great idea to make everything more comfortable to read.

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.

Aenean et purus eget sapien laoreet consectetur eu eget leo. Mauris enim felis, pharetra et odio quis, ultricies maximus nunc. Ut ac justo bibendum, commodo elit in, imperdiet lectus. Quisque justo felis, placerat a lacinia sit amet, posuere quis metus. Fusce egestas tincidunt nulla ut faucibus. Sed vehicula libero lectus, et volutpat quam dignissim at. Aliquam erat volutpat. Duis nunc massa, finibus a sapien sit amet, sagittis aliquet est. Etiam eget sapien massa.

Full Example With Background

This paragraph is the same Text Paragraph. There is one, noticeable difference - the background. When you upload an image, Droopler puts a white mask on it to make text easier to read. All font colors are dark to increase the contrast. Look at this full-featured example.

Architecture
Droopler

Main Title

Subtitle

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.

Basic Example With Background

A bare text looks excellent when we display it on an image background. If you choose a right photo with noticeable contrast, the result is very professional. The white mask has high opacity and ensures readability.

Architecture

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.

Aenean et purus eget sapien laoreet consectetur eu eget leo. Mauris enim felis, pharetra et odio quis, ultricies maximus nunc. Ut ac justo bibendum, commodo elit in, imperdiet lectus. Quisque justo felis, placerat a lacinia sit amet, posuere quis metus. Fusce egestas tincidunt nulla ut faucibus. Sed vehicula libero lectus, et volutpat quam dignissim at. Aliquam erat volutpat. Duis nunc massa, finibus a sapien sit amet, sagittis aliquet est. Etiam eget sapien massa.

Aliquam pharetra diam sed nulla tempus interdum. Cras eu elit blandit, ultricies ante at, tincidunt augue. Maecenas vitae condimentum enim, eu venenatis lectus. Aliquam erat volutpat. Nullam consectetur, eros in tristique commodo, massa dolor egestas purus, nec mollis lectus nisl id nisl. Nam et purus hendrerit, molestie odio quis, facilisis nibh. Donec luctus, enim sed posuere ullamcorper, arcu ante gravida turpis, nec maximus tellus ante eu quam. Fusce scelerisque libero sapien, nec suscipit augue elementum ac.