Pre-built Library

Apart from the usual elements in the Elements Panel, Droip also has a Pre-Built Library with a collection of more advanced pre-defined Elements and Sections

To access them, head over to the Pre-built Library which you can access from the Elements tab on the Topbar.


Below is a list of all of the Pre-Built Elements that you can use and the options available for each category.


As you know, buttons play a significant role on a webpage such as letting users submit a form, functioning as CTAs for users to take that last step, helping users maneuver the website, and more. 

For that reason, sometimes you may need a bit more functionality from a button that a basic one can’t provide. So, here are a few advanced alternatives for the Button Element. Options include:

  • Button Fill: Button filled with a solid background.
  • Button Outline: Button with only an outline and no background fill.
  • Button Split: Button split into an action button and a dropdown toggle.
  • Button Icon: Button with no text and only an icon.
  • Button With Icon: Button with text and icon.
  • Button Action: Button with text and icon but no background fill or outline.
  • Button Link: Button with only link text.


Use Checkboxes to take multiple inputs from a list of options. Do note that you must add this element inside a Form element for it to appear.


Use Radio buttons to take single input from a list of options. Do note that you must add this element inside a Form element for it to appear.


Ratings are a way for users to rank a product or service based on their experience to provide information for others to see. Incorporating a Rating and Review system is a great idea if you need to boost credibility.

Listed below are the variations of the Rating element offered that you can choose from!

  • Rating Stars
  • Rating Half-Stars
  • Rating Octagones
  • Rating Half-Octagones
  • Rating Emoji

Search Boxes

Search is another must-have element that you may need to include as helps users easily find what they’re looking for. Here we have 3 different styles of Search options:

  • Search Box: Simple Search Box.
  • Search with Button: Search Box with an icon button.
  • Search Underlined: Search Box in an outline style.


A Stepper is a nifty input control that can be used to input numbers. This control consists of two parts – one button to increment and one to decrement the value along with its preview. Below is a list of the Stepper styles available:

  • Stepper Basic: Value is displayed on the left and increment and decrement buttons are stacked up on the right.
  • Stepper Horizontal: Buttons on either side with the value displayed in the middle. 
  • Stepper Vertical: Buttons on the top and bottom with the value displayed in the middle.

Text Fields

Text Fields are a classic input control that you’ll need for any form. Here you’ll find a few more advanced versions of the element to further enhance your webpage.

  • Text Field Basic: A basic Text Field you can use in any form for data input.
  • Text Field with Adjusting Height: With this Text Field, if there is more content than there is space for, automatically more space will be added vertically but with a scroll so the real height of the element remains unchanged.

Detail List

The Detail List Element is basically a pre-made data table and is the perfect choice for displaying a lot of information in a neat and simple way. Styles available are the following:

  • Detail List One: Simple and neat styled table.
  • Detail List Two: Table with grid lines.
  • Detail List Three: Table with alternating colored rows.


The Tab Pre-Built Element offers you a few more variations on your usual Tab element like the following:

  • Tab One: Tab with Tab Menu on top of the Tab Pane.
  • Tab Two: Tab with Tab Menu on the bottom of the Tab Pane.
  • Tab Three: Tab with Tab Menu on the left of the Tab Pane.
  • Tab Four: Tab with Tab Menu on the right of the Tab Pane.

Teaching Bubble

A Teaching Bubble is a kind of tooltip element that consists of a button and a speech bubble. Within that speech bubble is a heading, text description, and a pair of Yes and No buttons.

Clicking on the button should make the bubble appear and clicking on the Yes/No buttons should make the bubble disappear.

Options include:

  • Teaching Bubble Left: Teaching Bubble with a button on the left and bubble on the right.
  • Teaching Bubble Top: Teaching Bubble with button at the top and bubble below.


Callouts are similar to Teaching Bubbles but the Yes and No buttons are instead replaced with a Link. Clicking on the button will make the bubble appear and clicking on it again should make it disappear.


A Dialogue box is a pop-up like element with a message and two CTA options.


You can create custom Pop-ups using our Pop-up Builder but also use the following templates to speed up the design process. Options include:

  • Modal With X Button
  • Modal Sign In
  • Modal Newsletter
  • Modal Success Message


Tooltips are helpful messages for users that should appear on Hover. For this, we have the following variations:

  • Tooltip Top
  • Tooltip Bottom
  • Tooltip Left
  • Tooltip Right


Alerts are warning message templates and available are the following types:

  • Alert: Simple Alert message.
  • Alert with CTA: Alert message with Call to Action Buttons.

Avatar Group

An Avatar Group is basically a grouping of User Avatars and you can choose between the following styles:

  • Avatar Group Circle: Avatar Group with circular images.
  • Avatar Group Square: Avatar Group with square images.


Cards are a great way to display a group of related content on a page. You can use these on a feature list page, a product archive page, and more.

  • Card Basic: Basic Card with a heading and a description text.
  • Card Button: Card with a heading, description, and a call to action button.
  • Card Icon: Card with a heading, description, icon, and a call to action button. 
  • Card Image Button: Card with a heading, description, image, and a call to action button.


Notifications are small dialog boxes that can be used to notify users about something.

  • Notification Inline: Consists of a heading and a button all arranged inline.
  • Notification Text: Consists of a heading and some text with an x icon on the top-right.


Sections of Droip

Next up we have Pre-Built Sections which you can access by clicking on its icon on the from the Pre-built Library.

Here, you’ll find a plethora of ready-made sections that you can use to speed up your design process and you can also fully customize them to match your preferences using the settings in the Style Panel.

Was this article helpful?

Our website uses cookies to improve your browsing experience on our website. By continuing to use this website, you agree to their use. For details, please check our Privacy Policy.