– Typography

Image Borders

<img class="pe-img-polaroid" src="http://placehold.it/150x150" alt="Opis zdjęcia">
Opis zdjęcia
<img class="pe-img-rounded" src="http://placehold.it/150x150" alt="Opis zdjęcia">
Opis zdjęcia
<img class="pe-img-circle" src="http://placehold.it/150x150" alt="Opis zdjęcia">
Placeholder 3

Numered blocks

<p class="pe-block"><span class="pe">01</span>Treść...</p>

01Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris.

02Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris.

03Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris.

<p class="pe-block second"><span class="pe">a</span>Treść...</p>

aLorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris.

bLorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris.

cLorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris.

Colored blocks

to jest paragraf ze znacznikiem class “green
<p class="green"> Treść... </p>

to jest paragraf ze znacznikiem class “blue
<p class="blue"> Treść... </p>

to jest paragraf ze znacznikiem class “orange
<p class="orange"> Treść... </p>

to jest paragraf ze znacznikiem class “red
<p class="red"> Treść... </p>

to jest paragraf ze znacznikiem class “pe-success
<p class="pe-success"> Treść... </p>

to jest paragraf ze znacznikiem class “pe-info
<p class="pe-info"> Treść... </p>

to jest paragraf ze znacznikiem class “pe-warning
<p class="pe-warning"> Treść... </p>

to jest paragraf ze znacznikiem class “pe-alert
<p class="pe-alert"> Treść... </p>

Quote blocks

to jest paragraf ze znacznikiem class “quote-left
<p class="quote-left"><span class="fa fa-quote-left"></span> Treść...</p>

to jest paragraf ze znacznikiem class “quote-right
<p class="quote-right"> Treść...</p><span class="fa fa-quote-right"></span>

Icon blocks

to jest paragraf ze znacznikiem class “pebadge
<p class="pebadge">Treść...</p>

to jest paragraf ze znacznikiem class “pecalendar
<p class="pecalendar"> Treść...</p>

to jest paragraf ze znacznikiem class “pechat
<p class="pechat"> Treść...</p>

to jest paragraf ze znacznikiem class “pecheck
<p class="pecheck"> Treść...</p>

to jest paragraf ze znacznikiem class “pecloud
<p class="pecloud"> Treść...</p>

to jest paragraf ze znacznikiem class “pedirection
<p class="pedirection"> Treść...</p>

to jest paragraf ze znacznikiem class “pedivide
<p class="pedivide"> Treść...</p>

to jest paragraf ze znacznikiem class “peerror
<p class="peerror"> Treść...</p>

to jest paragraf ze znacznikiem class “pefire
<p class="pefire"> Treść...</p>

to jest paragraf ze znacznikiem class “peflag
<p class="peflag"> Treść...</p>

to jest paragraf ze znacznikiem class “peheart
<p class="peheart"> Treść...</p>

to jest paragraf ze znacznikiem class “pehome
<p class="pehome"> Treść...</p>

to jest paragraf ze znacznikiem class “peinfo
<p class="peinfo"> Treść...</p>

to jest paragraf ze znacznikiem class “pelist
<p class="pelist"> Treść...</p>

to jest paragraf ze znacznikiem class “pemail
<p class="pemail"> Treść...</p>

to jest paragraf ze znacznikiem class “pepeople
<p class="pepeople"> Treść...</p>

to jest paragraf ze znacznikiem class “pestar
<p class="pestar"> Treść...</p>

to jest paragraf ze znacznikiem class “pestat
<p class="pestat"> Treść...</p>

Unordered lists

Domyślna lista
  • Duis tincidunt nunc sit amet ipsum
  • Duis tincidunt nunc sit amet ipsum
  • Duis tincidunt nunc sit amet ipsum
    • Duis tincidunt nunc sit amet ipsum
    • Duis tincidunt nunc sit amet ipsum
      • Duis tincidunt nunc sit amet ipsum
      • Duis tincidunt nunc sit amet ipsum
      • Duis tincidunt nunc sit amet ipsum
