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.jade

+sectionTitle(D.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.jade

+markdown(D.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: /assets/files/conditions/Conditions_of_Au-Client_Agreement-ET.pdf

index.jade

+markdown(D.list)

+linksList(D.linkslist.title, D.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.jade

+disclaimer(D.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.

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.

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

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.

Colors

Main colors

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

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

Black
#00000F
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.jade

+button(D.button)

Ü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.jade

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

+pills(D.pills)

Forms

%
%
%

Icons

0-eur.svg

0-eur.svg

1-place.svg

1-place.svg

2-place.svg

2-place.svg

3-place.svg

3-place.svg

1999.svg

1999.svg

2002.svg

2002.svg

2005.svg

2005.svg

2009.svg

2009.svg

2010.svg

2010.svg

2011.svg

2011.svg

2013.svg

2013.svg

2014.svg

2014.svg

2015.svg

2015.svg

2016.svg

2016.svg

2017.svg

2017.svg

2018.svg

2018.svg

abc.svg

abc.svg

aid.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/thumb/ii-sammas.png
    buttons:
        -
            title: Medium button
            url: /pension/ii/index.cfm?l3=et&fuseaction=mod_switch
            onclick: ga('send', 'event', 'pension/ii_EE', 'liitu-fondiga', 'Button_advanced_header');
    arrows:
        -
            title: Link with arrow
            url: /pension/ii/index.cfm?l3=et
            onclick: ga('send', 'event', '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.jade

+header(D.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
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.jade

+markdown(D.table)
Region/ExchangeCountriesNon-Pro Fees/monthPro Fees/month
AMEX (Network B/CTA) Top of Book (L1)United StatesUSD 1.50USD 23.00
AMEX Options Depth of BookUnited StatesUSD 10.00USD 60.00
AMEX MKT Order ImbalancesUnited StatesFreeFree
ArcaBook Options Depth of BookUnited StatesUSD 10.00USD 60.00
ArcaBook for EquitiesUnited StatesUSD 11.00USD 40.00
CBOE Futures Exchange Level IUnited StatesUSD 2.50USD 7.50
CBOE Futures Exchange Level IIUnited StatesUSD 4.00USD 15.00
Dow Jones Global IndicesUnited StatesUSD 1.00USD 2.00
CME S&P IndexesUnited StatesUSD 4.25USD 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.jade

+conditionsTable(D.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: PartnerCredit.png
        -
            title: Gold Debit Card
            image: PartnerDebit.png

    tables:
        -
            -
                - Opportunities
                -
                    title: Gold Credit Card
                    image: goldCredit.png
                -
                    title: Gold Debit Card
                    image: goldDebit.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: ga('send', 'event', 'partner_EE', 'telli-krediitkaart', 'Button_table');
                -
                    title: Apply Gold Debit Card
                    url: /auth/card_appl_login.cfm?l3=et&i_design_code=KFD&i_prodid=26
                    onclick: ga('send', 'event', 'partner_EE', 'telli-deebetkaart', 'Button_table');

index.jade

+comparisonTable(D.comparisonTable)

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

 

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.

Calculators

Basic
%
%
Monthly instalment
123.45
Apply
Laenusumma7000
Periood

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

Two columns
%
%
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.jade

+accordion(D.accordion)

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.

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 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 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

Tooltips

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)
        [Chat with client support](/personal/csupp.cfm)
        <info@lhv.ee>

index.jade

+singleContact(D.contact)

LHV Pank client support
Mon–Fri 9–19, Sat 10–17*
6 800 400
Skype
Chat with client support
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.jade

+contactThumbnail(D.contacts)

Indrek Nuume

juhatuse liige / ettevõtete panganduse juht

680 2622

680 2622

indrek.nuume@lhv.ee

Arko Kurtmann

äripanganduse osakonna juht

680 2766

680 2766

arko.kurtmann@lhv.ee

Egon Rand

ärikliendihaldur

680 2768

680 2768

egon.rand@lhv.ee

Krislin Lehtsaar

ärikliendihaldur

680 0466

680 0466

krislin.lehtsaar@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.jade

+contactCard(D.contacts)

Andres Viisemann

head of LHV Pension Funds

andres.viisemann@lhv.eeclose icon

Joel Kukemelk

passiivsete fondide fondijuht

joel.kukemelk@lhv.eeclose icon

Eve Sirel

operatsioonide juht

eve.sirel@lhv.eeclose icon

Kelli Valdek

riski- ja vastavuskontrolli juht

kelli.valdek@lhv.eeclose icon

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

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

  • title: tiitel
  • picture: pildi path
  • path: viide

data.yaml

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

index.jade

+relatedProducts(D.related)

+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.jade

+hrText(D.text)

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.jade

.text-center
    +markdown(D.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.

+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.jade

+textBlock(D.textBlock, false, true)
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.

+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.jade

+textBlock(D.textBlock, false, true)
.margin-top-80
    +textBlock(D.secondtextblock, false, true)
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.

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.

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.jade

+iconText(D.icontext)
Vivamus efficitur purus vitae leo interdum aliquet

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.

Vivamus efficitur purus vitae leo interdum aliquet

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.

+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.jade

+iconText(D.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.jade

+iconText(D.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.jade

+iconText(D.icontext)

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.

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.

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.
Maksa

Steps

+processList(data)

data.yaml

processlist:
    -
        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.jade

+processList(D.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:
    -
        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.jade

+processList(D.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:
    -
        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.jade

+processList(D.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.jade

+article(D.article)

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

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.