01 | BASIC

Tab

Notifications
Consents

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam alias atque eligendi possimus maiores iste earum ex officiis accusantium natus, eveniet rem suscipit voluptatum velit aut dolorum molestias consequuntur debitis.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero cupiditate maxime assumenda, mollitia, quasi saepe, tenetur velit aliquid sequi suscipit consequuntur quas, esse veniam tempore temporibus cumque unde blanditiis eum!

Copy

H1 - Roboto, weight: medium, size: 24px

H2 - Roboto, weight: medium, size: 20px

H3 - Roboto, weight: medium, size: 18px

Paragraph - Roboto, weight: regular/medium/bold, size: 16px

Seznam

Lorem ipsum dolor sit amet
Consectetur adipisicing elit
Libero cupiditate maxime assumenda
tenetur velit aliquid sequi suscipit consequuntur quas

02 | Buttons

Primary

Secondary

Inverse

Borderless with chevron

Skip automatic identification

03 | Colors

Font Colors on light bg

Headline blue
#3C476A

Body blue
#516587

Small blue
#9CA6B7

Font Colors on dark bg

Headline light
#FFFFFF

Body light
#EFF3FA

Small blue
#9CA6B7

Attention Colors

Alert Orange
#FF9A1E

OK Green
#34C520

Error Red
#E61B29

04 | Praktické ukázky

Nadpis H1 + text

Aenean tristique lacus non lacinia suscipit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas at placerat justo. Proin neque libero, aliquet nec sodales non, pulvinar a turpis. In sit amet nisl imperdiet urna aliquam vestibulum in eu augue.


                  <div class="container margin-large">

               <div class="row">

                <div class="col-sm-12 col-md-6">

                 <div class="background-white">

                  <h1>Nadpis H1 + text</h1>

                  <p>Proin neque libero, aliquet nec sodales non....</p>

                 </div>

                </div>

               </div>

              </div>

Nadpis H1

Podnadpis H2 + text


                <div class="container margin-large">

                 <div class="row">

                  <div class="col-sm-12 col-md-6">

                   <div class="background-white">

                    <h1>Nadpis H1 + text</h1>

                    <h2>Podnadpis H2</h2>

                    <p>Aenean tristique lacus non lacinia suscipit....</p>

                 </div>

                  </div>

                 </div>

                </div>

Nadpis H2

Aliquet nec sodales non, pulvinar a turpis. In sit amet nisl imperdiet urna aliquam vestibulum in eu augue.

Více informací

Podnadpis H2 + text


                  <div class="container">

                   <div class="row">

                    <div class="col-sm-12 col-md-6 margin-large">

                     <div class="background-white">

                      <h2 class="text-left">Nadpis H2</h2>

                      <p class="text-left">Aliquet nec sodales non, pulvinar a turpis...</p>

                       <div class="box-heading margin-0 background-white">

                        <h2 class="h3">

                         <a href="#head-collapse" class="collapse-link v-center center-xs" data-toggle="collapse" aria-expanded="true">

                          <span>Více informací</span>

                          <i class="ico-chevron-down collapse-icon fill-blue" aria-hidden="true"></i>

                         </a>

                        </h2>

                       </div>

                     </div>

                    </div>

                   </div>

                  </div>

Nadpis H2 + infobox

Nová aplikace měla v lednu 546 465 zákazníků. Výherce jsme již kontaktovali. Gratulujeme!


                    <div class="container">

                       <div class="col-sm-12 col-md-6 margin-large">

                        <div class="background-white">

                        <h2 class="text-left">Nadpis H2 + infobox</h2>

                         <div class="class="alert alert-flex background-gray-lighter text-large margin-base" role="alert">

                          <div class="alert-content">

                           <p class="text-left">Nová aplikace měla v lednu 546 465 zákazníků. Výherce jsme již kontaktovali. Gratulujeme!</p>

                          </div>

                        < /div>

                        </div>

                       </div>

                      </div>

Podmínky

Podmínky soutěže (108 kB)

Zobrazit


                      <div class="container">

                       <div class="row">

                        <div class="col-xs-12 margin-large">

                         <div class="background-white">

                          <h2 id="podminky" class="text-left">Podmínky</h2>

                          <div class="like-table">

                           <div class="row middle-xs like-table-row js-clickable">

                            <div class="col-xs-8 col-sm-10">

                             <div class="v-center">

                              <i class="ico-pdf" data-ico-width="30" data-ico-height="30"></i>

                              <h4>Podmínky soutěže <span class="text-gray-dark no-bold text-small">(108 kB)</span></h4>

                             </div>

                            </div>

                            <div class="col-xs-4 col-sm-2 text-right">

                             <a href="/soutez-3gb/obchodni-podminky" class="bold">Zobrazit</a>

                            </div>

                           </div>

                          </div> 

                         </div>

                        </div>

                       </div>

                      </div>

Nadpis H1

Podnadpis H2 + obrázek

V únoru můžete vyhrát

3x telefon Honor 10

10x 3GB dat zdarma


                      <div class="container">

                       <div class="row">

                        <div class="col-md-12 margin-large">

                         <div class="background-white">

                          <div class="row">

                           <div class="col-sm-12">

                            <h1 class="text-center">Nadpis H1</h1>

                            <h2 class="text-center">Podnadpis H2 + obrázek</h2>

                           </div>

                           <div class="col-md-12">

                            <img class="img-responsive center-block" src="/dcpublic/obrazok-sutaz-768x462.jpg" alt="Telefon Honor 10 - obrázek k soutěži">

                           </div>

                           <div class="col-md-12">

                            <h3 class="text-center">V únoru můžete vyhrát</h3>

                            <p class="text-center">3x telefon Honor 10</p>

                            <p class="text-center">10x 3GB dat zdarma</p>

                           </div>

                          </div>

                         </div>

                        </div>

                       </div>

                      </div>