KRKA boilerplate / INFO MODULES

Info Modules

News

If you want to expose info block, just add .info-block--exposed class to element.

News

Izpostavljena novica

16.03.2021

Ocena Krkinega poslovanja v letu 2020 2

Uprava družbe Krka je na današnji novinarski konferenci predstavila predhodno nerevidirano oceno poslovanja skupine Krka in družbe Krka za leto 2020, ki jo je na včerajšnji seji obravnaval nadzorni svet družbe. Skupina Krka je ustvarila prodajo v vrednosti 1 milijarde 534,9 milijona EUR, kar je 3 % več kot v letu 2019 ...

Zadnje

16.03.2021

Sodelavka Monika Koroša finalistka na izboru Inženirka leta 2020

V Krki smo ponosni, da se je na včerajšnji slavnostni razglasitvi Inženirka leta 2020 po izboru žirije izmed 53 prijavljenih inženirk med deset finalistk uvrstila tudi Krkina sodelavka Monika Koroša, samostojna tehnologinja v Proizvodnji učinkovin ...

16.03.2021

Krkine tople zgodbe

Ko v Krki govorimo o ciljih, postavljamo zdravje in kakovostno življenje slehernega človeka na prvo mesto. Dostopno zdravljenje je temelj naše družbene odgovornosti, zato kot naše poslanstvo razumemo tudi donacije za nakup sodobnih medicinskih naprav zdravstvenim ustanovam ...

Prikaži vse novice

<section class="info-blocks">
  <div class="container-1100">
    <div class="row">
      <div class="col-12 mb-5"><h2 class="text-center tc-green-dark">News</h2></div>
      <div class="col-12 col-sm-6 col-lg-4 mb-5">
        <p class="cta tc-green-dark">Izpostavljena novica</p>
        <div class="info-block info-block--exposed">
          <div class="info-block__image">
            <picture>
              <source media="(max-width: 1024px)" srcset="images/content/info-block-1-tablet.jpg" />
              <img src="images/content/info-block-1.jpg" alt="News 1" />
            </picture>
          </div>
          <div class="info-block__content">
            <div class="info-block__meta">16.03.2021</div>
            <h3 class="h4 info-block__title"><a href="#">Ocena Krkinega poslovanja v letu 2020</a></h3>
            <div class="info-block__desc">Uprava družbe Krka je na današnji novinarski konferenci predstavila predhodno nerevidirano oceno poslovanja skupine Krka in družbe Krka za leto 2020, ki jo je na včerajšnji seji obravnaval nadzorni svet družbe. Skupina Krka je ustvarila prodajo v vrednosti 1 milijarde 534,9 milijona EUR, kar je 3 % več kot v letu 2019 ...</div>
          </div>
        </div>
      </div>
      <div class="col-12 col-sm-6 col-lg-4 mb-0 mb-lg-5">
        <p class="cta tc-green-dark">Zadnje</p>
        <div class="info-block">
          <div class="info-block__image">
            <picture>
              <source media="(max-width: 1024px)" srcset="images/content/info-block-1-tablet.jpg" />
              <img src="images/content/info-block-1.jpg" alt="News 1" />
            </picture>
          </div>
          <div class="info-block__content">
            <div class="info-block__meta">16.03.2021</div>
            <h3 class="h4 info-block__title"><a href="#">Ocena Krkinega poslovanja v letu 2020</a></h3>
            <div class="info-block__desc">Uprava družbe Krka je na današnji novinarski konferenci predstavila predhodno nerevidirano oceno poslovanja skupine Krka in družbe Krka za leto 2020, ki jo je na včerajšnji seji obravnaval nadzorni svet družbe. Skupina Krka je ustvarila prodajo v vrednosti 1 milijarde 534,9 milijona EUR, kar je 3 % več kot v letu 2019 ...</div>
          </div>
        </div>
      </div>
      <div class="col-12 col-sm-6 col-lg-4 mb-0 mb-lg-5">
        <p class="cta tc-green-dark"> </p>
        <div class="info-block">
          <div class="info-block__image">
            <picture>
              <source media="(max-width: 1024px)" srcset="images/content/info-block-1-tablet.jpg" />
              <img src="images/content/info-block-1.jpg" alt="News 1" />
            </picture>
          </div>
          <div class="info-block__content">
            <div class="info-block__meta">16.03.2021</div>
            <h3 class="h4 info-block__title"><a href="#">Ocena Krkinega poslovanja v letu 2020</a></h3>
            <div class="info-block__desc">Uprava družbe Krka je na današnji novinarski konferenci predstavila predhodno nerevidirano oceno poslovanja skupine Krka in družbe Krka za leto 2020, ki jo je na včerajšnji seji obravnaval nadzorni svet družbe. Skupina Krka je ustvarila prodajo v vrednosti 1 milijarde 534,9 milijona EUR, kar je 3 % več kot v letu 2019 ...</div>
          </div>
        </div>
      </div>
      <div class="col-12 mt-5 text-center"><a href="#" class="button button--cta"><span>Prikaži vse novice</span></a></div>
    </div>
  </div>
