UI kit

Typography

Alampealkirja loomiseks tuleb kasutada +sectionTitle() mixini.

Sectiontitle mixini kaasa antava objekti võimalikud omadused on järgmised:

id: kasutatakse kui ankrupunkti nii menüü jaoks kui ka URL'is.
title: Pealkirja tekst (markdown). Esimene rida markdownis tehakse alati h2 elemendiks.
navigation: Kui täita ära navigation, siis tekib selle pealkirja kohta ka menüüsse link.

data.yaml

typography:
    id: typography
    title: |
        **Typography**
    navigation: Typography

index.pug

+sectionTitle(self.typography)

Heading 1- Light 45px/45px

Heading 2 - Bold 26px/30px

Sisutekstideks on loodud mixin +markdown().

data.yaml

content: |
    **Lorem ipsum dolor sit amet, consectetur adipiscing elit.**

    Vivamus lobortis pellentesque commodo. Pellentesque luctus, mauris vitae tincidunt porta, elit neque tempus libero, eu accumsan nulla tortor eget mauris. Maecenas nibh dolor, gravida eu augue pellentesque, consectetur ultricies est. Nulla lacinia ipsum a sollicitudin convallis.

    Pellentesque interdum posuere aliquet. Maecenas massa arcu, malesuada ullamcorper luctus at, cursus ut lacus. Phasellus ultricies commodo dolor quis cursus. Nunc condimentum, sem sit amet tempor mollis, tortor odio porttitor lorem, eget congue odio odio.

index.pug

+markdown(self.content)

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Vivamus lobortis pellentesque commodo. Pellentesque luctus, mauris vitae tincidunt porta, elit neque tempus libero, eu accumsan nulla tortor eget mauris. Maecenas nibh dolor, gravida eu augue pellentesque, consectetur ultricies est. Nulla lacinia ipsum a sollicitudin convallis.

Pellentesque interdum posuere aliquet. Maecenas massa arcu, malesuada ullamcorper luctus at, cursus ut lacus. Phasellus ultricies commodo dolor quis cursus. Nunc condimentum, sem sit amet tempor mollis, tortor odio porttitor lorem, eget congue odio odio.

Listide loomiseks kasutame üldjuhulul +markdown().

Igasugused modifikatsioonid listis, näiteks nooled või check ikoonid, on saavutatud javascriptiga.

Linkidest listi on võimalik teha nii markdowniga kui ka +linksList() mixiniga.

data.yaml

list: |
    - Lorem ipsum dolor sit amet.
    - Vivamus lobortis pellentesque.
    - Mauris vitae tincidunt porta, elit neque tempus libero, accumsan nulla tortor eget mauris.
    - Maecenas nibh dolor, gravida eu augue pellentesque, consectetur ultricies est.

linkslist:
    links:
        -
            title: Üldtingimused
            url: /et/uldtingimused
        -
            title: Au-kliendi lepingu tingimused
            url: /et/au-kliendi-lepingu-tingimused

index.pug

+markdown(self.list)

+linksList(self.linkslist.title, self.linkslist.links)

Lorem ipsum dolor sit amet.
Vivamus lobortis pellentesque.
Mauris vitae tincidunt porta, elit neque tempus libero, accumsan nulla tortor eget mauris.
Maecenas nibh dolor, gravida eu augue pellentesque, consectetur ultricies est.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Vivamus lobortis pellentesque
Commodo Pellentesque luctus
Mauris vitae tincidunt porta elit
Neque tempus libero, eu accumsan

Disclaimeri loomiseks kasutame mixini +disclaimer(text, align).

Disclaimeri mixini saab kaasa anda 2 parameetrit:

text: Sisutekst
align: true või center, joondab teksti keskele.

data.yaml

disclaimer: |
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lobortis pellentesque commodo. Pellentesque luctus, mauris vitae tincidunt porta, elit neque tempus libero, eu accumsan nulla tortor eget mauris. Maecenas nibh dolor, gravida eu augue pellentesque, consectetur ultricies est. Nulla lacinia ipsum a sollicitudin convallis. Pellentesque interdum posuere aliquet.

index.pug

+disclaimer(self.disclaimer)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lobortis pellentesque commodo. Pellentesque luctus, mauris vitae tincidunt porta, elit neque tempus libero, eu accumsan nulla tortor eget mauris. Maecenas nibh dolor, gravida eu augue pellentesque, consectetur ultricies est. Nulla lacinia ipsum a sollicitudin convallis. Pellentesque interdum posuere aliquet.

Headings

Heading 1- Light 45px/45px

Heading 2 - Bold 26px/30px

Body text

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lists

Lorem ipsum dolor sit amet.
Vivamus lobortis pellentesque.
Mauris vitae tincidunt porta, elit neque tempus libero, accumsan nulla tortor eget mauris.
Maecenas nibh dolor, gravida eu augue pellentesque, consectetur ultricies est.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Vivamus lobortis pellentesque
Commodo Pellentesque luctus
Mauris vitae tincidunt porta elit
Neque tempus libero, eu accumsan

Disclaimer

Colors

Main colors

White
#FFFFFF
255 · 255 · 255
0 · 0 · 0 · 0

Gray
#464B5A
70 · 75 · 90
72 · 59 · 44 · 38

Black
#262633
0 · 0 · 15
0 · 0 · 0 · 100

Colors for infographics

#FAC8AA
250 · 200 · 170
0 · 27 · 30 · 0

