Skip to main content

Плаваюча кнопка дії (ПКД)

Навігація

Плаваюча кнопка дії

Плаваюча кнопка дії (ПКД) використовується для рекламної дії. Вони відрізняються піктограмою в кружечку, що плаває над інтерфейсом користувача, і мають поведінку руху, яка включає трансформацію, запуск і передачу опорної точки.

Макет ПКД

Розташування плаваючої кнопки дії дуже просте. Просто поставте його як пряму дочірню сторінку page або перегляд view:
<!-- Page-->
<div class="page">
  <!-- Navbar-->
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner">
      <div class="center">Floating Action Button</div>
    </div>
  </div>
  <!-- Floating Action Button -->
  <div class="fab fab-right-bottom">
    <a href="#">
      <i class="icon t4-icons">plus</i>
    </a>
  </div>
  <!-- Another Floating Action Button -->
  <div class="fab fab-left-bottom">
    <a href="#">
      <i class="icon t4-icons">plus</i>
    </a>
  </div>
  <!-- Scrollable Page Content-->
  <div class="page-content">
    <div class="block">
      Lorem ipsum dolor sit amet, ....
    </div>
  </div>
</div>
Положення ПКД налаштовується за допомогою додаткового класу fab-[horizontal]-[vertical]. Доступні такі класи:

— fab-right-bottom

— fab-center-bottom

— fab-left-bottom

— fab-right-center

— fab-center-center

— fab-left-center

— fab-right-top

— fab-center-top

— fab-left-top

Кольори ПКД

ПКД підтримує всі кольори за замовчуванням. Щоб змінити її колір, просто додайте клас color-[color] до елемента плаваючої кнопки дії:
<!-- Red FAB -->
<div class="fab fab-left-top color-red"></div>

<!-- Green FAB -->
<div class="fab fab-right-bottom color-green"></div>

Розширена ПКД

Розширений ПКД ширша і містить текстову позначку. Щоб створити розширену ПКД, нам потрібно додати додатковий клас fab-extended до елемента ПКД і помістити його додатковий текст в елемент <div class="fab-text"> всередині:
<!-- Additional fab-extended class -->
<div class="fab fab-extended fab-center-bottom">
  <a href="#">
    <i class="icon t4-icons">plus</i>
    <!-- Element with FAB text  -->
    <div class="fab-text">Create</div>
  </a>
</div>

Швидкий набір

Плаваюча кнопка дії може викидати відповідні дії після натискання. Кнопка повинна залишатися на екрані після виклику меню. Натискання в тому самому місці має активувати дію, яку найчастіше використовують, або закрити відкрите меню. У цьому випадку нам потрібно додати додатковий елемент із кнопками:
<div class="fab fab-right-bottom">
  <a href="#">
    <!-- First icon is visible when Speed Dial actions are closed -->
    <i class="icon t4-icons">plus</i>
    <!-- Second icon is visible when Speed Dial actions are opened -->
    <i class="icon t4-icons">xmark</i>
  </a>
  <!-- Speed Dial action buttons -->
  <div class="fab-buttons fab-buttons-bottom">
    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
  </div>
</div>

Розташування контейнера кнопок швидкого набору налаштовується за допомогою додаткового класу:

  • fab-buttons-top — кнопки з’являться поверх ПКД
  • fab-buttons-right — кнопки з’являться праворуч від ПКД
  • fab-buttons-bottom — кнопки з’являться внизу ПКД
  • fab-buttons-left — кнопки з’являться ліворуч від ПКД
  • fab-buttons-center — навколо ПКД з’являться кнопки
  • Зауважте, що кнопки швидкого набору відображатимуться у зворотному порядку
  • Ви не повинні використовувати більш як 6 дій швидкого набору
  • Ви повинні використовувати принаймні 3 дії швидкого набору
Швидкий набір з мітками
Кнопки швидкого набору також підтримують додаткові текстові мітки. У цьому випадку макет буде трохи розширений:
<div class="fab-buttons fab-buttons-bottom">
  <!-- additional "fab-label-button" class on fab button -->
  <a href="#" class="fab-label-button">
    <!-- original button content -->
    <span>1</span>
    <!-- button label -->
    <span class="fab-label">Action 1</span>
  </a>
  <a href="#" class="fab-label-button">
    <span>2</span>
    <span class="fab-label">Action 2</span>
  </a>
  ...
