First-letter, Uikit 3

first-letter-uikit-3.markdown

First-letter, Uikit 3

A Pen by Beibit Sakhanov on CodePen.

License.

index.html

<div class="uk-container uk-container-xsmall">
  <div class="uk-full-text uk-text-justify">
    <blockquote>
      <p>13 декабря в Астане прошел круглый стол на тему: «20-летие накопительной пенсионной системы. Основы пенсионной системы РК».</p>
  </blockquote>
  <p>

Заседание в режиме форум-совещания состоялось по инициативе ЕНПФ при участии сотрудников Фонда, представителей Министерства труда и социальной защиты населения РК, Государственного Фонда социального страхования, Фонда Медицинского Страхования и Государственной Корпорации «Правительство для граждан», членов профсоюзов, Палаты предпринимателей и партии «НұрОтан», а также людей, стоявших у истоков становления системы, представителей СМИ, экспертов и вкладчиков (получателей).</p>
    
  </div>
</div>

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.2/js/uikit.min.js"></script>

style.css

.uk-full-text blockquote + p:first-of-type::first-letter {
  display: block;
  margin-right: 10px;
  float: left;
  font-size: 4.5em;
  line-height: 1;
  margin-bottom: -2px;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.2/css/uikit.min.css" rel="stylesheet" />