Yleiset esimerkit
Yleisimmät lyhytkoodit valmiina. Kopioi lyhytkoodi sivulle, artikkeliin tai widgettiin.
Oletusnäyttö, kaikki kohteet 3-sarakkeisessa ruudukossa:
Oletusasetus. Kaikki valitut kohteet kolmessa sarakkeessa, ruudukko mukautuu näytön leveyteen.
Etusivun nosto, 3 kohdetta:
Rajoittaa näytön kolmeen kohteeseen. Sopii etusivun nosto-osioon.
2-sarakkeinen asettelu:
Leveämmät kortit kahdessa sarakkeessa. Hyödyllinen, kun sisältöalue on leveä.
Pystylista-asettelu:
Kohteet allekkain. Sopii sivupalkkiin ja kapeaan sisältöalueeseen.
Karuselli:
Kohteet karusellissa nuolinäppäimillä. Hyödyllinen, kun kohteita on paljon mutta tilaa vähän.
Suomalaisten kiinteistösivustojen tyylit
Esiasetetut ulkoasut suomalaisten kiinteistöportaalien tyyliin. Valitse preset, joka muistuttaa sivustosi muuta ilmettä.
NÄYTEIKKUNA, nostettu tyyli värillisellä merkillä:
Nettiauto-tyylinen kortti värillisellä merkillä. Näkyvä valinta huomiokohteille.
NÄYTEIKKUNA
NÄYTEIKKUNA, siisti näyteikkunatyyli:
Valkoiset kortit ilman merkkiä. Neutraali ulkoasu eri kohdetyypeille.
NÄYTEIKKUNA
Kompaktit kortit, 4 saraketta:
Pienemmät kortit neljässä sarakkeessa. Näyttää enemmän kohteita samalla korkeudella.
Tumma teema:
Tummat kortit vaalealla tekstillä. Käytä tummalla taustalla tai tummaa teemaa käyttävässä sivustossa.
Käytännön käyttötapaukset
Esimerkkejä tiettyihin paikkoihin sivulla. Muokkaa CSS-luokkaa tarvittaessa teeman mukaan.
Etusivun pääosio:
Kolme kohdetta ruudukossa. Anna class-attribuutilla oma luokka teeman tyylejä varten.
Sivupalkin widgetti:
Lista ilman kuvia. Mahtuu kapeaan sivupalkkiin.
Koko leveyden karuselli-banneri:
Karuselli, joka venyy sivun levyiseksi. full-width-slider-luokka teeman leveään asetteluun.
Mobiilioptimoitu yksisarakkeinen:
Yksi sarake kaikilla laitteilla. Ei erillisiä breakpoint-asetuksia.
Minimaalinen tekstipainotteinen lista:
Vain osoite ja perustiedot, ei hintaa eikä kuvaa. Lyhyt linkkilista esimerkiksi alatunnisteeseen.