Skip to main content

Banner Paragraph

Droopler Documentation

Full Example

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.

Car Engine Centurion

Main Title

Subtitle

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.

Basic Example

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.

Contact

Main Title

Half-transparent Example:

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.

Architecture

Main Title

Subtitle

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.