Slice Showcase

Þessi síða inniheldur sýnishorn af helstu sneiðum (slices) sem við notum til að byggja Kvika.is.

RichText

Ready for use

Sneið sem birtir RichText og er hún notuð á eldri síðum sem voru teknar beint yfir frá eldri Kvika.is sem og nýju Fjárfestingaupplýsingunum.

Link List

Probably deprecated

Listi af hlekkjum.

Lind Card (small) list

Probably deprecated

Hlekkjalisti. Úreldur, en á eftir að skipta út í Prismic.

Image

Ready for use

Birtir mynd. Er ennþá í notkun, en use case virðast þó ekki sjást í hönnun. Boðið er upp á þrjú layout gildi:

  • responsive
  • intrinsic
  • fixed

Link Card list

Ready for use

Listi af hlekkjum sem að birtast í kortaformi með fyrirsögn og lýsingu lýsingu. Notað m.a. á forsíðu m.v. hönnun 20.05.22.

Valfrjáls section title

Haus

Lýsing – Internal síða

Nánar

Annar haus

Önnur lýsing – External síða

Nánar

Þriðji hausinn

Þriðja lýsingin – Skjal

Nánar

Media Card

WIP

Notað í undirsíðum fyrir fjölmiðla þar sem boðið er upp á að sækja markaðsefni.

Section

Description

Plaintext Table

Probably deprecated

Sneið sem tekur hrátt HTML og birtir töflu. Hefur reynst vel þegar við höfum þurft að sækja stærri töflur frá eldri vef, en þó er ekki mælt með frekari notkun. Nokkrar síður eru að nota þessa töflu eins og er.

Nafn hluthafa Fjöldi hluta Eignarhlutur Skráðir eigendur
Lífeyrissjóður verzlunarmanna 434.083.679 9%
Lífeyrissj.starfsm.rík. A-deild 374.220.000 7,76%

Table (up to 4 col)

Ready for use

Sneið sem birtir töflu. Getur bæði birt töfluna eina og sér, eða í felliglugga (accordion). Leyfir mest 4 dálka eins og er.

Nokkuð hæg í notkun, en hentug þar sem ekki þarf að birta mikið af efni.

Nafn hluthafaFjöldi hlutaEignarhluturSkráðir eigendur

Lífeyrissjóður verzlunarmanna

434.083.679

9%

Lífeyrissj.starfsm.rík. A-deild

374.220.000

7,76%

Hér er tafla falin á bakvið Accordion

Calculator

Ready for use

Gengisreiknivél sem hægt er að setja inn nánast hvar sem er, en þó er ekki hægt að hafa frekari áhrif á hana í Prismic.

Hero Title

Probably deprecated

Þessi sneið var fyrst og fremst notuð á sjálfbærnisíðum sem nú hafa verið uppfærðar. Því má trúlegast fjarlægja þetta

Hero Image

Ready for use

Hetjumynd sem að tekur alla þá breidd sem í boði er. Er með fasta hæð (392px).

Hægt er að stíla myndina frekar með style og position. Style leyfir okkur annarsvegar að dekkja eða lýsa myndina og bæta við smá gulltón. Position leyfir okkur að stýra hvaða hluti myndarinnar birtist.

Notist helst með myndum í góðri upplausn.

Inline Images

Probably deprecated

Sneið sem birtir myndir í einni röð. Þarf breytingar fyrir nýtt grid, en er notað á einum stað í eldri Um Kviku. Myndirnar taka það pláss sem er í boði og þarf að huga að stærð þeirra.

Hægt er að bæta við hlekk við mynd.

Þrátt fyrir að þessi sneið sé tilbúin og í notkun er ekki endilega mælt með notkun hennar því hún virðist ekki samræmast nýrri hönnun. Er í augnablikinu aðeins í notkun á /samfelagsabyrgd/umhverfid

Framtidin ImageNetgiro ImageAur Image

Shaded RichText

Probably deprecated

Skyggður RichText sem tekur allt pláss sem er í boði. Sennilegast úrelt.

Skyggt RichText

Hero Link List

Mynd getur verið til hægri eða vinstri. Birtir hlekki á innri og ytri síður, sem og skjöl.