#CDAA9B
205 · 170 · 155
16 · 33 · 33 · 4

#9B8584
155 · 133 · 132
33 · 40 · 35 · 15

#696670
105 · 102 · 112
54 · 49 · 38 · 25

#3F4958
63 · 73 · 88
72 · 59 · 43 · 38

#69AAA0
131 · 167 · 163
60 · 19 · 38 · 0

#32737D
50 · 115 · 125
76 · 35 · 39 · 19

#1E5A73
30 · 90 · 115
85 · 51 · 37 · 25

#00234B
0 · 35 · 75
90 · 43 · 0 · 77

#052337
5 · 35 · 55
99 · 75 · 59 · 58

#96D2C8
150 · 210 · 200
39 · 0 · 25 · 0

#B9E1DA
185 · 225 · 218
27 · 0 · 16 · 0

#DEDDD5
222 · 221 · 213
0 · 0 · 6 · 14

Buttons

Nuppude loomiseks kasutame mixini +button().

Button mixini kaasa antava objekti võimalikud omadused on järgmised:

id: id
title: nupu tekst
link: URL kuhu nupp suunab
target: _blank
onclick: funktsioon (google analytics)
disabled: true, kui nupp peaks olema disabled
class: lisa classid, stiilimiseks
size: nupu suurus (big, medium, small)
color: dark/light

data.yaml

button:
    id: addRow
    title: Big button
    url: https://www.neti.ee
    target: _blank
    onclick: doSomething()
    disabled: true
    class: add-button
    size: lg
    color: light

index.pug

+button(self.button)

Dark backround

Navigation

Ümarate eraldatud pillside jaoks mixin puudub, need tuleb luua käsitsi lisades allolev koodijupp. Kandiliste jaoks on olemas mixin +pills()

Pillsi mixini tuleb kaasa anda list objektidest, millel on sellised omadused

id: id
title: tekst

data.yaml

pills:
    -
        id: id-kaart
        title: ID-kaart
    -
        id: mobiili-id
        title: Mobiili-ID
    -
        id: smart-id
        title: Smart-ID
    -
        id: pin-kalkulaator
        title: PIN-kalkulaator
    -
        id: salasona
        title: Salasõna

index.pug

ul.nav.nav-pills.seperated-pills
    each m, idx in self.pills
        li
            a(data-toggle='pill', href='#' + m.id)= m.title

+pills(self.pills)

Forms

Icons

0-eur.svg

1-place.svg

2-place.svg

3-place.svg

1999.svg

2002.svg

2005.svg

2009.svg

2010.svg

2011.svg

2013.svg

2014.svg

2015.svg

2016.svg

2017.svg

2018.svg

abc.svg

aid.svg

Headers

Headerid luuakse +header() mixini kasutades.

Headeri mixini omadused

type: top/bottom (servast servani headeri loomiseks top)
text: tekst headeri sees
picture: pildi path
theme: dark/bright (dark on default aga bright teeb tekstid valgeks, tumeda pildi jaoks)
mobilePicture: pilt mobiili jaoks, vajalik ainult kui type on bottom
buttons: CTA nupud, saab lisada mitu (list)
arrows: linkid nuppude all, saab lisada mitu (list)

Videoga headeri jaoks on natukene teised omadused vajalikud

type: top
text: tekst
video:
- poster: path
- mp4: path
- webm: path
- youtube: jIm4H6WL0rY (youtube video id)

NB. Headeri mixini ise kuskile lisama ei pea. Template ise vaatab, kas data failis on headeri objekt olemas. Kui on siis loob headeri automaatselt ise.

Parallax effekt on siin lehel välja lülitatud, et lehekülg paremini toimiks, sest meil on siin mitu headerit (jõudluse mure).

data.yaml

header:
    type: bottom
    text: |
        ## **Lorem ipsum dolor** sit amet consectetur adipiscing elit
        Phasellus rhoncus metus eros, vitae gravida ipsum bibendum scelerisque. Curabitur mattis sollicitudin tortor id:
        - Donec blandit ligula quis bibendum porttitor
        - Vestibulum sed dui arcu
    picture: /assets/images/headers/ii-sammas.svg
    mobilePicture: /assets/images/headers/ii-sammas-thumb.png
    buttons:
        -
            title: Medium button
            url: /pension/ii/index.cfm?l3=et&fuseaction=mod_switch
            onclick: sendGAevent('pension/ii_EE', 'liitu-fondiga', 'Button_advanced_header');
    arrows:
        -
            title: Link with arrow
            url: /pension/ii/index.cfm?l3=et
            onclick: sendGAevent('pension/ii_EE', 'vaata-seisu', 'link');


Video jaoks:
header:
    type: top
    text: |
        # **Estonia’s best private banking** – Financial magazine Euromoney recognised LHV’s private banking as the best in Estonia.

    video:
        poster: /assets/videos/privaatpangandus/header.jpg
        mp4: /assets/videos/privaatpangandus/header.mp4
        webm: /assets/videos/privaatpangandus/header.webm
        youtube: jIm4H6WL0rY

index.pug

+header(self.header)

Lorem ipsum dolor sit amet consectetur adipiscing elit

Phasellus rhoncus metus eros, vitae gravida ipsum bibendum scelerisque. Curabitur mattis sollicitudin tortor id:

Donec blandit ligula quis bibendum porttitor
Vestibulum sed dui arcu

Medium button

Link with arrow

hero

