Polish (Poland)English (United Kingdom)
Typografia
This page presents most of typographical aspects of JA Purity ii. Make your readers happy with great Typography and User Experience!

 

To jest nagłówek I poziomu - h1

Lorem tortor Curabitur urna interdum Maecenas ut felis Sed euismod id. Congue Quisque augue elit dolor nibh id lobortis egestas tristique fringilla. Laoreet elit.

To jest nagłówek II poziomu - h2

Wisi sed pede Phasellus Vestibulum elit consequat consequat eu pellentesque metus. Laoreet Vestibulum pharetra pede mattis nunc dapibus id magna a dictumst.

To jest nagłówek III poziomu - h3

Wisi sed pede Phasellus Vestibulum elit consequat consequat eu pellentesque metus. Laoreet Vestibulum pharetra pede mattis nunc dapibus id magna a dictumst. Nunc cursus sem et pretium sapien eget consectetuer malesuada Phasellus Curabitur.

To jest nagłówek IV poziomu - h4

Wisi sed pede Phasellus Vestibulum elit consequat consequat eu pellentesque metus. Laoreet Vestibulum pharetra pede mattis nunc dapibus id magna a dictumst. Nunc cursus sem et pretium sapien eget consectetuer malesuada Phasellus Curabitur.

To jest nagłówek V poziomu - h5

Wisi sed pede Phasellus Vestibulum elit consequat consequat eu pellentesque metus. Laoreet Vestibulum pharetra pede mattis nunc dapibus id magna a dictumst. Nunc cursus sem et pretium sapien eget consectetuer malesuada Phasellus Curabitur.

To jest nagłówek VI poziomu - h6

Wisi sed pede Phasellus Vestibulum elit consequat consequat eu pellentesque metus. Laoreet Vestibulum pharetra pede mattis nunc dapibus id magna a dictumst. Nunc cursus sem et pretium sapien eget consectetuer malesuada Phasellus Curabitur.

Wyróżnianie treści

Poniżej jest przykład cytowania kodu programu. Stosowanie: <pre>Tutaj kod</pre> albo <div class="code">Tutaj kod</div>.

#ja-rightcol {
  width: 180px;
  float: right;
  color: #EEEEEE;
}

To jest przykład wyróżnionej frazy w tekście. Stosowanie: <span class="highlight">Tutaj wpisz wyróżnione słowa!</span>. A tu pozostałe.

To jest przykład stylu naśladującego stare manuskrypty, stosowanego niekiedy w magazynach internetowych. JA Purity II zapewnia w Twoim szablonie tę możliwość za pomocą specjalnej klasy wykorzystującej technikę udostępnioną w CSS2 - selektora peudoklasy first-letter. Tych kilka zdań opisujących powinno wystarczyć nawet w przypadku szerokiego ekranu, by zobaczyć efekt powiększenia pierwszego znaku w akapicie.
Stosowanie: <span class="dropcap">T </span> <- by otrzymać powiększoną literę.

This is a sample Blockquote. Use <blockquote>Your quote goes here!</blockquote> to form a quote!
This is a sample Blockquote. Use <blockquote><span class="open">Y</span>our quote goes her<span class="close">e!</span></blockquote> to form a quote!

Style list (wykazów)

  1. To jest przykład listy numerowanej.
  2. Lista numerowana - drugi punkt
  3. Lista numerowana - trzeci punkt
  4. Lista numerowana - czwarty punkt
  • To jest przykład listy nienumerowanej.
  • Lista nienumerowana - kolejny punkt
  • Lista nienumerowana - następny punkt
  • Lista nienumerowana - ostatni punkt
  •  To jest przykład listy nienumerowanej klasy „arrow”.
  •  Stosowanie: <ul class="arrow"><li><span class="icon">&nbsp;</span>Tutaj treść punktu!</li></ul>
  •  To jest przykład listy nienumerowanej klasy „arrow”.
  •  To jest przykład listy nienumerowanej klasy „star”.
  •  Stosowanie: <ul class="star"><li><span class="icon">&nbsp;</span>Tutaj treść punktu!</li></ul>
  •  To jest przykład listy nienumerowanej klasy „star”.
  •  To jest przykład listy nienumerowanej klasy „checklist”.
  •  Stosowanie: <ul class="checklist"><li><span class="icon">&nbsp;</span>Tutaj treść punktu!</li></ul>
  •  To jest przykład listy nienumerowanej klasy „checklist”.
  •  To jest przykład listy nienumerowanej klasy „phone”.
  •  Stosowanie: <ul class="phone"><li><span class="icon">&nbsp;</span>Tutaj treść punktu!</li></ul>
  •  To jest przykład listy nienumerowanej klasy „phone”.
  •  To jest przykład listy nienumerowanej klasy „address”.
  •  Stosowanie: <ul class="address"><li><span class="icon">&nbsp;</span>Tutaj treść punktu!</li></ul>
  •  To jest przykład listy nienumerowanej klasy „address”.

01To jest przykład bloku numerowanego. Stosowanie: <p class="blocknumber-1"><span class="bignumber">01.</span>Tutaj wpisz swój tekst!</p>, aby uzyskać punkt numerowanego bloku!

02To jest przykład bloku numerowanego. Stosowanie: <p class="blocknumber-1"><span class="bignumber">02.</span>Tutaj wpisz swój tekst!</p>, aby uzyskać punkt numerowanego bloku!

03To jest przykład bloku numerowanego. Stosowanie: <p class="blocknumber-1"><span class="bignumber">03.</span>Tutaj wpisz swój tekst!</p>, aby uzyskać punkt numerowanego bloku!