</section>

Press releases

If you want to expose info block, just add .info-block--exposed .info-block--exposed-full class to element. Pay attention to missing HTML element for image.

Press releases

Izpostavljena novica

16.03.2021

Ocena Krkinega poslovanja v letu 2020

Zadnje

16.03.2021

Sodelavka Monika Koroša finalistka na izboru Inženirka leta 2020

16.03.2021

Krkine tople zgodbe

Prikaži vse izjave

<section class="info-blocks">
  <div class="container-1100">
    <div class="row">
      <div class="col-12 mb-5"><h2 class="text-center tc-green-dark">Press releases</h2></div>
      <div class="col-12 col-sm-6 col-lg-4 mb-5">
        <p class="cta tc-green-dark">Izpostavljena novica</p>
        <div class="info-block info-block--exposed-full info-block--exposed">
          <div class="info-block__content">
            <div class="info-block__meta">16.03.2021</div>
            <h3 class="h4 info-block__title"><a href="#">Ocena Krkinega poslovanja v letu 2020</a></h3>
            <div class="info-block__desc">Uprava družbe Krka je na današnji novinarski konferenci predstavila predhodno nerevidirano oceno poslovanja skupine Krka in družbe Krka za leto 2020, ki jo je na včerajšnji seji obravnaval nadzorni svet družbe. Skupina Krka je ustvarila prodajo v vrednosti 1 milijarde 534,9 milijona EUR, kar je 3 % več kot v letu 2019 ...</div>
          </div>
        </div>
      </div>
      <div class="col-12 col-sm-6 col-lg-4 mb-0 mb-lg-5">
        <p class="cta tc-green-dark">Zadnje</p>
        <div class="info-block">
          <div class="info-block__content">
            <div class="info-block__meta">16.03.2021</div>
            <h3 class="h4 info-block__title"><a href="#">Ocena Krkinega poslovanja v letu 2020</a></h3>
            <div class="info-block__desc">Uprava družbe Krka je na današnji novinarski konferenci predstavila predhodno nerevidirano oceno poslovanja skupine Krka in družbe Krka za leto 2020, ki jo je na včerajšnji seji obravnaval nadzorni svet družbe. Skupina Krka je ustvarila prodajo v vrednosti 1 milijarde 534,9 milijona EUR, kar je 3 % več kot v letu 2019 ...</div>
          </div>
        </div>
      </div>
      <div class="col-12 col-sm-6 col-lg-4 mb-0 mb-lg-5">
        <p class="cta tc-green-dark"> </p>
        <div class="info-block">
          <div class="info-block__content">
            <div class="info-block__meta">16.03.2021</div>
            <h3 class="h4 info-block__title"><a href="#">Ocena Krkinega poslovanja v letu 2020</a></h3>
            <div class="info-block__desc">Uprava družbe Krka je na današnji novinarski konferenci predstavila predhodno nerevidirano oceno poslovanja skupine Krka in družbe Krka za leto 2020, ki jo je na včerajšnji seji obravnaval nadzorni svet družbe. Skupina Krka je ustvarila prodajo v vrednosti 1 milijarde 534,9 milijona EUR, kar je 3 % več kot v letu 2019 ...</div>
          </div>
        </div>
      </div>
      <div class="col-12 mt-5 text-center"><a href="#" class="button button--cta"><span>Prikaži vse izjave</span></a></div>
    </div>
  </div>
