Biotope is an ecosystem to build state of the art websites with an approved UI look and feel. It provides ready-to-use layouts, design and functionaliy and incorporates many proven practices used to build excellent websites. It has an adaptive / responsive design, is build mobile first and while it makes use of modern browser's capabilities, it also works on browsers such as Internet Explorer 11.

Browser Matrix

layout

Default Layout (SOFT)

Grid demo with all kinds of background and grid combinations and SOFT header

Default Layout (WEB)

Grid demo with all kinds of background and grid combinations and WEB header & footer

elements

Buttons

All buttons and variations as html elements

Text Elements

Headlines H1, H2, H3 and basic text element as html

Components

Accordion

(from WEB) Accordion with collapsible tabs

Action Menu

(from SOFT) Dropdown menu triggered on click on an icon to use in different context

Arrow Link

(from WEB) To extend multiple components with a view all / show all link

Article Tile

(from WEB) Overview of different articles with images, optional links and load more button

Back to Page

(from WEB) link to simulate browser's back button

Breadcrumb

(from WEB) Breadcrumb showing the structure of the page's ancestors

Buttons

(from SOFT) Buttons in different styles

Checkbox

Checkbox input

Configurator

Configurator from Siedle.de

Content Box

(from SOFT) Box with colored background that displays content inside of it

Download List

(from WEB) List of downloadable files with title and text

Dropdown

(from SOFT) Input with dropdown menu on click

Filtered Select

(from SOFT) Special input field with a dropdown depending on the given input (withautosuggest functionality)

Flyout

(from WEB) displays a flyout

Form Contact

(from WEB) displays a contact form

Form Newsletter

(from WEB) displays a newsletter form

Form Newsletter Unsubscribe

(from WEB) displays a unsubscribe newsletter form

Form Order Brochure

(from WEB) displays an order brochure form

Image Slider

(from WEB) Slider with only (min. 3) images using a variation of the standard slider component

In-page Navigation

(FROM WEB) A small collection of jumpmarks to navigate through a page

Inputs

(from SOFT) Input component with variable types for forms or standalone

Lead Text

(from WEB) Text with optional headline

List

(from WEB ) Contains headline, text and a list. list items with mandatory title, text and optional date and link

Navigation Header

(from WEB) Combination of WebHeader and Navigation

Notification

(from WEB) display notifications with short amount of text and a dismiss button

OffCanvas

(from WEB) An off-canvas menu that can be toggled

Page Introduction

(from WEB) combining two slotted components into an introduction

Primary CTA

(from WEB) Box with icon, text and a conversion button

Product Categories

Product Categories component

Product Detail

Product detail component

Radio

(from WEB) Radio input

Routing Teaser

(from WEB) Teasers for Products

Search Filter Dealer (Fachhändler)

(from WEB) Component to filter results based on some search criteria

Search Filter Housing (Berater Wohnungswirtschaft)

(from WEB) Component to filter results based on some search criteria

Search Filter Partner (Access-Partner)

(from WEB) Component to filter results based on some search criteria

Search Filter Sales (Kundendienst)

(from WEB) Component to filter results based on some search criteria

Search Filter Service (Außendienst und Service-Partner)

(from WEB) Component to filter results based on some search criteria

Secondary CTA

(from WEB) Text with included optional links and conversion buttons

Slider

(from WEB) Slider with images and other content

Stage

(from WEB) Stage with image and headlines

Status Label

(from WEB) Display the status of an offer

Tab Container

(from WEB) Tab container with tabs

Table

Table with selectable rows, can be used to select templates

Teaser Tile

A teaser tile component with sub-grid

Teaser Row

(from WEB) Contains max 9 row items with headline, text, link

Text List

(from WEB) A list with multiple list items and different bullet icons

Text Media Inline

(from WEB) Component with headline(s), text and image

Textarea

(from SOFT) Textarea element that converts into static text when readonly is set to true

WebOnlyComponents

Cookie Banner

Banner for the user to approve the use of cookies

Footer

Footer with different kinds of links and information

Header

Header with logo

SoftOnlyComponents

Actionbar

Component with right aligned buttons that appears after an action was taken, for example editing a form

Lock Screen

Page overlay with loading spinner

Offer Header

Header with information about the offer and several buttons

Sidebar Modal

A container to display content that will enter the viewport from the side

Spinner

Loading indicator with a spinner animation and information about what is loaded

Template Filter

Filter with dropdowns and a search to filter templates

Demo

Demo for Offer Detail Page

Demo to see how the components are arranged with each other

Demo for Offer Template Page

Demo to see how the components are arranged with each other

SiedleIQ

Bubble

Bubble component.

Card

Card component, can take an image attribute and become a responsive image card or take headline, bubble, button, text (sloted).

Content With Features

Image content with feature list

Dark Background

Dark background wrapper component.

Feature List

List of product features with check mark on left side

Feature Teasers

3 Column feature teasers with icons/images

Headline

(new IQ Design) Headline with optional subline and align 'left'(default), 'right', 'center'.

Hero Banner

Hero banner component.

Info Block

Info block with image and text content

Offer Call to Action

Product offer with cost & cta button

Security Features

3 Column layout with lock badge and content

Two Column Text

Rich text in two columns

Wizard

Wizard :O

Wizard File Upload

Wizard File Upload

Wizard Radio Tile

Wizard radio tile