video header

Tables

Tavalise tabeli loome +markdown() mixini kasutades.

data.yaml

table: |
    | Region/Exchange | Countries | Non-Pro Fees/month | Pro Fees/month |
    |------------------|---------|----|-----|
    | AMEX (Network B/CTA) Top of Book (L1) | United States | USD 1.50 | USD 23.00 |
    | AMEX Options Depth of Book | United States | USD 10.00 | USD 60.00 |
    | AMEX MKT Order Imbalances | United States | Free | Free |
    | ArcaBook Options Depth of Book | United States | USD 10.00 | USD 60.00 |
    | ArcaBook for Equities | United States | USD 11.00 | USD 40.00 |
    | CBOE Futures Exchange Level I | United States | USD 2.50 | USD 7.50 |
    | CBOE Futures Exchange Level II | United States | USD 4.00 | USD 15.00 |
    | Dow Jones Global Indices | United States | USD 1.00 | USD 2.00 |
    | CME S&P Indexes | United States | USD 4.25 | USD 4.25 |

index.pug

+markdown(self.table)

Region/Exchange	Countries	Non-Pro Fees/month	Pro Fees/month
AMEX (Network B/CTA) Top of Book (L1)	United States	USD 1.50	USD 23.00
AMEX Options Depth of Book	United States	USD 10.00	USD 60.00
AMEX MKT Order Imbalances	United States	Free	Free
ArcaBook Options Depth of Book	United States	USD 10.00	USD 60.00
ArcaBook for Equities	United States	USD 11.00	USD 40.00
CBOE Futures Exchange Level I	United States	USD 2.50	USD 7.50
CBOE Futures Exchange Level II	United States	USD 4.00	USD 15.00
Dow Jones Global Indices	United States	USD 1.00	USD 2.00
CME S&P Indexes	United States	USD 4.25	USD 4.25

Conditions tabeli loomiseks kasutame +conditionsTable() mixini.
Mixin eeldab listi.

Kõik mis jääb [...] ja (...) vahele, peidetakse alguses ära ning nende osade nägemiseks tuleb vajutada pluss ikoonil.

data.yaml

table:
    -
        title: Loan amount
        text: |
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            [...]Donec blandit ligula quis bibendum porttitor. Vestibulum sed dui arcu. Proin quis eros sed dolor semper pretium. Fusce nec tortor vel eros pharetra porta. Phasellus ultrices tempor risus in laoreet. Vivamus efficitur purus vitae leo interdum aliquet. Pellentesque egestas lectus quis mauris consequat ullamcorper. Phasellus rhoncus metus eros, vitae gravida ipsum bibendum scelerisque. Curabitur mattis sollicitudin tortor id facilisis.(...)
    -
        title: Agreement fee
        text: |
            Up to 1% of the loan amount
            [...]Vestibulum sed dui arcu. Proin quis eros sed dolor semper pretium. Fusce nec tortor vel eros pharetra porta. Phasellus ultrices tempor risus in laoreet. Vivamus efficitur purus vitae leo interdum aliquet. Pellentesque egestas lectus quis mauris consequat ullamcorper. Phasellus rhoncus metus eros, vitae gravida ipsum bibendum scelerisque. Curabitur mattis sollicitudin tortor id facilisis.(...)
    -
        title: Period
        text: |
            Pellentesque egestas lectus quis mauris consequat ullamcorper.
            [...]Vestibulum sed dui arcu. Proin quis eros sed dolor semper pretium. Fusce nec tortor vel eros pharetra porta. Phasellus ultrices tempor risus in laoreet. Vivamus efficitur purus vitae leo interdum aliquet. Pellentesque egestas lectus quis mauris consequat ullamcorper. Phasellus rhoncus metus eros, vitae gravida ipsum bibendum scelerisque. Curabitur mattis sollicitudin tortor id facilisis.(...)
    -
        title: Interest
        text: |
            From 2.1% + euribor

index.pug

+conditionsTable(self.table)

Loan amount	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec blandit ligula quis bibendum porttitor. Vestibulum sed dui arcu. Proin quis eros sed dolor semper pretium. Fusce nec tortor vel eros pharetra porta. Phasellus ultrices tempor risus in laoreet. Vivamus efficitur purus vitae leo interdum aliquet. Pellentesque egestas lectus quis mauris consequat ullamcorper. Phasellus rhoncus metus eros, vitae gravida ipsum bibendum scelerisque. Curabitur mattis sollicitudin tortor id facilisis.
Agreement fee	Up to 1% of the loan amount Vestibulum sed dui arcu. Proin quis eros sed dolor semper pretium. Fusce nec tortor vel eros pharetra porta. Phasellus ultrices tempor risus in laoreet. Vivamus efficitur purus vitae leo interdum aliquet. Pellentesque egestas lectus quis mauris consequat ullamcorper. Phasellus rhoncus metus eros, vitae gravida ipsum bibendum scelerisque. Curabitur mattis sollicitudin tortor id facilisis.
Period	Pellentesque egestas lectus quis mauris consequat ullamcorper. Vestibulum sed dui arcu. Proin quis eros sed dolor semper pretium. Fusce nec tortor vel eros pharetra porta. Phasellus ultrices tempor risus in laoreet. Vivamus efficitur purus vitae leo interdum aliquet. Pellentesque egestas lectus quis mauris consequat ullamcorper. Phasellus rhoncus metus eros, vitae gravida ipsum bibendum scelerisque. Curabitur mattis sollicitudin tortor id facilisis.
Interest	From 2.1% + euribor