Hero Carousel

Ready for use

Myndaalbúm sem skiptir um mynd á 15 sek (harðkóðað að svo stöddu) fresti. Hægt er að skrifa texta við hverja mynd og má breyta sniðmátinu á textanum.

Fyrst og fremst notað á sjálfbærnisíðunum.

Athugið: Viðfangsefni myndarinnar gæti dottið úr mynd í vissum tilfellum.

Styrkþegar

Styrkþegar

Styrkþegar

Styrkþegar

Column Content

Ready for use

Tveir dálkar sem innihalda RichText. Hægt að setja fyrirsögn á section ásamt því að breyta bakgrunnslit.

Hafið í huga að bakgrunnslitir geta virkað misvel með textalitum og öðru og þarf að rýna aðeins í litavalið.

Valfrjáls titill

Hér kemur valfrjáls fyrirsögn

Fyrsti dálkur

Hér er má skrifa slatta af texta sem kemur fyrir í einum dálk

Klofin fyrirsögn

Kljúfa má fyrirsögn (heading) frá texta með því að gefa fyrirsögninni "decorated-heading" label

Textastíll

Textastíllinn er breytilegur og má stýra honum eitthvað með labels.

Það er hægt að setja inn myndir og hlekki í þetta viðmót.

pdfHér er mjög mikilvægt skjal

RichText + Q&A

Ready for use

Tveir dálkar sem innihalda RichText + spurningalista sem birtist í felligluggum. Hægt að stýra uppröðun á dálkunum.

Spurningalisti

Hér er hægt að hafa einhvern texta samhliða spurningunum. Hann getur bæði verið vinstra megin og hægra megin.

Það er líka hægt að sníða textan til hér

Vissir þú?

Að flestar sneiðar sem innihalda RichText eru með "labels" sem nota má til að stíla textan til á sérstakan máta.

Hvað búa margir á Akureyri?

Hvað búa margir í Reykjavík

Embedded YouTube Grid

WIP

YouTube myndbönd sem búið er að raða upp í dálka. Þarf breytingar á kóða til að virka sem skyldi, en þessi aðferð til að birta myndbönd er talin vera ákveðinn öryggisgalli.

Aðeins notað sem undirsíða á sjálfbærnisíðum.

Half Image Description

Ready for use

Viðmóti skipt upp í 50% mynd og 50% texti. Hægt að breyta til hvað þetta tekur mikið pláss eða í hvaða röð efnið birtist.

Hér kemur glæsilegur texti

Til hægri, með darkGold bakgrunn

Hér er ekki síður glæsilegri texti

Til vinstri, með gylltum texta og lightGold bakgrunn

Notification

Ready for use

Hentugt til að birta tilkynningar. Hægt er að breyta útliti til að endurspegla eðli tilkynningar.

Í augnablikinu er ekki í boði að breyta sniðmáti texta.

Hér er tilkynning til allra sem vilja heyra

Hér er viðvörun

Hér er villumelding

Hér er melding um að einhver aðgerð hafi heppnast!

OrganizationOperations

Ready for use

Notuð til að birta upplýsingar um dótturfélög í Um Kviku. Í raun lítið annað en mynd með texta og lýsingu og mætti vel endurnýta hana í eitthvað annað.

Dótturfélög

Þessi sneið er notuð til að birta upplýsingar um dótturfélög í Um Kviku

Showcasing

Ready for use

Hér er sneið sem er notuð til að birta skjal og upplýsingar um það. Er með RichText lýsingu, en þar að auki er hægt að setja section title og breyta bakgrunnslit. Myndirnar sem þessi sneið birtir fá bakskugga sjálfvirkt.

Valfrjáls titill

Hér er skjal sem gott væri að kynna sér betur!

Einnig má breyta sniðmáti texta!

Link List Description Columns

WIP

Þessi sneið birtir lista af hlekkjum. Sennilegast þarf að endurskoða stílana hér.

Section Description

Ready for use

Einföld kort sem innihalda texta. Ekki hægt að stíla sérstaklega.

Lýsing á section

Fyrirsögn

Lýsing

Önnur fyrirsögn