</div>
Швидкий набір із фоном
Також можна додати фон (напівпрозоре накладання) позаду ПКД, який стане видимим під час відкриття ПКД. Щоб це запрацювало, нам просто потрібно додати елемент фону на той самий рівень, що й елемент ПКД:
<div class="page">
  <!-- FAB backdrop -->
  <div class="fab-backdrop"></div>

  <!-- FAB -->
  <div class="fab fab-right-bottom">
    ...
  </div>

  <div class="page-content">
    ...
  </div>
</div>

Перетворення ПКД

Існує також можливість для ПКД перетворюватися на будь-який видимий елемент на сторінці.
<div class="page">
  <div class="navbar">...</div>

  <!-- Toolbar has additional required "fab-morph-target" class -->
  <div class="toolbar toolbar-bottom fab-morph-target">
    ...
  </div>

  <!-- FAB will morph to toolbar -->
  <div class="fab fab-morph" data-morph-to=".toolbar">
    <i class="icon t4-icons">plus</i>
  </div>

  <div class="page-content">
    ...
  </div>
</div>
  • data-morph-to — додатковий атрибут на ПКД, де потрібно вказати селектор CSS цільового елемента. У цьому прикладі він вказує на панель інструментів
  • fab-morph-target — додатковий необхідний клас для цільової трансформації ПКД, у цьому прикладі його додано на панель інструментів

Методи застосунку ПКД

Ми можемо використовувати наступні методи програми для керування ПКД:.
Метод ОписТип
app.fab.open(fabEl, targetEl)
Відкрити дії/кнопки швидкого набору ПКД або перетворите їх на вказану ціль
  • fabEl - HTMLElement or string (із CSS Selector) — необхідного ПКД
  • targetEl - HTMLElement or string (із CSS Selector) — цільової трансформації ПКД. Додатково
HTMLElement
app.fab.close(fabEl)
Закрити дії/кнопки швидкого набору FAB або перетворити його назад із указаної цілі
  • fabEl - HTMLElement or string (із CSS Selector) — необхідного ПКД
