Base
- Accessibility
- Button
- Colors
- Fonts
- Form
- Helper Classes
- Icons
- Lazycontent
- Media
- Mediaqueries
- Pictos
- Richtext
- Social Metatags
- Table
- Text
- Title
Accessibility
Visually hidden
You need a screen reader (or look at the source code) to see anything.
I am only visible for screen reader users
Button
Button (default)
Use for primary action.
Button (with loader)
Button Light
Button White
Button Text
Button with Icon
Icon Positions
Icon Before
Icon
Links styled as buttons
Colors
balihai
black
cararra
claycreek
concrete
goben
gurkha
indiankhaki
pampas
pickledbluewood
prussianblue
red
timberwolf
validation
white
Fonts
Caecilia-Roman
NOPQRSTUVWXYZ
abcdefghijklm
nopqrstuvwxyz
1234567890
Gotham - light
NOPQRSTUVWXYZ
abcdefghijklm
nopqrstuvwxyz
1234567890
Gotham
NOPQRSTUVWXYZ
abcdefghijklm
nopqrstuvwxyz
1234567890
Gotham - bold
NOPQRSTUVWXYZ
abcdefghijklm
nopqrstuvwxyz
1234567890
Form
Exemplary Form
Helper Classes
Contextual Colors
Convey meaning through color with a handful of emphasis utility classes. Used for example in tables.
Badges
Easily highlight items by wrapping them in <span class="badge">.
Alignment
Icons
Easy to use icons
accordion-arrow
arrow-dark-left
arrow-dark-right
arrow-dark-up
arrow-white-down
article-gallery
article-play
backlink-arrow
backlink-arrow-light
backlink-large
bookmark-list
bradcrumb-triangle
chat-large
check-dark
check-green
check-white
checklist-arrow
circle-plus
close-icon
close-menu
comment
comment-active
contact
contact-light
delete-x
document
download
download-blue
download-blue-mobile
dropdown-arrow
edit
external
face-error
face-not-cool
face-success
favorite
favorite-active
favourites
filter
filter-select-double
filter-select-single
footer-facebook
footer-instagram
footer-linkedin
footer-mail
footer-twitter
footer-xing
footer-youtube
forum-archive
forum-archive-active
forum-comment
forum-filter
forum-filter-active
goto
heart
heart-active
hotspot
info
leave
link-arrow-blue
link-arrow-light
link-arrow-light-hover
loader
login
login-locked-mobile
login-mobile
long-link-arrow
long-link-arrow-hover
map-overview
menu
next-arrow
next-arrow-hover
overview
overview-white
pano-mouse
pano-switch
picto-architect
picto-area
picto-buildings
picto-concept
picto-construction
picto-construction-time
picto-cost
picto-date
picto-distance
picto-feature
picto-finance
picto-floor-area
picto-land-area
picto-level
picto-managing
picto-office
picto-order-type
picto-owner
picto-planing
picto-price
picto-project
picto-rooms
picto-size
picto-size-vertical
picto-traffic
picto-type
picto-volume
pin
play
poll-large
previous-arrow
previous-arrow-hover
refresh
room-selector-arrow
search
share
social-facebook
social-linkedin
social-mail
social-twitter
tabnav-map-pin
view-switch
Lazycontent
Attributes
data-lazycontent
URL with Hash that specifies the content to be loaded.
e.g. page.html#mycontent
This will lead into a request for page.html and
the element with the id mycontent will replace the
intitial element.
Note: page-1.html#a and page-1.html#b will lead to only one request,
prioritised by the highest given priority.
data-lazycontent-priority
Content will be queued and sorted by priority. The lower the number, the higher the priority.
Default: 100
data-lazycontent-mode
If set to visibility the content will only be loaded (or rather put
into the loading queue) once it becomes visible.
height
Please define a default height for the container that's as close as possible to the expected content's height.
Example
Visibility
Media
with lightbox
with lightbox as gallery
Mediaqueries
desktop
tablet
tablet-portrait
mobile
mobile-portrait
js
Pictos
Easy to use svg pictos
Raw and uncolored
Richtext
Nihil accusantium omnis nihil et et et in ad omnis totam. incidunt molestiae ullam hic voluptatem et et nisi sed natus praesentium et exercitationem aliquid. suscipit occaecati est quia odit laboriosam nam quis. officiis sapiente eos ipsum voluptates ab enim accusantium repellendus occaecati quis nulla cumque
Quo velit ut laborum alias error iure vel deserunt rerum laboriosam sit ea. rerum iure id quidem praesentium ut numquam iure perferendis iusto dolorem. excepturi cumque error ab alias
I am Strong
I am a Link
- Accusantium praesentium sed nihil voluptas iusto
- Et est rem quia eos
- Fugit ducimus accusamus rerum nihil accusantium omnis nihil et et et .Ad omnis totam aut incidunt molestiae ullam hic voluptatem et et nisi sed
- Praesentium et exercitationem aliquid earum suscipit occaecati est .Odit laboriosam nam quis dolores officiis sapiente eos ipsum voluptates
- Enim accusantium repellendus occaecati quis nulla cumque quia consequatur quo velit ut
- Alias error iure vel deserunt
- Laboriosam sit ea iusto rerum iure id quidem praesentium ut numquam iure perferendis iusto
- Incidunt excepturi cumque error ab alias autem accusantium praesentium sed
- Voluptas iusto totam et .Rem quia eos aut fugit ducimus. Rerum nihil accusantium omnis nihil et. Et in ad omnis totam aut incidunt
Social Metatags
Description
A great website
Host
https://alfred-mueller.ch
Image
?
Twitter Handle
@alfredmuellerag
Language
en
Table
| Are | Cool | |
|---|---|---|
| col 1 is | Are Text can be really long and also left-aligned. But we will make sure everything looks alright. | Cool CHF 1'600 |
| Column2hastobeonewordToMakeItReallyReallyLong | Are centered | Cool $12'000'000 |
| col 3 is | Are right-aligned | Cool $1 |
Table - Compact
| Are | Cool | |
|---|---|---|
| col 1 is | Are Text can be really long and also left-aligned. But we will make sure everything looks alright. | Cool CHF 1'600 |
| Column2hastobeonewordToMakeItReallyReallyLong | Are centered | Cool $12'000'000 |
| col 3 is | Are right-aligned | Cool $1 |
Table - Minimal
| Are | Cool | |
|---|---|---|
| col 1 is | Are Text can be really long and also left-aligned. But we will make sure everything looks alright. | Cool CHF 1'600 |
| Column2hastobeonewordToMakeItReallyReallyLong | Are centered | Cool $12'000'000 |
| col 3 is | Are right-aligned | Cool $1 |