01 | Typography

Headings and paragraphs

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


List

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


Share button


Copy button

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

HF - Kartička

Pátky v apce

20. 3.

20% sleva na společenské hry
Happy Fridays - ikonka

Chci slevu

<div class="container max">
 <div class="row">
  <div class="col-xs-12">
   <h1 class="happy-friday"><strong>Pátky v apce</strong></h1>
   <div class="background-stripe">
    <p class="day">20. 3.</p>
    <div class="current-gift">20% sleva na společesnké hry</div>
    <img src="https://www.t-mobile.cz/dcpublic/HF_discount.png" alt="Happy Fridays - ikonka" class="img-responsive present">
   </div>
   <p class="text-center" style="margin-bottom: 0px;"><a class="btn btn-app" style="margin: 20px 0;" href="https://www.t-mobile.cz/hf-detail">Chci slevu</a></p>
  </div>
</div>


HF - Countdown

Pátky v apce

27. 3.

Do pátku zbývá

dny
hodiny
minuty


<div class="container max margin-large">
 <div class="row">
  <div class="col-xs-12">
  <h1 class="happy-friday-cd"><strong>Pátky v apce</strong></h1>
  <div class="background-stripe-cd" style="position: relative;">
  <h3 class="day-cd">27. 3.</h3>
  <img src="https://www.t-mobile.cz/dcpublic/present-fridays.png" class="img-responsive present-cd">
  <h2 class="left">Do pátku zbývá</h2>
   <div class="row countdown">
    <div class="col-xs-4 countdown_box">
     dny <br>
    <span id="days"></span>
   </div>
   <div class="col-xs-4 countdown_box middle">
     hodiny <br>
     <span id="hours"></span>
   </div>
   <div class="col-xs-4 countdown_box">
     minuty <br>
     <span id="minutes"></span>
   </div>
  </div>
  <p id="show"></p>
  </div>
 </div>
</div>
05 | Practical examples

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.

Chci slevu

Nadpis H2 + infobox


<div class="container max margin-large">
 <div class="row">
  <div class="col-xs-12">
   <div class="background-white">
    <h1>Nadpis H1 + text</h1>
     <p>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.</p>
     <p><a class="btn btn-app" style="margin: 13px 0 20px 0;" href="https://www.t-mobile.cz/hf-detail">Chci slevu</a></p>
    <h2 class="text-left">Nadpis H2 + infobox</h2>
     <div class="alert alert-flex background-gray-lighter text-large" 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>
</div>

T-Mobile nabídky


<div class="container max margin-large">
 <div class="row">
  <div class="col-xs-12">
   <div class="background-white">
    <h1 class="text-left">T-Mobile nabídky</h1>
    <div class=" table-list">
     <div class="row middle-xs like-table-row js-clickable">
      <div class="col-xs-10">
       <div class="v-center">
        <img src="https://www.t-mobile.cz/dcpublic/fotbalista-icon-120x120_2.png" alt="Fanklub fotbalové reprezentace - ikona" width="40" height="40">
        <h4>Fanklub fotbalové reprezentace</h4>
       </div>
      </div>
      <div class="col-xs-2 text-right">
       <a href="/fanklub-fotbal-v-srdci">
        <i class="ico-chevron-right right fill-blue" data-ico-width="24" data-ico-height="12" aria-hidden="true"><svg class="svg-chevron-right" width="24" height="12"><use xlink:href="#chevron-right"><svg viewBox="0 0 542.119 1024" id="chevron-right" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><path d="M380.434 512L0 0h161.685l380.434 512-380.434 512H0l380.434-512z"></path></svg></use></svg></i>
       </a>
      </div>
     </div>
     <div class="row middle-xs like-table-row js-clickable">
      <div class="col-xs-10">
       <div class="v-center">
        <img src="https://www.t-mobile.cz/dcpublic/25p-circle.png" alt="25% bonus na Twist kredit - ikona" width="40" height="40">
        <h4>25% bonus na Twist kredit</h4>
       </div>
      </div>
      <div class="col-xs-2 text-right">
       <a href="/twist-kredit-bonus-25">
        <i class="ico-chevron-right right fill-blue" data-ico-width="24" data-ico-height="12" aria-hidden="true"><svg class="svg-chevron-right" width="24" height="12"><use xlink:href="#chevron-right"><svg viewBox="0 0 542.119 1024" id="chevron-right" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><path d="M380.434 512L0 0h161.685l380.434 512-380.434 512H0l380.434-512z"></path></svg></use></svg></i>
         </a>
       </div>
      </div>
     </div>
    </div>
  </div>
 </div>
</div>

Podmínky


<div class="container max margin-large">
 <div class="row">
  <div class="col-xs-12">
   <div class="background-white">
    <h2 id="podminky" class="text-left">Podmínky</h2>
     <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"><svg class="svg-pdf" width="30" height="30"><use xlink:href="#pdf"></use></svg></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="https://www.seznam.cz/soutez-3gb/obchodni-podminky" class="bold">Zobrazit</a>
      </div>
      </div>
      </div>
     </div>
    </div>
   </div>
  </div>
 </div>
</div>
Telefon Honor 10 - obrázek k soutěži

V únoru můžete vyhrát:

3x telefon


<div class="container max margin-large">
 <div class="row">
  <div class="col-xs-12">
   <div class="background-darkblue">
    <img class="img-responsive center-block" src="https://www.t-mobile.cz/dcpublic/soutez_brezen_768x462.jpg" alt="Telefon Honor 10 - obrázek k soutěži">
    <h1 class="h3">V únoru můžete vyhrát:</h1>
    <p>3x telefon</p>
   </div>
  </div>
 </div>
</div>

3 možnosti datové svobody

Vyberte si tarif s neomezenými daty podle svých potřeb.


20 GB

plnou rychlostí

3 Mbit/s

rychlost po vyčerpání 20 GB, stačí pro neomezené sledování videa ve standardním rozlišení (SD)

30 GB

datový limit v EU


50 GB

plnou rychlostí

10 Mbit/s

rychlost po vyčerpání 50 GB, skvělé pro neomezené sledování videa ve vysokém rozlišení (HD)

35 GB

datový limit v EU


plnou rychlostí v ČR

40 GB

datový limit v EU

500 MB

navíc pro připojení v zahraničí v zóně Svět 1


Další informace o neomezených datech v tarifu najdete zde.

Chci svobodu

Co pro vás máme?

Zamilované uvítací tóny zdarma pouze dnes 14. 2. - vyberte si song podle svého srdce a potěšte všechny, kdo vám zavolají.

Jak na to?

Tóny objednáte pomocí kódu uvedeného pod uvítacím tónem. SMS pošlete na 4714.

Lewis Capaldi: Someone You Loved - brázek
Lewis Capaldi
Someone You Loved
Tvar SMS: VALENTYN1
Whitney Houston: I will always love you - brázek
Whitney Houston
I Will Always Love You
Tvar SMS: VALENTYN2
Selena Gomez: Lose You To Love Me - brázek
Selena Gomez
Lose You To Love Me
Tvar SMS: VALENTYN3
Ellie Goulding: Love me like you do - brázek
Ellie Goulding
Love Me Like You Do
Tvar SMS: VALENTYN4