HTMLElement
app.fab.close(fabEl)
Закрити дії/кнопки швидкого набору FAB або перетворити його назад із указаної цілі
  • fabEl - HTMLElement or string (із CSS Selector — необхідного ПКД
HTMLElement

Події ПКД

ПКД запускатиме наступні події DOM на елементі ПКД:
ПодіяОб'єктОписТип
fab:open
FAB Element

<div class="fab">

Подія буде ініційована під час відкриття ПКД або коли віна перетворюється на цільовий елемент
string
fab:close
FAB Element

<div class="fab">

Подія буде ініційована після закриття ПКД або коли він повертається з цільового елемента
string

Керування ПКД за допомогою посилань

Відкривати і закривати потрібну ПКД (якщо віна є в DOM) можна за допомогою спеціальних класів і атрибутів даних за посиланнями:

Щоб відкрити дії швидкого набору ПКД, нам потрібно додати клас fab-open до будь-якого елемента HTML (бажано для посилання)

Щоб закрити швидкісний набір ПКД або перетворити ПКД назад із цільового, нам потрібно додати клас fab-close до будь-якого елемента HTML (бажано посилання)

Якщо у вас є більше однієї ПКД у DOM, вам потрібно вказати відповідний FAB за допомогою додаткового атрибута data-fab=".some-fab" у цьому елементі HTML

Змінні CSS

Нижче наведено список пов’язаних змінних CSS (спеціальні властивості CSS).
Зауважте, що коментовані змінні не вказано за замовчуванням, і в цьому випадку вони повертаються до їхніх значень. 
:root {
  --t4-fab-margin: 16px;
  --t4-fab-text-color: #fff;
  --t4-fab-extended-text-font-size: 14px;
  --t4-fab-extended-text-padding: 0 20px;
  --t4-fab-label-bg-color: #fff;
  --t4-fab-label-text-color: #333;
  --t4-fab-label-border-radius: 4px;
  --t4-fab-label-padding: 4px 12px;
  --t4-fab-label-font-size: inherit;
  --t4-fab-button-size: 40px;
  /* --t4-fab-pressed-bg-color: var(--t4-theme-color-shade); */
}
.ios {
  --t4-fab-size: 50px;
  --t4-fab-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
  --t4-fab-extended-size: 50px;
  --t4-fab-extended-text-font-weight: 600;
  --t4-fab-extended-text-letter-spacing: 0;
  --t4-fab-label-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
}
.md {
  --t4-fab-size: 56px;
  --t4-fab-box-shadow: var(--t4-elevation-6);
  --t4-fab-extended-size: 48px;
  --t4-fab-extended-text-font-weight: 500;
  --t4-fab-extended-text-letter-spacing: 0.05em;
  --t4-fab-label-box-shadow: var(--t4-elevation-3);
}
.aurora {
  --t4-fab-size: 56px;
  --t4-fab-box-shadow: var(--t4-elevation-6);
  --t4-fab-extended-size: 48px;
  --t4-fab-extended-text-font-weight: 600;
  --t4-fab-extended-text-letter-spacing: 0;
  --t4-fab-label-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
}

Приклади 

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner">
      <div class="title">Floating Action Button</div>
    </div>
  </div>
  <div class="toolbar toolbar-bottom fab-morph-target">
    <div class="toolbar-inner">
      <a class="link fab-close">Link 1</a>
      <a class="link fab-close">Link 2</a>
      <a class="link fab-close">Link 3</a>
    </div>
  </div>
  <div class="fab fab-left-top color-yellow">
    <a href="#">
      <i class="icon t4-icons if-not-md">plus</i>
      <i class="icon t4-icons if-not-md">xmark</i>
      <i class="icon material-icons md-only">add</i>
      <i class="icon material-icons md-only">close</i>
    </a>
    <div class="fab-buttons fab-buttons-bottom">
      <a href="">1</a>
      <a href="">2</a>
      <a href="">3</a>
    </div>
  </div>
  <div class="fab fab-right-top color-pink">
    <a href="#">
      <i class="icon t4-icons if-not-md">plus</i>
      <i class="icon t4-icons if-not-md">xmark</i>
      <i class="icon material-icons md-only">add</i>
      <i class="icon material-icons md-only">close</i>
    </a>
    <div class="fab-buttons fab-buttons-left">
      <a href="">1</a>
      <a href="">2</a>
      <a href="">3</a>
    </div>
  </div>
  <div class="fab fab-center-center color-green">
    <a href="#">
      <i class="icon t4-icons if-not-md">plus</i>
      <i class="icon t4-icons if-not-md">xmark</i>
      <i class="icon material-icons md-only">add</i>
      <i class="icon material-icons md-only">close</i>
    </a>
    <div class="fab-buttons fab-buttons-center">
      <a href="">1</a>
      <a href="">2</a>
      <a href="">3</a>
      <a href="">4</a>
    </div>
  </div>
  <div class="fab fab-left-bottom fab-morph" data-morph-to=".toolbar">
    <a href="#">
      <i class="icon t4-icons if-not-md">plus</i>
      <i class="icon t4-icons if-not-md">xmark</i>
      <i class="icon material-icons md-only">add</i>
      <i class="icon material-icons md-only">close</i>
    </a>
  </div>
  <div class="fab fab-right-bottom color-orange">
    <a href="#">
      <i class="icon t4-icons if-not-md">plus</i>
      <i class="icon t4-icons if-not-md">xmark</i>
      <i class="icon material-icons md-only">add</i>
      <i class="icon material-icons md-only">close</i>
    </a>
    <div class="fab-buttons fab-buttons-top">
      <a class="fab-label-button" href="#"><span>1</span><span class="fab-label">Action 1</span></a>
      <a class="fab-label-button" href="#"><span>2</span><span class="fab-label">Action 2</span></a>
    </div>
  </div>
  <div class="fab fab-extended fab-center-bottom color-red">
    <a href="#">
      <i class="icon t4-icons if-not-md">plus</i>
      <i class="icon material-icons md-only">add</i>
      <div class="fab-text">Create</div>
    </a>
  </div>
  <div class="page-content">
    <div class="block">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae porta enim. Sed ultricies lacinia
        mauris, non tincidunt sem eleifend eget. Duis convallis quis sem non volutpat. Morbi risus lorem, dapibus
        et nulla ac, pharetra maximus elit. Etiam vitae lacus a dui hendrerit ornare vitae id est. Pellentesque ut
        tortor id sem maximus lobortis at egestas nulla. Nulla pretium, nunc et porta ullamcorper, sem lorem
        elementum massa, rhoncus ullamcorper odio dui vel mauris. Ut lobortis neque congue eros posuere blandit.
        Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. In
        sem dolor, tempus eu tellus quis, vulputate malesuada felis.</p>
      <p>In iaculis nisi id ligula condimentum consequat. Fusce a massa lorem. Morbi id nisl ut tellus volutpat
        pulvinar a vel dolor. Phasellus eu purus tincidunt augue hendrerit posuere. Ut bibendum tincidunt nisi,
        sed cursus arcu pulvinar sed. Fusce accumsan ante et libero feugiat, congue maximus urna blandit. Nunc a
        est eu urna auctor congue. Aenean euismod ipsum sed nulla pretium rutrum.</p>
      <p>Nunc id augue libero. Donec quis metus risus. Donec posuere vulputate purus, a semper justo consectetur
        at. Cras porta vestibulum pulvinar. Fusce in leo lacinia massa fringilla pellentesque ac sit amet sem.
        Nullam accumsan ante leo, eu faucibus lorem iaculis in. Duis id gravida libero.</p>
      <p>Nulla facilisi. Duis tempus egestas eros et venenatis. Maecenas dictum ipsum sem, vitae aliquam diam
        viverra eget. Curabitur dui turpis, fermentum eleifend ornare id, pellentesque vitae metus. Duis a est
        faucibus, maximus nunc feugiat, rutrum ipsum. Integer in odio nisl. Quisque tortor sem, sollicitudin eget
        cursus nec, lobortis quis eros. Integer a sapien semper, vulputate ex at, tempor ante.</p>
      <p>Donec at est ut quam pharetra fermentum. In auctor quam ut velit porttitor, sit amet convallis sapien
        interdum. Suspendisse sed magna molestie purus iaculis ultrices. Ut convallis facilisis bibendum. Aenean
        vitae velit quis felis congue aliquam vitae ac felis. Nulla ipsum augue, elementum quis venenatis
        ullamcorper, auctor at augue. Vestibulum varius tortor sit amet mauris finibus, at consectetur leo dictum.
        Duis a odio rutrum, efficitur orci a, congue ipsum. Nulla efficitur, velit non pellentesque pretium,
        tellus tortor auctor purus, nec mollis mauris felis quis elit. Etiam efficitur eleifend mi, vel sagittis
        neque auctor ut.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae porta enim. Sed ultricies lacinia
        mauris, non tincidunt sem eleifend eget. Duis convallis quis sem non volutpat. Morbi risus lorem, dapibus
        et nulla ac, pharetra maximus elit. Etiam vitae lacus a dui hendrerit ornare vitae id est. Pellentesque ut
        tortor id sem maximus lobortis at egestas nulla. Nulla pretium, nunc et porta ullamcorper, sem lorem
        elementum massa, rhoncus ullamcorper odio dui vel mauris. Ut lobortis neque congue eros posuere blandit.
        Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. In
        sem dolor, tempus eu tellus quis, vulputate malesuada felis.</p>
      <p>In iaculis nisi id ligula condimentum consequat. Fusce a massa lorem. Morbi id nisl ut tellus volutpat
        pulvinar a vel dolor. Phasellus eu purus tincidunt augue hendrerit posuere. Ut bibendum tincidunt nisi,
        sed cursus arcu pulvinar sed. Fusce accumsan ante et libero feugiat, congue maximus urna blandit. Nunc a
        est eu urna auctor congue. Aenean euismod ipsum sed nulla pretium rutrum.</p>
      <p>Nunc id augue libero. Donec quis metus risus. Donec posuere vulputate purus, a semper justo consectetur
        at. Cras porta vestibulum pulvinar. Fusce in leo lacinia massa fringilla pellentesque ac sit amet sem.
        Nullam accumsan ante leo, eu faucibus lorem iaculis in. Duis id gravida libero.</p>
      <p>Nulla facilisi. Duis tempus egestas eros et venenatis. Maecenas dictum ipsum sem, vitae aliquam diam
        viverra eget. Curabitur dui turpis, fermentum eleifend ornare id, pellentesque vitae metus. Duis a est
        faucibus, maximus nunc feugiat, rutrum ipsum. Integer in odio nisl. Quisque tortor sem, sollicitudin eget
        cursus nec, lobortis quis eros. Integer a sapien semper, vulputate ex at, tempor ante.</p>
      <p>Donec at est ut quam pharetra fermentum. In auctor quam ut velit porttitor, sit amet convallis sapien
        interdum. Suspendisse sed magna molestie purus iaculis ultrices. Ut convallis facilisis bibendum. Aenean
        vitae velit quis felis congue aliquam vitae ac felis. Nulla ipsum augue, elementum quis venenatis
        ullamcorper, auctor at augue. Vestibulum varius tortor sit amet mauris finibus, at consectetur leo dictum.
        Duis a odio rutrum, efficitur orci a, congue ipsum. Nulla efficitur, velit non pellentesque pretium,
        tellus tortor auctor purus, nec mollis mauris felis quis elit. Etiam efficitur eleifend mi, vel sagittis
        neque auctor ut.</p>
    </div>
  </div>
З фоном 
<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner">
      <div class="title">FAB Backdrop</div>
    </div>
  </div>
  <div class="fab-backdrop"></div>
  <div class="fab fab-right-bottom">
    <a href="#">
      <i class="icon t4-icons if-not-md">plus</i>
      <i class="icon t4-icons if-not-md">xmark</i>
      <i class="icon material-icons md-only">add</i>
      <i class="icon material-icons md-only">close</i>
    </a>
    <div class="fab-buttons fab-buttons-top">
      <a class="fab-label-button" href="#"><span>1</span><span class="fab-label">Action 1</span></a>
      <a class="fab-label-button" href="#"><span>2</span><span class="fab-label">Action 2</span></a>
    </div>
  </div>
  <div class="page-content">
    <div class="block">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae porta enim. Sed ultricies lacinia
        mauris, non tincidunt sem eleifend eget. Duis convallis quis sem non volutpat. Morbi risus lorem, dapibus
        et nulla ac, pharetra maximus elit. Etiam vitae lacus a dui hendrerit ornare vitae id est. Pellentesque ut
        tortor id sem maximus lobortis at egestas nulla. Nulla pretium, nunc et porta ullamcorper, sem lorem
        elementum massa, rhoncus ullamcorper odio dui vel mauris. Ut lobortis neque congue eros posuere blandit.
        Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. In
        sem dolor, tempus eu tellus quis, vulputate malesuada felis.</p>
      <p>In iaculis nisi id ligula condimentum consequat. Fusce a massa lorem. Morbi id nisl ut tellus volutpat
        pulvinar a vel dolor. Phasellus eu purus tincidunt augue hendrerit posuere. Ut bibendum tincidunt nisi,
        sed cursus arcu pulvinar sed. Fusce accumsan ante et libero feugiat, congue maximus urna blandit. Nunc a
        est eu urna auctor congue. Aenean euismod ipsum sed nulla pretium rutrum.</p>
      <p>Nunc id augue libero. Donec quis metus risus. Donec posuere vulputate purus, a semper justo consectetur
        at. Cras porta vestibulum pulvinar. Fusce in leo lacinia massa fringilla pellentesque ac sit amet sem.
        Nullam accumsan ante leo, eu faucibus lorem iaculis in. Duis id gravida libero.</p>
      <p>Nulla facilisi. Duis tempus egestas eros et venenatis. Maecenas dictum ipsum sem, vitae aliquam diam
        viverra eget. Curabitur dui turpis, fermentum eleifend ornare id, pellentesque vitae metus. Duis a est
        faucibus, maximus nunc feugiat, rutrum ipsum. Integer in odio nisl. Quisque tortor sem, sollicitudin eget
        cursus nec, lobortis quis eros. Integer a sapien semper, vulputate ex at, tempor ante.</p>
      <p>Donec at est ut quam pharetra fermentum. In auctor quam ut velit porttitor, sit amet convallis sapien
        interdum. Suspendisse sed magna molestie purus iaculis ultrices. Ut convallis facilisis bibendum. Aenean
        vitae velit quis felis congue aliquam vitae ac felis. Nulla ipsum augue, elementum quis venenatis
        ullamcorper, auctor at augue. Vestibulum varius tortor sit amet mauris finibus, at consectetur leo dictum.
        Duis a odio rutrum, efficitur orci a, congue ipsum. Nulla efficitur, velit non pellentesque pretium,
        tellus tortor auctor purus, nec mollis mauris felis quis elit. Etiam efficitur eleifend mi, vel sagittis
        neque auctor ut.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae porta enim. Sed ultricies lacinia
        mauris, non tincidunt sem eleifend eget. Duis convallis quis sem non volutpat. Morbi risus lorem, dapibus
        et nulla ac, pharetra maximus elit. Etiam vitae lacus a dui hendrerit ornare vitae id est. Pellentesque ut
        tortor id sem maximus lobortis at egestas nulla. Nulla pretium, nunc et porta ullamcorper, sem lorem
        elementum massa, rhoncus ullamcorper odio dui vel mauris. Ut lobortis neque congue eros posuere blandit.
        Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. In
        sem dolor, tempus eu tellus quis, vulputate malesuada felis.</p>
      <p>In iaculis nisi id ligula condimentum consequat. Fusce a massa lorem. Morbi id nisl ut tellus volutpat
        pulvinar a vel dolor. Phasellus eu purus tincidunt augue hendrerit posuere. Ut bibendum tincidunt nisi,
        sed cursus arcu pulvinar sed. Fusce accumsan ante et libero feugiat, congue maximus urna blandit. Nunc a
        est eu urna auctor congue. Aenean euismod ipsum sed nulla pretium rutrum.</p>
      <p>Nunc id augue libero. Donec quis metus risus. Donec posuere vulputate purus, a semper justo consectetur
        at. Cras porta vestibulum pulvinar. Fusce in leo lacinia massa fringilla pellentesque ac sit amet sem.
        Nullam accumsan ante leo, eu faucibus lorem iaculis in. Duis id gravida libero.</p>
      <p>Nulla facilisi. Duis tempus egestas eros et venenatis. Maecenas dictum ipsum sem, vitae aliquam diam
        viverra eget. Curabitur dui turpis, fermentum eleifend ornare id, pellentesque vitae metus. Duis a est
        faucibus, maximus nunc feugiat, rutrum ipsum. Integer in odio nisl. Quisque tortor sem, sollicitudin eget
        cursus nec, lobortis quis eros. Integer a sapien semper, vulputate ex at, tempor ante.</p>
      <p>Donec at est ut quam pharetra fermentum. In auctor quam ut velit porttitor, sit amet convallis sapien
        interdum. Suspendisse sed magna molestie purus iaculis ultrices. Ut convallis facilisis bibendum. Aenean
        vitae velit quis felis congue aliquam vitae ac felis. Nulla ipsum augue, elementum quis venenatis
        ullamcorper, auctor at augue. Vestibulum varius tortor sit amet mauris finibus, at consectetur leo dictum.
        Duis a odio rutrum, efficitur orci a, congue ipsum. Nulla efficitur, velit non pellentesque pretium,
        tellus tortor auctor purus, nec mollis mauris felis quis elit. Etiam efficitur eleifend mi, vel sagittis
        neque auctor ut.</p>
    </div>
  </div>
</div>