</section>

Linked articles


<section class="info-linked">
  <div class="info-linked__actions">
    <div class="info-linked__actions__navigation">
      <a href="javascript:void(0)" class="prev"><i class="icon icon--arrow-left-green"></i></a>
      <div class="nav-input d-lg-none"><input type="text" class="form-control" value="1" /></div>
      <a href="javascript:void(0)" class="next"><i class="icon icon--arrow-right-green"></i></a>
    </div>
    <a href="#" class="button d-none d-lg-flex button--cta mt-5"><span>More</span></a>
  </div>
  <div class="info-linked__wrapper">
    <h2 class="tc-green-dark">Articles</h2>
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <a href="#" class="info-linked__content">
            <div class="info-linked__image">
              <picture>
                <img src="images/content/info-block-4.jpg" alt="News slide 1" />
              </picture>
            </div>
            <div class="info-linked__text">
              <h3 class="h4 info-linked__title"><span>Lorem ipsum dolor sit amet dolr amet sit</span></h3>
              <div class="info-linked__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut  ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut l labore ...</div>
            </div>
            <div class="info-linked__more"><span>Show more</span></div>
          </a>
        </div>
        <div class="swiper-slide">
          <a href="#" class="info-linked__content">
            <div class="info-linked__image">
              <picture>
                <img src="images/content/info-block-4.jpg" alt="News slide 1" />
              </picture>
            </div>
            <div class="info-linked__text">
              <h3 class="h4 info-linked__title"><a href="#">Lorem ipsum dolor sit amet dolr amet sit</a></h3>
              <div class="info-linked__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut  ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut l labore ...</div>
            </div>
            
            <div class="info-linked__more"><a href="#">Show more</a></div>
          </a>
        </div>
        <div class="swiper-slide">
          <a href="#" class="info-linked__content">
            <div class="info-linked__image">
              <picture>
                <img src="images/content/info-block-4.jpg" alt="News slide 1" />
              </picture>
            </div>
            <div class="info-linked__text">
              <h3 class="h4 info-linked__title"><a href="#">Lorem ipsum dolor sit amet dolr amet sit</a></h3>
              <div class="info-linked__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut  ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut l labore ...</div>
            </div>
            <div class="info-linked__more"><a href="#">Show more</a></div>
          </a>
        </div>
        <div class="swiper-slide">
          <a href="#" class="info-linked__content">
            <div class="info-linked__image">
              <picture>
                <img src="images/content/info-block-4.jpg" alt="News slide 1" />
              </picture>
            </div>
            <div class="info-linked__text">
              <h3 class="h4 info-linked__title"><a href="#">Lorem ipsum dolor sit amet dolr amet sit</a></h3>
              <div class="info-linked__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut  ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut l labore ...</div>
            </div>
            <div class="info-linked__more"><a href="#">Show more</a></div>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

Article list

Lorem ipsum dolor sit amet dolor

Več

Lorem ipsum dolor sit amet dolor