Võrdlustabeli loomiseks tuleb kasutada +comparisonTable() mixini.

Mixini data ootab järgnevaid omadusi

compare: list, mida võrreldakse
- title: pealkiri
- image: pilt
tables: list üksteise all olevatest tabelitest, tabelite read on selle listi sees järgmine list (vaata näidet)

data.yaml

comparison:
    compare:
        -
            title: Gold Credit Card
            image: partner-credit.png
        -
            title: Gold Debit Card
            image: partner-debit-2021.png

    tables:
        -
            -
                - Opportunities
                -
                    title: Gold Credit Card
                    image: gold-credit.png
                -
                    title: Gold Debit Card
                    image: gold-debit.png
            -
                - Discounts
                - |
                    Lorem ipsum **dolor sit amet**, consectetur adipiscing.
                - |
                    Lorem ipsum **dolor sit amet**, consectetur adipiscing.
            -
                - Travel insurance
                - true
                - true
            -
                - Offers from Estravel Gold Card
                - true
                - true
            -
                - Contactless payment
                - true
                - true
            -
                - Payment for goods in Estonia, abroad and on the Internet
                - true
                - true
        -
            -
                - Price list and terms and conditions
            -
                - Monthly fee
                - 1 €
                - 1 €
            -
                - Extra card
                - Monthly fee 10 €
                - Monthly fee 10 €
            -
                - Applicant requirements
                - To apply for a card, you must be an Au-client of LHV
                - The applicant must be an Au-client of LHV, at least 18 years of age, have a net income of at least 350 € a month. If your pay has not been transferred to LHV Pank for the past six months, please submit an account statement for the last six months from the bank where your pay has been transferred.
            -
                - ''
                -
                    title: Apply Gold Credit Card
                    url: /auth/card_appl_login.cfm?l3=et&i_design_code=PFC&i_prodid=24
                    onclick: sendGAevent('partner_EE', 'telli-krediitkaart', 'Button_table');
                -
                    title: Apply Gold Debit Card
                    url: /card/card_appl_debit.cfm?l3=et&i_prodid=26&i_design_code=KDD
                    onclick: sendGAevent('partner_EE', 'telli-deebetkaart', 'Button_table');

index.pug

+comparisonTable(self.comparisonTable)

Opportunities	Gold Credit Card	Gold Debit Card
Discounts	Lorem ipsum dolor sit amet, consectetur adipiscing.	Lorem ipsum dolor sit amet, consectetur adipiscing.
Travel insurance
Offers from Estravel Gold Card
Contactless payment
Payment for goods in Estonia, abroad and on the Internet
Price list and terms and conditions
Monthly fee	1 €	1 €
Extra card	Monthly fee 10 €	Monthly fee 10 €
Applicant requirements	To apply for a card, you must be an Au-client of LHV	The applicant must be an Au-client of LHV, at least 18 years of age, have a net income of at least 350 € a month. If your pay has not been transferred to LHV Pank for the past six months, please submit an account statement for the last six months from the bank where your pay has been transferred.
	Apply Gold Credit Card	Apply Gold Debit Card

Gold Credit Card

Gold Debit Card

Gold Credit Card

Gold Debit Card

Opportunities

Discounts

Travel insurance

Offers from Estravel Gold Card

Contactless payment

Payment for goods in Estonia, abroad and on the Internet

Price list and terms and conditions

Monthly fee

Extra card

Applicant requirements

Lorem ipsum dolor sit amet, consectetur adipiscing.

1 €

Monthly fee 10 €

To apply for a card, you must be an Au-client of LHV

Apply Gold Credit Card

Lorem ipsum dolor sit amet, consectetur adipiscing.

1 €

Monthly fee 10 €

The applicant must be an Au-client of LHV, at least 18 years of age, have a net income of at least 350 € a month. If your pay has not been transferred to LHV Pank for the past six months, please submit an account statement for the last six months from the bank where your pay has been transferred.

Apply Gold Debit Card

Apply Gold Credit Card

Calculators

Basic

Monthly instalment

123.45

Apply

Tulemus on ligikaudne ja võib erineda sulle pakutavatest tingimustest.

Two columns

Sample monthly payment
Maximum limit

Monthly instalment

123.45

Apply

The results are estimated and may differ from the terms and conditions offered to you.

Maximum limit offered

123.45

Apply

The results are estimated and may differ from the terms and conditions offered to you.

Accordion

Accordioni tegemiseks kasutame +accordion() mixini.

Accordioni datasse läheb list mille iga objekti omadused on järgmised

id: id
title: pealkiri
text: tekst

data.yaml