Önnur lýsing

Highlight

Ready for use

Þessi sneið er ansi sveigjanleg og býður upp á margar útfærslur. Hægt er að nota label á description (t.d. body-medium-serif, body-large-serif) til að aðlaga útlitið að hönnun.

Hægt er að bæta við hnapp sem beinir notendum á umbeðnar síður eða skjöl.

Hægt er að bæta við myndum sem birtast í röð, en þó þarf að hafa í huga að myndirnar taka það pláss sem þær þurfa og getur því þurft að stýra stærðinni á þeim með max-height.

Tvær útfærslur á stærð eru í boði: full og small.

Hér er stuttur texti.

Hér er stuttur texti með label

Hér er frekari texti með öðrum label

Aur Image
Netgiro Image

Hér er Highlight sem tekur svolítið minna pláss. Nett.

HeroImageRibbon

Ready for use

Sneið sem inniheldur textastubb, bakgrunnsmynd og valfrjálsan hlekk. Einnig er hægt að breyta texta utan um hlekkinn, en sjálfgefinn texti er "Sjá meira". Þú getur líka valið að fela ör sem fylgir hlekk.

Þessi sneið er aðgengileg bæði á forsíðu (frontpage) og generískum síðum (page)

Hér er fyrirsögn

Hér er áhugaverð og grípandi lýsing.

Kynntu þér málið

SubsidiaryInfo

Ready for use

Þessi sneið er notuð til að birta upplýsingar um dótturfélög Kviku sem og aðrar einingar sem okkur viðkemur.

Það þarf alltaf að vera mynd með!

Kvika

Hér kemur smá texti um Kviku

Nánar um Kviku

TM

Hér kemur texti um TM

TM.is

RichText Cards

Ready for use

Textakort sem taka þrjá dálka í hverri röð. Ef kortin eru færri en þrjú per röð þá nýta þau það pláss sem í boði er.

Breyta má sniðmáti textans á ýmsa vegu eins og dæmin gefa til kynna.

Hér er áhugaverður texti

Fyrirsögn!

Hér er frekari texti! Hér er fyrirsögnin með label "decorated-heading"

Texti með hlekk

Nánar

Þessi texti ætti að taka restina af plássinu! Hann er með label "body-medium-serif"

Lifandi pantanabók

• Pöntun sem sýnir verð og magn og hefur fastan gildistíma eða lifir þar til viðskipti verða eða pöntun er afturkölluð;

• Kerfið heldur utan um allar pantanir sama hvort þær hafa verið fylltar eða þeim eytt

• Viðskiptavinur sendir pantanir í gegnum símtal, tölvupóst eða spjallforrit. Tiltekur verð, magn og gildistíma líkt og tíðkast með viðskipti á hlutabréfamarkaði

• Allar pantanir birtast í rauntíma sem eykur gegnsæi og virkni.

Viðskiptagluggi

• Sýnir öll viðskipti,

• gjaldeyrismiðlun Kviku getur tilkynnt öll viðskipti inn í kerfið,

• viðskiptaglugginn er birtur á Keldan.is í rauntíma.

Two column list

Ready for use

Hér er hægt að birta lista sem birtist í tveimur dálkum. Efnið þarf að vera sett í RichText lista til að það birtist rétt.

Fyrirsögn á lista

  • Hér er einn punktur
  • Hér er annar
  • Punktarnir eru skreyttir með sérstöku bullet-merki
  • Hér er þriðji punkturinn
  • Hann er líka með fallegu bullet-merki

Single row title and description

Ready for use

Hetjutexti sem tekur fulla breidd. Birtir texta í serif.

Hér kemur sterk og öflug fyrirsögn

Hér fylgir einhver texti sem tengist innihaldi fyrirsagnarinnar. Það er hægt að stíla textann til og gera ýmsar breytingar á honum.

Spacer

Hér er hægt að bæta við lóðréttu plássi í mismunandi litum.

Stærðir í boði:

  • xs: 16px
  • sm: 24px
  • md: 32px
  • lg: 56px
  • base: 80px
  • xl: 120px
  • 2xl: 200px

Link list

Ready for use

linked list