To jest lista ze znacznikiem class "pe-light"</p>
<ul class="pe-light">
<li style="list-style-type: none;">
<ul class="pe-light">
    • Duis tincidunt nunc sit amet ipsum
    • Duis tincidunt nunc sit amet ipsum
    • Duis tincidunt nunc sit amet ipsum
      • Duis tincidunt nunc sit amet ipsum
      • Duis tincidunt nunc sit amet ipsum
        • Duis tincidunt nunc sit amet ipsum
        • Duis tincidunt nunc sit amet ipsum
        • Duis tincidunt nunc sit amet ipsum
To jest lista ze znacznikiem class "pe-dark"
Enter the class name to ul tag</p>
<ul class="pe-dark">
<li style="list-style-type: none;">
<ul class="pe-dark">
    • Duis tincidunt nunc sit amet ipsum
    • Duis tincidunt nunc sit amet ipsum
    • Duis tincidunt nunc sit amet ipsum
      • Duis tincidunt nunc sit amet ipsum
      • Duis tincidunt nunc sit amet ipsum
        • Duis tincidunt nunc sit amet ipsum
        • Duis tincidunt nunc sit amet ipsum
        • Duis tincidunt nunc sit amet ipsum

Ordered lists

Domyślna lista
  1. Duis tincidunt nunc sit amet ipsum
  2. Duis tincidunt nunc sit amet ipsum
  3. Duis tincidunt nunc sit amet ipsum
    1. Duis tincidunt nunc sit amet ipsum
    2. Duis tincidunt nunc sit amet ipsum
      1. Duis tincidunt nunc sit amet ipsum
      2. Duis tincidunt nunc sit amet ipsum
      3. Duis tincidunt nunc sit amet ipsum
To jest lista ze znacznikiem class "pe-roman"</p>
<ol class="pe-roman">
<li style="list-style-type: none;">
<ol class="pe-roman">
    1. Duis tincidunt nunc sit amet ipsum
    2. Duis tincidunt nunc sit amet ipsum
    3. Duis tincidunt nunc sit amet ipsum
      1. Duis tincidunt nunc sit amet ipsum
      2. Duis tincidunt nunc sit amet ipsum
        1. Duis tincidunt nunc sit amet ipsum
        2. Duis tincidunt nunc sit amet ipsum
        3. Duis tincidunt nunc sit amet ipsum
To jest lista ze znacznikiem class "pe-alpha"</p>
<ol class="pe-alpha">
<li style="list-style-type: none;">
<ol class="pe-alpha">
    1. Duis tincidunt nunc sit amet ipsum
    2. Duis tincidunt nunc sit amet ipsum
    3. Duis tincidunt nunc sit amet ipsum
      1. Duis tincidunt nunc sit amet ipsum
      2. Duis tincidunt nunc sit amet ipsum
        1. Duis tincidunt nunc sit amet ipsum
        2. Duis tincidunt nunc sit amet ipsum
        3. Duis tincidunt nunc sit amet ipsum

Other styles

Offcanvas button


Przycisk Czytaj więcej
To jest link “Czytaj więcej” ze znacznikiem class “readmore”

<a class="readmore" href="#"> Czytaj więcej </a>

Czytaj więcej – przykład

To jest link “Czytaj więcej” ze znacznikiem class “readmore readmore-large”

<a class="readmore readmore-large" href="#"> Czytaj więcej </a>

Czytaj więcej – przykład

To jest link ze znacznikem class “readmore readmore-large readmore-icon”

<a class="readmore readmore-large readmore-icon" href="#"> Czytaj więcej </a>

Czytaj więcej – przykład

Domyślny przycisk
To jest link ze znacznikiem class “button”

<a class="button" href="#"> Przycisk </a>

Przycisk – pzykład

Font Awesome

All available font Awesome icons

Example of usage

Example of usage :




	
Biuletyn Informacji Publicznej
Miasto Stołeczne Warszawa
Warszawskie Centrum Pomocy Rodzinie
Stołeczne Centrum Osób Niepełnosprawnych
Powrót do góry