Scelerisque et ullamcorper dui vel donec ultrices odio. Ornare dolor enim quam rutrum amet pharetra. Elit diam eu leo ultrices condimentum facilisis. Nibh feugiat lorem quis sed. Nulla mi fermentum in enim ipsum, sapien massa ut sed. Nulla mi fermentum in enim ipsum, sapien massa Scelerisque et ullamcorper dui vel donec ultrices odio. Ornare dolor enim quam rutrum amet pharetra. Elit diam eu leo ultrices condimentum facilisis. Nibh feugiat lorem quis sed. Nulla mi fermentum in enim ipsum, sapien massa ut sed. Nulla mi fermentum in enim ipsum, sapien massa Scelerisque et ullamcorper dui vel donec ultrices odio. Ornare dolor enim quam rutrum amet pharetra. Elit diam eu leo ultrices condimentum facilisis. Nibh feugiat lorem quis sed. Nulla mi fermentum in enim ipsum, sapien massa ut sed. Nulla mi fermentum in enim ipsum, sapien massa Scelerisque et ullamcorper dui vel donec ultrices odio. Ornare dolor enim quam rutrum amet pharetra. Elit diam eu leo ultrices condimentum facilisis. Nibh feugiat lorem quis sed. Nulla mi fermentum in enim ipsum, sapien massa ut sed. Nulla mi fermentum in enim ipsum, sapien massa ...

Več

