Stilguide

Version 1.1

Typografi

HTML-rubriker

Rubrik 1

Rubrik 2

Rubrik 3

Rubrik 4

Rubrik 5

Rubrik 6

Rubrik Klasser

rubrik-xxlarge

rubrik-xlarge

rubrik - stor

rubrik-medium

rubrik- liten

rubrik-xsmall

Andra HTML-taggar

Alla stycken (HTML Tag)A Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Alla länkar

Block citat

Ingen punktlista
Ingen punktlista

Ingen punktlista
Ingen punktlista

Ingen punktlista
Ingen punktlista
Ingen punktlista

Textstorlekar

A Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Textvikter

text-weight-xbold

text-weight-bold

text-weight-semibold

text-weight-medium

text-weight-normal

text-weight-light

Textformat

text-style-italic

text-style-strikethrough

text-style-allcaps

text-style-nowrap

text-style-quote

text-style-link

text-stil-2 rader

text-stil-3 rader

text-style-muted

Textfärger

text-color-black

text-color-white

Textjustering

text-align-left

text-align-center

text-align-right

Rik text

Rubrik 1

Rubrik 2

Rubrik 3

Rubrik 4

Rubrik 5

Rubrik 6

Detta är ett blockcitat

Med rich text-elementet kan du skapa och formatera rubriker, stycken, citat, bilder och video på ett och samma ställe i stället för att behöva lägga till och formatera dem individuellt. Dubbelklicka bara och skapa enkelt innehåll.

Det här är en länk i en rik text

Lista objekt
Lista objekt
Lista objekt

Lista objekt
Lista objekt
Lista objekt

UDESLY-START-PHPecho udesly_get_image(_u('in6a2a92d', 'img'))->altUDESLY-END-PHP — Bildtexten går här

Färger

Färgmall

.svart

.white

.ljusgrå

Bakgrundsfärg

.background-color-black

.background-color-white

.bakgrundsfärg-ljusgrå

UI-element

Knappar

.knapp .button-secondary .button.button-small .button-secondary.button-small

.button-tertiary

Använd tilläggsklass .invert-colors när knappen placeras på en mörk bakgrund

.knapp .button-secondary .button.button-small .button-secondary.button-small

.button-tertiary

Formelement

Tack! Din ansökan har mottagits!

Oops! Något gick fel när du skickade in formuläret.

Flikar

Ikoner

.icon-xxsmall

.icon-xsmall

.icon-small

.icon-medium

.icon-large

.icon-xlarge

.icon-1x1-xxsmall

.icon-1x1-xsmall

.icon-1x1-small

.icon-1x1-medium

.icon-1x1-large

.icon-1x1-xlarge

Bilder

Bildformat 1:1

Bildformat 4:3

Bildformat 3:2

Bildformat 16:9

Avstånd

Marginal Riktning

.margin-top

.margin-bottom

.marginal-vänster

.margin-right

.margin-horisontell

.marginal-vertikal

Marginalstorlek

.margin-0

.margin-tiny

.margin-xxsmall

.margin-xsmall

.margin-small

.margin-medium

.margin-large

.margin-xlarge

.margin-xxlarge

.margin-huge

.margin-xhuge

.margin-xxhuge

.margin-custom1

.margin-custom2

.margin-custom3

Utfyllnad Riktning

.padding-top

.padding-bottom

.padding-left

.padding-right

.padding-horizontal

.padding-vertikal

Storlek på stoppning

.padding-0

.padding-tiny

.padding-xxsmall

.padding-xsmall

.padding-small

.padding-medium

.padding-large

.padding-xlarge

.padding-xxlarge

.padding-huge

.padding-xhuge

.padding-xxhuge

.padding-custom1

.padding-custom2

.padding-custom3

Layout

Container

.container-large

.container-medium

.container-small

Maxbredd

.max-width-full

.max-width-full-tablet

.max-width-full-mobile-landscape

max-width-full-mobile-portrait

.max-width-xxsmall

.max-width-xsmall

.max-width-small

.max-width-medium

.max-width-large

.max-width-xlarge

.max-width-xxlarge

Andra klasser

Reaktionsförmåga

.hide - döljs på alla enheter

.hide-tablet - dölja från tablettupplösningen

.hide-mobile-landscape - dölja från mobilens landskapsupplösning

.hide-mobile-portrait - dölja med utgångspunkt från mobilens porträttupplösning

.visa - visas på alla enheter

.show-tablet - display med utgångspunkt i surfplattans upplösning

.show-mobile-landscape - visning med utgångspunkt från mobilens landskapsupplösning

.show-mobile-portrait - visning med utgångspunkt i mobilens porträttupplösning

Användningsområde

.z-index-1 - för ett element närmare z-index, sätter z-index till 1

.z-index-2 - för ett element närmare z-index, sätter z-index till 2

.align-center - sätter marginalerna vänster och höger till auto, centrerar ett element inom sin överordnade div.

.spacing-clean - sätter allt avstånd till 0, inklusive marginaler och utfyllnad.

.div-kvadrat - skapar och upprätthåller en 1:1-dimension av en div. CSS-magi

.lager - anger absolut position med 0% på alla sidor - lägg till den här klassen till en div för att få den att expandera hela det överordnade elementets storlek och se till att den överordnade div:en har "position: relative".

.clickable-off - sätter pointer-events till none, förhindrar all klick- och hover-interaktion med ett element.

.klickbar på - ställer in pointer-events till auto, aktiverar all klick- och hoverinteraktion med ett element

.overflow-hidden - anger att överflödet är dolt

.overflow-scroll - anger att överflödet ska rulla

.overflow-auto - ställer in överflödet på auto