accordion:
    -
        id: lorem-ipsum
        title: Lorem ipsum
        text: |
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec blandit ligula quis bibendum porttitor. Vestibulum sed dui arcu. [Proin quis](/et/kkk/maksed/#payment-internal) eros sed [dolor semper pretium](/et/kkk/maksed/#payment-sepa).
    -
        id: dolor-sit-amet
        title: Dolor sit amet
        text: |
            Fusce nec tortor vel eros pharetra porta. Phasellus ultrices tempor risus in laoreet. Vivamus efficitur purus vitae leo interdum aliquet. Pellentesque egestas lectus quis mauris consequat ullamcorper. Phasellus rhoncus metus eros, vitae gravida ipsum bibendum scelerisque. Curabitur: mattis → sollicitudin → tortor → id facilisis.

index.pug

+accordion(self.accordion)

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec blandit ligula quis bibendum porttitor. Vestibulum sed dui arcu. Proin quis eros sed dolor semper pretium. Fusce nec tortor vel eros pharetra porta. Phasellus ultrices tempor risus in laoreet. Vivamus efficitur purus vitae leo interdum aliquet. Pellentesque egestas lectus quis mauris consequat ullamcorper. Phasellus rhoncus metus eros, vitae gravida ipsum bibendum scelerisque. Curabitur mattis sollicitudin tortor id facilisis.

Dolor sit amet

Fusce nec tortor vel eros pharetra porta. Phasellus ultrices tempor risus in laoreet. Vivamus efficitur purus vitae leo interdum aliquet. Pellentesque egestas lectus quis mauris consequat ullamcorper. Phasellus rhoncus metus eros, vitae gravida ipsum bibendum scelerisque. Curabitur: mattis → sollicitudin → tortor → id facilisis.

Phasellus

Phasellus ultrices tempor risus in laoreet. Vivamus efficitur purus vitae leo interdum aliquet. Pellentesque egestas lectus quis mauris consequat ullamcorper. Phasellus rhoncus metus eros, vitae gravida ipsum bibendum scelerisque. Curabitur mattis sollicitudin tortor id facilisis.

Vestibulum

Vestibulum sed dui arcu. Proin quis eros sed dolor semper pretium. Fusce nec tortor vel eros pharetra porta. Phasellus ultrices tempor risus in laoreet. Vivamus efficitur purus vitae leo interdum aliquet. Pellentesque egestas lectus quis mauris consequat ullamcorper. Phasellus rhoncus metus eros, vitae gravida ipsum bibendum scelerisque. Curabitur mattis sollicitudin tortor id facilisis.

Tooltips

Lorem ipsum

Alerts

Contacts

Üksiku kontakti tegemiseks kasutame +singleContact() mixini.

Mixini kaasa anda järgmised omadused

picture: pildifail
text: tekst

data.yaml

contact:
    picture: kristel-roostfeldt.png
    text: |
        **LHV Pank client support**
        Mon–Fri 9–19, Sat 10–17\*
        6 800 400
        [Skype](skype:lhv.ee?call)
        <info@lhv.ee>

index.pug

+singleContact(self.contact)

LHV Pank client support
Mon–Fri 9–19, Sat 10–17*
6 800 400
Skype
info@lhv.ee

Mitme kontakti näitamiseks kasutame +contactThumbnail() mixini.

Inputiks läheb ainult list nimedega (vaata näidet).
Datasse tuleb lisada ka viide inimesed.yaml failile page objekti sees(kõige üleval).

data.yaml

page:
    title: UI kit
    data:
        inimesed: /ettevottest/inimesed.yaml

contacts:
    - indrek-nuume
    - arko-kurtmann
    - egon-rand
    # - krislin-lehtsaar

index.pug

+contactThumbnail(self.contacts)

Indrek Nuume

juhatuse liige, ettevõtete panganduse juht

680 2622

indrek.nuume@lhv.ee

Egon Rand

ärikliendihaldur

680 2768

egon.rand@lhv.ee

Kontaktikaartide loomiseks kasutame +contactCard() mixini.

Mixini kaasa anda list nimedega.

data.yaml

contacts:
    -
        id: andres-viisemann
        profession: aktiivsete fondide fondijuht
    -
        id: joel-kukemelk
        profession: passiivsete fondide fondijuht
    - eve-sirel
    - kelli-valdek

index.pug

+contactCard(self.contacts)

Andres Viisemann

head of LHV Pension Funds

andres.viisemann@lhv.ee

Joel Kukemelk

passiivsete fondide fondijuht

joel.kukemelk@lhv.ee

Eve Sirel

operatsioonide juht

eve.sirel@lhv.ee

Kelli Valdek

riski- ja vastavuskontrolli juht

kelli.valdek@lhv.ee

Featured

Related productsite näitamiseks kasutame +relatedProducts() mixini.

Mixini läheb kaasa list mille iga objekti omadused on järgmised

title: tiitel
image: pildi path
text: tekst
link:
- title: pealkiri
- url: aadress

data.yaml

related:
    -
        title: Liising
        picture: /assets/images/headers/k6ik-masinad.png
        url: liising
    -
        title: Remondilaen
        picture: /assets/images/headers/remondilaen.et.png
        url: remondilaen
    -
        title: Väikelaen
        picture: /assets/images/headers/vaikelaen.et.png
        url: vaikelaen

index.pug

+relatedProducts(self.related)

Lorem ipsum dolor sit amet

+hrText(data)

data.yaml

text: |
    **Lorem ipsum dolor sit amet**
    Donec blandit ligula quis bibendum porttitor. Vestibulum sed dui arcu. Proin quis eros sed dolor semper pretium.
    [**Loe lisa**](#)

index.pug

+hrText(self.text)

Lorem ipsum dolor sit amet
Donec blandit ligula quis bibendum porttitor. Vestibulum sed dui arcu. Proin quis eros sed dolor semper pretium.
Loe lisa

Text grid

+markdown(data)

Kui tekst on vaja keskele panna, siis lisame .text-center wrapperi ümber markdowni.
Bootstrapi classidega saab teksti kitsamaks teha.

data.yaml

text: |
    ## **Lorem ipsum dolor sit amet**

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec blandit ligula quis bibendum porttitor. Vestibulum sed dui arcu. Proin quis eros sed dolor semper pretium. Fusce nec tortor vel eros pharetra porta. Phasellus ultrices tempor risus in laoreet. Vivamus efficitur purus vitae leo interdum aliquet.

index.pug

.text-center
    +markdown(self.text)

Lorem ipsum dolor sit amet

+textBlock(data, center, wide)

center - true/false
wide - true/false

data.yaml

textblock:
    - |
        ###### Lorem ipsum

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec blandit ligula quis bibendum porttitor. Vestibulum sed dui arcu. Proin quis eros sed dolor semper pretium. Fusce nec tortor vel eros pharetra porta. Phasellus ultrices tempor risus in laoreet. Vivamus efficitur purus vitae leo interdum aliquet. Pellentesque egestas lectus quis mauris consequat ullamcorper. Phasellus rhoncus metus eros, vitae gravida ipsum bibendum scelerisque. Curabitur mattis sollicitudin tortor id facilisis.
    - |
        ###### Lorem ipsum

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec blandit ligula quis bibendum porttitor. Vestibulum sed dui arcu. Proin quis eros sed dolor semper pretium. Fusce nec tortor vel eros pharetra porta. Phasellus ultrices tempor risus in laoreet. Vivamus efficitur purus vitae leo interdum aliquet. Pellentesque egestas lectus quis mauris consequat ullamcorper. Phasellus rhoncus metus eros, vitae gravida ipsum bibendum scelerisque. Curabitur mattis sollicitudin tortor id facilisis.

index.pug

+textBlock(self.textBlock, false, true)

Lorem ipsum

+textBlock(data, center, wide)

center - true/false
wide - true/false

data.yaml

textblock:
    - |
        ###### Lorem ipsum

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec blandit ligula quis bibendum porttitor. Vestibulum sed dui arcu. Proin quis eros sed dolor semper pretium. Fusce nec tortor vel eros pharetra porta. Phasellus ultrices tempor risus in laoreet. Vivamus efficitur purus vitae leo interdum aliquet. Pellentesque egestas lectus quis mauris consequat ullamcorper. Phasellus rhoncus metus eros, vitae gravida ipsum bibendum scelerisque. Curabitur mattis sollicitudin tortor id facilisis.
    - |
        ###### Lorem ipsum

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec blandit ligula quis bibendum porttitor. Vestibulum sed dui arcu. Proin quis eros sed dolor semper pretium. Fusce nec tortor vel eros pharetra porta. Phasellus ultrices tempor risus in laoreet. Vivamus efficitur purus vitae leo interdum aliquet. Pellentesque egestas lectus quis mauris consequat ullamcorper. Phasellus rhoncus metus eros, vitae gravida ipsum bibendum scelerisque. Curabitur mattis sollicitudin tortor id facilisis.
    - |
        ###### Lorem ipsum

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec blandit ligula quis bibendum porttitor. Vestibulum sed dui arcu. Proin quis eros sed dolor semper pretium. Fusce nec tortor vel eros pharetra porta. Phasellus ultrices tempor risus in laoreet. Vivamus efficitur purus vitae leo interdum aliquet. Pellentesque egestas lectus quis mauris consequat ullamcorper. Phasellus rhoncus metus eros, vitae gravida ipsum bibendum scelerisque. Curabitur mattis sollicitudin tortor id facilisis.

secondtextblock:
    - |
        Vestibulum sed dui arcu. Proin quis eros sed dolor semper pretium. Fusce nec tortor vel eros pharetra porta. Phasellus ultrices tempor risus laoreet.
    - |
        Vestibulum sed dui arcu. Proin quis eros sed dolor semper pretium. Fusce nec tortor vel eros pharetra porta. Phasellus ultrices tempor risus laoreet.
    - |
        Vestibulum sed dui arcu. Proin quis eros sed dolor semper pretium. Fusce nec tortor vel eros pharetra porta. Phasellus ultrices tempor risus laoreet.
    - |
        Vestibulum sed dui arcu. Proin quis eros sed dolor semper pretium. Fusce nec tortor vel eros pharetra porta. Phasellus ultrices tempor risus laoreet.

index.pug

+textBlock(self.textBlock, false, true)
.margin-top-80
    +textBlock(self.secondtextblock, false, true)

Lorem ipsum

Vestibulum sed dui arcu. Proin quis eros sed dolor semper pretium. Fusce nec tortor vel eros pharetra porta. Phasellus ultrices tempor risus laoreet.

Icon text

+iconText(data)

data.yaml

icontext:
    -
        icon: documents-4.svg
        title: Vivamus efficitur purus vitae leo interdum aliquet
        text: |
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec blandit ligula quis bibendum porttitor. Vestibulum sed dui arcu. Proin quis eros sed dolor semper pretium. Fusce nec tortor vel eros pharetra porta. Phasellus ultrices tempor risus in laoreet. Vivamus efficitur purus vitae leo interdum aliquet.
    -
        icon: transfer-frw.svg
        title: Vivamus efficitur purus vitae leo interdum aliquet
        text: |
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec blandit ligula quis bibendum porttitor. Vestibulum sed dui arcu. Proin quis eros sed dolor semper pretium. Fusce nec tortor vel eros pharetra porta. Phasellus ultrices tempor risus in laoreet. Vivamus efficitur purus vitae leo interdum aliquet.

index.pug

+iconText(self.icontext)

Vivamus efficitur purus vitae leo interdum aliquet

+iconText(data, twocolumns)

twocolumns - true/false

data.yaml

icontext:
    -
        icon: documents-4.svg
        title: Vivamus efficitur purus vitae leo
        text: |
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec blandit ligula quis bibendum porttitor. Vestibulum sed dui arcu.
    -
        icon: transfer-frw.svg
        title: Vivamus efficitur purus vitae leo
        text: |
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec blandit ligula quis bibendum porttitor. Vestibulum sed dui arcu.
    -
        icon: documents-4.svg
        title: Vivamus efficitur purus vitae leo
        text: |
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec blandit ligula quis bibendum porttitor. Vestibulum sed dui arcu.
    -
        icon: transfer-frw.svg
        title: Vivamus efficitur purus vitae leo
        text: |
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec blandit ligula quis bibendum porttitor. Vestibulum sed dui arcu.

index.pug

+iconText(self.icontext, true)

Vivamus efficitur purus vitae leo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec blandit ligula quis bibendum porttitor. Vestibulum sed dui arcu.

Vivamus efficitur purus vitae leo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec blandit ligula quis bibendum porttitor. Vestibulum sed dui arcu.

Vivamus efficitur purus vitae leo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec blandit ligula quis bibendum porttitor. Vestibulum sed dui arcu.

Vivamus efficitur purus vitae leo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec blandit ligula quis bibendum porttitor. Vestibulum sed dui arcu.

+iconText(data, colmuns)

data.yaml

icontext:
    -
        icon: payment.svg
        text: |
            **Vivamus**
            Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Donec blandit ligula quis bibendum porttitor. Vestibulum sed dui arcu.
    -
        icon: sync-2.svg
        text: |
            **Efficitur**
            Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Donec blandit ligula quis bibendum porttitor. Vestibulum sed dui arcu.
    -
        icon: check.svg
        text: |
            **Purus vitae leo**
            Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Donec blandit ligula quis bibendum porttitor. Vestibulum sed dui arcu.

index.pug

+iconText(self.icontext, 3)

Vivamus
Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Donec blandit ligula quis bibendum porttitor. Vestibulum sed dui arcu.

Efficitur
Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Donec blandit ligula quis bibendum porttitor. Vestibulum sed dui arcu.

Purus vitae leo
Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Donec blandit ligula quis bibendum porttitor. Vestibulum sed dui arcu.

+iconText(data)

data.yaml

icontext:
    -
        icon: payment.svg
        text: |
            **Vivamus**
            Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Donec blandit ligula quis bibendum porttitor. Vestibulum sed dui arcu.
            1. Comment: Vestibulum sed dui arcu.
    -
        icon: sync-2.svg
        text: |
            **Efficitur**
            Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Donec blandit ligula quis bibendum porttitor. Vestibulum sed dui arcu.
            1. Vestibulum sed dui arcu.
    -
        icon: check.svg
        text: |
            **Purus vitae leo**
            Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Donec blandit ligula quis bibendum porttitor. Vestibulum sed dui arcu.
            1. Vestibulum sed dui arcu.
        links:
            -
                title: Maksa
                url: '#'

index.pug

+iconText(self.icontext)

Vivamus
Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Donec blandit ligula quis bibendum porttitor. Vestibulum sed dui arcu.

Comment: Vestibulum sed dui arcu.

Efficitur
Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Donec blandit ligula quis bibendum porttitor. Vestibulum sed dui arcu.

Vestibulum sed dui arcu.

Purus vitae leo
Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Donec blandit ligula quis bibendum porttitor. Vestibulum sed dui arcu.

Vestibulum sed dui arcu.

Maksa

Steps

+processList(data)

data.yaml

processlist:
    list:
        -
            text: |
                **Vivamus**
                Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Donec blandit ligula quis bibendum porttitor. Vestibulum sed dui arcu.
        -
            text: |
                **Efficitur**
                Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Donec blandit ligula quis bibendum porttitor. Vestibulum sed dui arcu.
        -
            text: |
                **Purus vitae leo**
                Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Donec blandit ligula quis bibendum porttitor. Vestibulum sed dui arcu.

index.pug

+processList(self.processlist)

Vivamus
Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Donec blandit ligula quis bibendum porttitor. Vestibulum sed dui arcu.
Efficitur
Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Donec blandit ligula quis bibendum porttitor. Vestibulum sed dui arcu.
Purus vitae leo
Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Donec blandit ligula quis bibendum porttitor. Vestibulum sed dui arcu.

+processList(data)

data.yaml

processlist:
    list:
        -
            text: |
                **Vivamus**
                Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Donec blandit ligula quis bibendum porttitor. Vestibulum sed dui arcu.
        -
            text: |
                **Efficitur**
                Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Donec blandit ligula quis bibendum porttitor. Vestibulum sed dui arcu.
        -
            text: |
                **Purus vitae leo**
                Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Donec blandit ligula quis bibendum porttitor. Vestibulum sed dui arcu.
        -
            text: |
                **Purus vitae leo**
                Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Donec blandit ligula quis bibendum porttitor. Vestibulum sed dui arcu.

index.pug

+processList(self.processlist)

Vivamus
Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Donec blandit ligula quis bibendum porttitor. Vestibulum sed dui arcu.
Efficitur
Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Donec blandit ligula quis bibendum porttitor. Vestibulum sed dui arcu.
Purus vitae leo
Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Donec blandit ligula quis bibendum porttitor. Vestibulum sed dui arcu.
Purus vitae leo
Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Donec blandit ligula quis bibendum porttitor. Vestibulum sed dui arcu.

+processList(data)

data.yaml

processlist:
    list:
        -
            text: |
                **Vivamus**
                Dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        -
            text: |
                **Efficitur**
                Dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        -
            text: |
                **Purus vitae leo**
                Dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        -
            text: |
                **Purus vitae leo**
                Dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        -
            text: |
                **Purus vitae leo**
                Dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

index.pug

+processList(self.processlist)

Vivamus
Dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Efficitur
Dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Purus vitae leo
Dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Purus vitae leo
Dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Purus vitae leo
Dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Custom

Text with side title

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscig elit. Donec blandit ligula quis bibendum porttitor. Vestibulum sed dui arcu. Proin quis eros sed dolor semper pretium. Fusce nec tortor vel eros pharetra porta. Phasellus ultrices tempor risus in laoreet. Vivamus efficitur purus vitae leo interdum aliquet. Pellentesque egestas lectus quis mauris consequat ullamcorper. Phasellus rhoncus metus eros, vitae gravida ipsum bibendum scelerisque. Curabitur mattis sollicitudin tortor id facilisis.

Donec blandit ligula quis bibendum porttitor. Vestibulum sed dui arcu. Proin quis eros sed dolor semper pretium. Fusce nec tortor vel eros pharetra porta. Phasellus ultrices tempor risus in laoreet. Vivamus efficitur purus vitae leo interdum aliquet. Pellentesque egestas lectus quis mauris consequat ullamcorper. Phasellus rhoncus metus eros, vitae gravida ipsum bibendum scelerisque. Curabitur mattis sollicitudin tortor id facilisis.

Article

Article tegemiseks on olemas +article() mixin.

Mixini objektil järgmised omadused

title: markdown tiitli ja autori jaoks
picture: autori pilt
preview: markdown, tekst mis on koguaeg näha.
text: markdown, kogu tekst, näha pärast MORE nupu vajutamist

PS preview sisu osa peab olema ka text sisu sees olemas!

data.yaml

article:
    title: |
        **Lorem ipsum dolor sit amet, consectetur adipiscig elit**
        *Andres Viisemann, Head of LHV Pension Funds*

    picture: pension/viisemann-turuylevaade.png
    preview: |
        Lorem ipsum dolor sit amet, consectetur adipiscig elit. Donec blandit ligula quis bibendum porttitor. Vestibulum sed dui arcu. Proin quis eros sed dolor semper pretium. Fusce nec tortor vel eros pharetra porta. Phasellus ultrices tempor risus in laoreet. Vivamus efficitur purus vitae leo interdum aliquet.
    text: |
        Pellentesque egestas lectus quis mauris consequat ullamcorper. Phasellus rhoncus metus eros, vitae gravida ipsum bibendum scelerisque. Curabitur mattis sollicitudin tortor id facilisis.

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec blandit ligula quis bibendum porttitor. Vestibulum sed dui arcu. Proin quis eros sed dolor semper pretium. Fusce nec tortor vel eros pharetra porta. Phasellus ultrices tempor risus in laoreet. Vivamus efficitur purus vitae leo interdum aliquet. Pellentesque egestas lectus quis mauris consequat ullamcorper. Phasellus rhoncus metus eros, vitae gravida ipsum bibendum scelerisque. Curabitur mattis sollicitudin tortor id facilisis.

index.pug

+article(self.article)

Lorem ipsum dolor sit amet, consectetur adipiscig elit
Andres Viisemann, Head of LHV Pension Funds

Pellentesque egestas lectus quis mauris consequat ullamcorper. Phasellus rhoncus metus eros, vitae gravida ipsum bibendum scelerisque. Curabitur mattis sollicitudin tortor id facilisis.

Tule kliendiks

Arveldused

Pangakaardid

Teeninduskanalid

Säästmine

Investeerimine

Investeerimisnõu

Muud teenused

Eralaenud

Ettevõtete laenud

Liising

Kaubanduse rahastamine

Tooted

Kahjukäsitlus

pensionireform

minu pension

pensioni kogumine

lisainfo

Igapäevapangandus

Igapäevapangandus

Tule kliendiks

Arveldused

Pangakaardid

Teeninduskanalid

Tule kliendiks

Arveldused

Pangakaardid

Teeninduskanalid

Raha kasvatamine

Raha kasvatamine

Säästmine

Investeerimine

Investeerimisnõu

Muud teenused

Säästmine

Investeerimine

Investeerimisnõu

Muud teenused

Laen ja liising

Laen ja liising

Eralaenud

Ettevõtete laenud

Liising

Kaubanduse rahastamine

Eralaenud

Ettevõtete laenud

Liising

Kaubanduse rahastamine

Kindlustus

Kindlustus

Tooted

Kahjukäsitlus

Tooted

Kahjukäsitlus

Pension

Pension

pensionireform

minu pension

pensioni kogumine

lisainfo

pensionireform

minu pension

pensioni kogumine

lisainfo

Tule kliendiks

Kasulikku

LHV

Kontakt

UI kit

Typography

Heading 1- Light 45px/45px

Heading 2 - Bold 26px/30px

Heading 1- Light 45px/45px

Heading 2 - Bold 26px/30px

Colors

Buttons

Navigation

Forms

Icons

Headers