<section class="info-list">
  <div class="info-list__items">
    <div class="info-list__item">
      <div class="info-list__item__image">
        <picture>
          <img src="images/content/info-block-1.jpg" alt="News article 1" />
        </picture>
      </div>
      <h2 class="h4 info-list__item__title"><a href="#">Lorem ipsum dolor sit amet dolor</a></h2>
      <div class="info-list__item__desc">Scelerisque et ullamcorper dui vel donec ultrices odio. Ornare dolor enim quam rutrum amet pharetra. Elit diam eu leo ultrices condimentum facilisis. Nibh feugiat lorem quis sed. Nulla mi fermentum in enim ipsum, sapien massa ut sed. Nulla mi fermentum in enim ipsum, sapien massa ...</div>
      <div class="info-list__item__actions"><a href="#">Več</a></div>
    </div>
    <div class="info-list__item">
      <h2 class="h4 info-list__item__title"><a href="#">Lorem ipsum dolor sit amet dolor</a></h2>
      <div class="info-list__item__desc">Scelerisque et ullamcorper dui vel donec ultrices odio. Ornare dolor enim quam rutrum amet pharetra. Elit diam eu leo ultrices condimentum facilisis. Nibh feugiat lorem quis sed. Nulla mi fermentum in enim ipsum, sapien massa ut sed. Nulla mi fermentum in enim ipsum, sapien massa Scelerisque et ullamcorper dui vel donec ultrices odio. Ornare dolor enim quam rutrum amet pharetra. Elit diam eu leo ultrices condimentum facilisis. Nibh feugiat lorem quis sed. Nulla mi fermentum in enim ipsum, sapien massa ut sed. Nulla mi fermentum in enim ipsum, sapien massa Scelerisque et ullamcorper dui vel donec ultrices odio. Ornare dolor enim quam rutrum amet pharetra. Elit diam eu leo ultrices condimentum facilisis. Nibh feugiat lorem quis sed. Nulla mi fermentum in enim ipsum, sapien massa ut sed. Nulla mi fermentum in enim ipsum, sapien massa Scelerisque et ullamcorper dui vel donec ultrices odio. Ornare dolor enim quam rutrum amet pharetra. Elit diam eu leo ultrices condimentum facilisis. Nibh feugiat lorem quis sed. Nulla mi fermentum in enim ipsum, sapien massa ut sed. Nulla mi fermentum in enim ipsum, sapien massa  ...</div>
      <div class="info-list__item__actions"><a href="#">Več</a></div>
    </div>
    <div class="info-list__item">
      <h2 class="h4 info-list__item__title"><a href="#">Lorem ipsum dolor sit amet dolor</a></h2>
      <div class="info-list__item__desc">Scelerisque et ullamcorper dui vel donec ultrices odio. Ornare dolor enim quam rutrum amet pharetra. Elit diam eu leo ultrices condimentum facilisis. Nibh feugiat lorem quis sed. Nulla mi fermentum in enim ipsum, sapien massa ut sed. Nulla mi fermentum in enim ipsum, sapien massa Scelerisque et ullamcorper dui vel donec ultrices odio. Ornare dolor enim quam rutrum amet pharetra. Elit diam eu leo ultrices condimentum facilisis. Nibh feugiat lorem quis sed. Nulla mi fermentum in enim ipsum, sapien massa ut sed. Nulla mi fermentum in enim ipsum, sapien massa Scelerisque et ullamcorper dui vel donec ultrices odio. Ornare dolor enim quam rutrum amet pharetra. Elit diam eu leo ultrices condimentum facilisis. Nibh feugiat lorem quis sed. Nulla mi fermentum in enim ipsum, sapien massa ut sed. Nulla mi fermentum in enim ipsum, sapien massa Scelerisque et ullamcorper dui vel donec ultrices odio. Ornare dolor enim quam rutrum amet pharetra. Elit diam eu leo ultrices condimentum facilisis. Nibh feugiat lorem quis sed. Nulla mi fermentum in enim ipsum, sapien massa ut sed. Nulla mi fermentum in enim ipsum, sapien massa  ...</div>
      <div class="info-list__item__actions"><a href="#">Več</a></div>
    </div>
    <div class="info-list__item">
      <div class="info-list__item__image">
        <picture>
          <img src="images/content/info-block-1.jpg" alt="News article 1" />
        </picture>
      </div>
      <h2 class="h4 info-list__item__title"><a href="#">Lorem ipsum dolor sit amet dolor</a></h2>
      <div class="info-list__item__desc">Scelerisque et ullamcorper dui vel donec ultrices odio. Ornare dolor enim quam rutrum amet pharetra. Elit diam eu leo ultrices condimentum facilisis. Nibh feugiat lorem quis sed. Nulla mi fermentum in enim ipsum, sapien massa ut sed. Nulla mi fermentum in enim ipsum, sapien massa ...</div>
      <div class="info-list__item__actions"><a href="#">Več</a></div>
    </div>
    <div class="info-list__item">
      <div class="info-list__item__image">
        <picture>
          <img src="images/content/info-block-1.jpg" alt="News article 1" />
        </picture>
      </div>
      <h2 class="h4 info-list__item__title"><a href="#">Lorem ipsum dolor sit amet dolor</a></h2>
      <div class="info-list__item__desc">Scelerisque et ullamcorper dui vel donec ultrices odio. Ornare dolor enim quam rutrum amet pharetra. Elit diam eu leo ultrices condimentum facilisis. Nibh feugiat lorem quis sed. Nulla mi fermentum in enim ipsum, sapien massa ut sed. Nulla mi fermentum in enim ipsum, sapien massa ...</div>
      <div class="info-list__item__actions"><a href="#">Več</a></div>
    </div>
    <div class="info-list__item">
      <div class="info-list__item__image">
        <picture>
          <img src="images/content/info-block-1.jpg" alt="News article 1" />
        </picture>
      </div>
      <h2 class="h4 info-list__item__title"><a href="#">Lorem ipsum dolor sit amet dolor</a></h2>
      <div class="info-list__item__desc">Scelerisque et ullamcorper dui vel donec ultrices odio. Ornare dolor enim quam rutrum amet pharetra. Elit diam eu leo ultrices condimentum facilisis. Nibh feugiat lorem quis sed. Nulla mi fermentum in enim ipsum, sapien massa ut sed. Nulla mi fermentum in enim ipsum, sapien massa ...</div>
      <div class="info-list__item__actions"><a href="#">Več</a></div>
    </div>
    <div class="info-list__item">
      <h2 class="h4 info-list__item__title"><a href="#">Lorem ipsum dolor sit amet dolor</a></h2>
      <div class="info-list__item__desc">Scelerisque et ullamcorper dui vel donec ultrices odio. Ornare dolor enim quam rutrum amet pharetra. Elit diam eu leo ultrices condimentum facilisis. Nibh feugiat lorem quis sed. Nulla mi fermentum in enim ipsum, sapien massa ut sed. Nulla mi fermentum in enim ipsum, sapien massa Scelerisque et ullamcorper dui vel donec ultrices odio. Ornare dolor enim quam rutrum amet pharetra. Elit diam eu leo ultrices condimentum facilisis. Nibh feugiat lorem quis sed. Nulla mi fermentum in enim ipsum, sapien massa ut sed. Nulla mi fermentum in enim ipsum, sapien massa Scelerisque et ullamcorper dui vel donec ultrices odio. Ornare dolor enim quam rutrum amet pharetra. Elit diam eu leo ultrices condimentum facilisis. Nibh feugiat lorem quis sed. Nulla mi fermentum in enim ipsum, sapien massa ut sed. Nulla mi fermentum in enim ipsum, sapien massa Scelerisque et ullamcorper dui vel donec ultrices odio. Ornare dolor enim quam rutrum amet pharetra. Elit diam eu leo ultrices condimentum facilisis. Nibh feugiat lorem quis sed. Nulla mi fermentum in enim ipsum, sapien massa ut sed. Nulla mi fermentum in enim ipsum, sapien massa  ...</div>
      <div class="info-list__item__actions"><a href="#">Več</a></div>
    </div>
    <div class="info-list__item">
      <h2 class="h4 info-list__item__title"><a href="#">Lorem ipsum dolor sit amet dolor</a></h2>
      <div class="info-list__item__desc">Scelerisque et ullamcorper dui vel donec ultrices odio. Ornare dolor enim quam rutrum amet pharetra. Elit diam eu leo ultrices condimentum facilisis. Nibh feugiat lorem quis sed. Nulla mi fermentum in enim ipsum, sapien massa ut sed. Nulla mi fermentum in enim ipsum, sapien massa Scelerisque et ullamcorper dui vel donec ultrices odio. Ornare dolor enim quam rutrum amet pharetra. Elit diam eu leo ultrices condimentum facilisis. Nibh feugiat lorem quis sed. Nulla mi fermentum in enim ipsum, sapien massa ut sed. Nulla mi fermentum in enim ipsum, sapien massa Scelerisque et ullamcorper dui vel donec ultrices odio. Ornare dolor enim quam rutrum amet pharetra. Elit diam eu leo ultrices condimentum facilisis. Nibh feugiat lorem quis sed. Nulla mi fermentum in enim ipsum, sapien massa ut sed. Nulla mi fermentum in enim ipsum, sapien massa Scelerisque et ullamcorper dui vel donec ultrices odio. Ornare dolor enim quam rutrum amet pharetra. Elit diam eu leo ultrices condimentum facilisis. Nibh feugiat lorem quis sed. Nulla mi fermentum in enim ipsum, sapien massa ut sed. Nulla mi fermentum in enim ipsum, sapien massa  ...</div>
      <div class="info-list__item__actions"><a href="#">Več</a></div>
    </div>
  </div>
  <div class="pagination">
    <a href="#" class="pagination__prev"><i class="icon icon--arrow-left-green icon--md"></i></a>
    <div class="pagination__input"><input type="text" class="form-control" value="1" /></div>
    <a href="#" class="pagination__next"><i class="icon icon--arrow-right-green icon--md"></i></a>
    <div class="pagination__text">od 16</div>
  </div>
</section>

Info Modules

News

News

Ocena Krkinega poslovanja v letu 2020 2

Sodelavka Monika Koroša finalistka na izboru Inženirka leta 2020

Krkine tople zgodbe

Press releases

Press releases

Ocena Krkinega poslovanja v letu 2020

Sodelavka Monika Koroša finalistka na izboru Inženirka leta 2020

Krkine tople zgodbe

Linked articles

Articles

Lorem ipsum dolor sit amet dolr amet sit 1

Lorem ipsum dolor sit amet dolr amet sit 2

Lorem ipsum dolor sit amet dolr amet sit 3

Lorem ipsum dolor sit amet dolr amet sit 4

Lorem ipsum dolor sit amet dolr amet sit 5

Article list