01To jest przykład bloku numerowanego. Stosowanie: <p class="blocknumber-2"><span class="bignumber">01.</span>Tutaj wpisz swój tekst!</p>, aby uzyskać punkt numerowanego bloku!

02To jest przykład bloku numerowanego. Stosowanie: <p class="blocknumber-2"><span class="bignumber">02.</span>Tutaj wpisz swój tekst!</p>, aby uzyskać punkt numerowanego bloku!

03To jest przykład bloku numerowanego. Stosowanie: <p class="blocknumber-2"><span class="bignumber">03.</span>Tutaj wpisz swój tekst!</p>, aby uzyskać punkt numerowanego bloku!

01To jest przykład bloku numerowanego. Stosowanie: <p class="blocknumber-3"><span class="bignumber">01.</span>Tutaj wpisz swój tekst!</p>, aby uzyskać punkt numerowanego bloku!

02To jest przykład bloku numerowanego. Stosowanie: <p class="blocknumber-3"><span class="bignumber">02.</span>Tutaj wpisz swój tekst!</p>, aby uzyskać punkt numerowanego bloku!

03To jest przykład bloku numerowanego. Stosowanie: <p class="blocknumber-3"><span class="bignumber">03.</span>Tutaj wpisz swój tekst!</p>, aby uzyskać punkt numerowanego bloku!

Style akapitów

 To jest przykład komunikatu błędu. Stosowanie: <p class="error"><span class="icon">&nbsp;</span>Tutaj wpisz treść komunikatu</p>, aby uzyskać taki efekt.

 To jest przykład komunikatu informacyjnego. Stosowanie: <p class="message"><span class="icon">&nbsp;</span>Tutaj wpisz treść komunikatu</p>, aby uzyskać taki efekt.

 To jest przykład porady - wskazówki. Stosowanie: <p class="tips"><span class="icon">&nbsp;</span>Tutaj wpisz treść komunikatu</p>, aby uzyskać taki efekt.

 To jest przykład stylu „key”. Stosowanie: <p class="key"><span class="icon">&nbsp;</span>Tutaj wpisz treść wiadomości!</p>, aby uzyskać taki efekt.

 To jest przykład stylu „tag”. <p class="tag"><span class="icon">&nbsp;</span>Tutaj wpisz treść wiadomości!</p>, aby uzyskać taki efekt.

 To jest przykład stylu „cart”. <p class="cart"><span class="icon">&nbsp;</span>Tutaj wpisz treść wiadomości!</p>, aby uzyskać taki efekt.

 To jest przykład stylu „doc”. <p class="doc"><span class="icon">&nbsp;</span>Tutaj wpisz treść wiadomości!</p>, aby uzyskać taki efekt.

 To jest przykład stylu „note”. <p class="note"><span class="icon">&nbsp;</span>Tutaj wpisz treść wiadomości!</p>, aby uzyskać taki efekt.

 To jest przykład stylu „photo”. <p class="photo"><span class="icon">&nbsp;</span>Tutaj wpisz treść wiadomości!</p>, aby uzyskać taki efekt.

 To jest przykład stylu „mobi”. <p class="mobi"><span class="icon">&nbsp;</span>Tutaj wpisz treść wiadomości!</p>, aby uzyskać taki efekt.

Dymki (chmurki)

<div class="bubble bubble-l2 clearfix">
<div class="box-ct">
Przykład stylu klasy bubble-l2 Tutaj wpisz swój tekst! : A B C D E F G H I J a b c d e f g h i j
</div>
<span class="arrow">&nbsp;</span>
<span class="author">Tutaj wpisz nazwę autora</span>
</div>
  Tutaj wpisz nazwę autora
<div class="bubble bubble-hl2 clearfix">
<div class="box-ct">
Przykład stylu klasy bubble-hl2 Tutaj wpisz swój tekst! : A B C D E F G H I J a b c d e f g h i j
</div>
<span class="arrow">&nbsp;</span>
<span class="author">Tutaj wpisz nazwę autora</span>
</div>
  Tutaj wpisz nazwę autora

Style bloków tekstu i legend (objaśnień)

To jest przykład stylu klasy „przypominajka” - box-sticky. Stosowanie: <p class="box-sticky">Tutaj treść przypomnienia!</p>, aby stworzyć blok Pzypominajka!

To jest przykład stylu klasy „pobierz” - box-download. Stosowanie: <p class="box-download">Wpisz tutaj informację o dokumencie i odnośnik do pobrania!</p>, aby stworzyć blok Pobierz!

To jest przykład szarego boksu. Stosowanie <p class="box-grey">Wpisz tutaj swoją treść!</p>, aby stworzyć szary boks!

To jest przykład wyrożnionego boksu. Stosowanie <p class="box-hilite">Wpisz tutaj swoją treść!</p>, aby stworzyć wyróżniony boks!

Style legendy (objaśnienia)

Stosowanie: <div class="legend"><h3 class="legend-title">Tytuł legendy</h3><p>Tekst objaśnienia: Lorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae. A mauris risus consequat ac egestas netus est Vestibulum Curabitur consectetuer.</p></div>

Style wyróżnionej legendy (objaśnienia)

Stosowanie: <div class="legend-hilite"><h3 class="legend-title">Tytuł legendy</h3><p>Tekst objaśnienia: Lorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae. A mauris risus consequat ac egestas netus est Vestibulum Curabitur consectetuer.</p></div>
 





Nasze serwisy: nearshore-it.eu | jbusinessintelligence.pl
tab-8
tab-5