Skip to main content

Картки

Навігація

Картки

Картки разом зі списком — це чудовий спосіб зберігати й упорядковувати інформацію. Картки містять унікальні пов’язані дані, наприклад, фото, текст і посилання на одну тему. Картки зазвичай є точкою входу до більш складної та детальної інформації.

Макет картки

Розгляньмо базовий HTML макет картки:
<div class="card">
  <div class="card-header">Header</div>
  <div class="card-content">
    <!-- вміст картки  -->
  </div>
  <div class="card-footer">Footer</div>
</div>

<div class="card">
  <div class="card-header">Header</div>
  <div class="card-content card-content-padding">
    <!-- вміст картки  -->
  </div>
  <div class="card-footer">Footer</div>
</div>

<div class="card card-outline">
  <div class="card-header">Header</div>
  <div class="card-content">
    <!-- вміст картки  -->
  </div>
  <div class="card-footer">Footer</div>
</div>
Де,

● <div class="card"> - Контейнер для карток

○ <div class="card-header"> - Заголовок картки. Здебільшого використовується для відображення назви картки. Необов'язковий

○ <div class="card-footer"> - Нижній колонтитул картки, використовується для додаткової інформації або для спеціальних дій/посилань. Необов'язковий

○ <div class="card-content"> - Основний контейнер для вмісту картки. Обов'язковий

○ <div class="card-content card-content-padding"> - Додаткове заповнення вмісту картки card-content-padding, використовується для додавання додаткового заповнення до вмісту картки card-outline - додатковий клас, який можна додати до елемента картки, щоб зробити його з контуром

○ no-shadow - додатковий клас, який можна додати до елемента картки, щоб видалити його тінь

○ no-border - додатковий клас, який можна додати до елемента картки, щоб видалити його рамку (для картки з контурами)

Зверніть увагу, що «заголовок картки» та «нижній колонтитул картки» мають макет гнучкого поля (display:flex), де елементи мають вертикальне вирівнювання по центру. Якщо вам потрібно вирівняти елементи за верхнім або нижнім колонтитулами, ви можете використовувати додаткові класи типографіки typography, наприклад:

<div class="card-header align-items-flex-start"> - вирівняти елементи заголовка за верхнім рядком заголовка

<div class="card-footer align-items-flex-end"> - вирівняти елементи нижнього колонтитула за нижнім рядком колонтитула

Розширювані картки

Розширювані картки (так звані картки AppStore) — це підмножина звичайних карток, які розгортаються після натискання на повний екран на мобільному телефоні та більшого розміру на планшеті.
Макет розгорнутих карток
Він має дещо інший і спрощений макет:
<!-- додатковий клас  "card-expandable" на картці щоб зроити її розгорнутою -->
<div class="card card-expandable">
  <!-- вміст картки -->
  <div class="card-content">
    <!-- увесь вміст какртки розмістити тут -->
  </div>
</div>
Де

● card-expandable - клас доповнення до елемента картки, щоб зробити його розширюваним

● card-content - тут єдине місце для розміщення будь-якого вмісту картки

Отже, усі додаткові елементи, як-от card-content-padding, card-header, card-footer, мають бути розміщені всередині card-content, коли картку можна розширити.

Розширюваний розмір картки
За умовчанням розширювана картка відкривається до фіксованого розміру на планшеті/настільному комп’ютері. Щоб розширювана картка відкривалася на весь екран на екрані планшета/настільного комп’ютера, для елемента картки потрібен додатковий клас card-tablet-fullscreen. В іншому випадку ви можете налаштувати цей розмір за допомогою змінних CSS --t4-card-expandable-tablet-width і --t4-card-expandable-tablet-height.

Розширюваний вміст картки (card content) має ширину "100vw" у згорнутому (закритому) стані. Це зроблено для покращення продуктивності переходу відкриття/закриття картки, тому вам потрібно подбати про позиціювання її вмісту. Ви можете зробити його ширину вмісту також анімованою та адаптивною, додавши додатковий клас card-expandable-animate-width до елемента card, але продуктивність у цьому випадку може бути гіршою.

Приховати елементи під час відкриття/закриття
Розширювана картка має 2 стани: закрито та відкрито. І можна приховати/показати елементи картки за допомогою цих двох класів:

● card-opened-fade-in - елемент із таким класом у вмісті картки матиме непрозорість 0, коли картку закрито, і зменшуватиметься до 1, коли картку відкрито.

●card-opened-fade-out - елемент із таким класом у вмісті картки матиме 1 непрозорість, коли картку закрито, і зменшуватиметься до 0, коли картку відкрито.

Запобігання відкриттю картки
У деяких макетах ви можете мати кнопку чи посилання у видимій області або розгорнутій картці, коли вона згорнута. Щоб дозволити натискання такої кнопки чи посилання та запобігти відкриттю розгорнутої картки, нам потрібно додати до цієї кнопки клас card-prevent-open: 
<div class="card card-expandable">
  <div class="card-content">
    ...
    <!-- Додайте до елемента "card-prevent-open" і клікніть на ньому, щоб відкрити розгорнуту картку -->
    <a href="#" class="button card-prevent-open">Button</a>
  </div>
</div>
Заставка картки, що розгортається
Якщо ви ввімкнули розширюваний фон картки (увімкнено за замовчуванням, див. параметри нижче), він автоматично додасть елемент фону (темне накладання за карткою) на картку, відкриту на батьківській сторінці картки.

У деяких макетах вам може знадобитися розмістити такий елемент фону у спеціальному місці. У цьому випадку нам потрібно вручну додати цей елемент і вказати його в атрибуті data-backdrop-el картки:

<div class="block">
  <!-- власний елемент фону -->
  <div class="card-backdrop custom-backdrop"></div>
  <!-- передати свій селектор CSS в атрибут data-backdrop-el -->
  <div class="card card-expandable" data-backdrop-el=".custom-backdrop">
    ...
  </div>
</div>

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

Розгляньмо пов’язані методи роботи програми з розширюваними картками:

app.card.open(el, animate)- відкрити розширювану картку

● el - HTMLElement or string (за допомогою селектора CSS). Розширювана картка для відкриття.

● animate - boolean. Відкриває розгорнуту картку з анімацією. За замовчуванням — ⁣ true

app.card.close(el, animate)- закрити розширювану картку

● el - HTMLElement or string (за допомогою селектора CSS). Розширювана картка для закриття.

● animate - boolean. Закриває розгорнуту картку з анімацією. За замовчуванням — ⁣ true

app.card.toggle(el, animate)- перемкнути розширювану картку

● el - HTMLElement or string (за допомогою селектора CSS). Розширювана картка для перемикання.

● animate - boolean. Перемкнути розгорнуту картку з анімацією. За замовчуванням — ⁣ true

Параметри застосунка Картки

Можна контролювати певну поведінку карток за замовчуванням за допомогою глобальних параметрів застосунку, передаючи параметри, пов’язані з картками, у параметрі картки:
ПараметрЗа замовчуваннямОписТип
hideNavbarOnOpen
true
Приховає панель навігації на відкритій картці, що розгортається.
boolean
hideToolbarOnOpen
true
Приховає панель інструментів на відкритій картці, що розширюється
boolean
hideStatusbarOnOpen
true
Приховає «Панель стану» (або повністю приховає панель навігації) на відкритій картці, що розширюється.
boolean
swipeToClose
true
Дозволяє закривати картку, що розширюється, за допомогою свайпу пальцем.
boolean
backdrop
true
Вмикає розширюваний фоновий шар картки.
boolean
closeByBackdropClick
true
Якщо ввімкнути цю функцію, картку, що розгортається, буде закрито після клацання на фоні.
boolean
Наприклад: 
var app = new Techno4({
  card: {
    hideNavbarOnOpen: false,
    closeByBackdropClick: false,
  },
});
Крім того, усі ці параметри можна встановити на кожній розширюваній картці окремо за допомогою однакових атрибутів data-, включаючи додатковий атрибут data-animate:
<!-- ця картка відкриється без анімації -->
<div class="card card-expandable" data-animate="false">
  ...
</div>

<!-- ця картка відкриється без фону -->
<div class="card card-expandable" data-backdrop="false">
  ...
</div>

Контрольні картки з посиланнями

Відкривати та закривати необхідні розширювані картки можна за допомогою спеціальних класів і атрибутів даних за посиланнями:
● Щоб відкрити розгорнуту картку, нам потрібно додати клас «card-open» до будь-якого елемента HTML (бажано для посилання)

● Щоб закрити розширення, нам потрібно додати клас "card-close" до будь-якого елемента HTML (бажано для посилання)

● Якщо у вас є більше ніж одна розширювана картка в DOM, вам потрібно вказати відповідну картку за допомогою додаткового атрибута data-card=".my-card у цьому елементі HTML

Події Картки

Картка, що розгортається, запускатиме такі події DOM в елементі картки та події в екземплярі застосунку:

Події DOM

ПодіяОб'єктОпис
card:beforeopen
Card Element

<div class="card">

Подія буде ініційована безпосередньо перед тим, як картка, що розгортається, почне свою початкову анімацію. event.detail.prevent містить функцію, яка запобігає відкриттю картки під час виклику
card:open
Card Element

<div class="card">

Подія буде ініційована, коли розгорнута картка почне свою початкову анімацію
card:opened
Card Element

<div class="card">

Подію буде ініційовано після завершення початкової анімації розгорнутої картки
card:close
Card Element

<div class="card">

Подія буде ініційована, коли розгорнута картка почне свою анімацію закриття
card:close
Card Element

<div class="card">

Подія буде ініційована, коли розгорнута картка почне свою анімацію закриття
card:closed
Card Element

<div class="card">

Подія буде ініційована після того, як розгорнута картка завершить свою анімацію закриття

Події екземплярів застосунку

ПодіяАргументОпис
cardBeforeOpen
(el, prevent)
Подія буде ініційована безпосередньо перед тим, як картка, що розгортається, почне свою початкову анімацію. prevent містить функцію, яка запобігатиме відкриттю розширюваної картки під час виклику
cardOpen
(el)
Подія буде ініційована, коли розгорнута картка почне свою початкову анімацію. В якості аргументу обробник події отримав HTML-елемент картки
cardOpened
(el)
Подію буде ініційовано після завершення початкової анімації розгорнутої картки. В якості аргументу обробник події отримав HTML-елемент картки
cardClose
(el)
Подія буде ініційована, коли розгорнута картка почне свою анімацію закриття. В якості аргументу обробник події отримав HTML-елемент картки
cardClosed
(el)
Подія буде ініційована після того, як розгорнута картка завершить свою анімацію закриття. В якості аргументу обробник події отримав HTML-елемент картки

Змінні CSS

Нижче наведено список пов’язаних змінних CSS (спеціальні властивості CSS).
:root {
  --t4-card-margin-horizontal: 16px;
  --t4-card-margin-vertical: 16px;
  --t4-card-content-padding-horizontal: 16px;
  --t4-card-content-padding-vertical: 16px;
  --t4-card-border-radius: 4px;
  --t4-card-font-size: inherit;
  --t4-card-header-text-color: inherit;
  --t4-card-header-font-weight: 400;
  --t4-card-header-padding-horizontal: 16px;
  --t4-card-footer-font-weight: 400;
  --t4-card-footer-font-size: inherit;
  --t4-card-footer-padding-horizontal: 16px;
  --t4-card-expandable-font-size: 16px;
  --t4-card-expandable-tablet-width: 670px;
  --t4-card-expandable-tablet-height: 670px;
  --t4-card-bg-color: #fff;
  --t4-card-outline-border-color: rgba(0, 0, 0, 0.12);
  --t4-card-header-border-color: rgba(0, 0, 0, 0.1);
  --t4-card-footer-border-color: rgba(0, 0, 0, 0.1);
  --t4-card-expandable-bg-color: #fff;
}
:root .dark,
:root.dark {
  --t4-card-bg-color: #1c1c1d;
  --t4-card-expandable-bg-color: #1c1c1d;
  --t4-card-outline-border-color: rgba(255, 255, 255, 0.15);
  --t4-card-header-border-color: rgba(255, 255, 255, 0.15);
  --t4-card-footer-border-color: rgba(255, 255, 255, 0.15);
  --t4-card-footer-text-color: rgba(255, 255, 255, 0.55);
}
.ios {
  --t4-card-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
  --t4-card-header-font-size: 17px;
  --t4-card-header-padding-vertical: 10px;
  --t4-card-header-min-height: 44px;
  --t4-card-footer-text-color: rgba(0, 0, 0, 0.45);
  --t4-card-footer-padding-vertical: 10px;
  --t4-card-footer-min-height: 44px;
  --t4-card-expandable-margin-horizontal: 20px;
  --t4-card-expandable-margin-vertical: 30px;
  --t4-card-expandable-box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.3);
  --t4-card-expandable-border-radius: 15px;
  --t4-card-expandable-tablet-border-radius: 5px;
  --t4-card-expandable-header-font-size: 27px;
  --t4-card-expandable-header-font-weight: bold;
}
.md {
  --t4-card-box-shadow: var(--t4-elevation-1);
  --t4-card-header-font-size: 16px;
  --t4-card-header-padding-vertical: 4px;
  --t4-card-header-min-height: 48px;
  --t4-card-footer-text-color: rgba(0, 0, 0, 0.54);
  --t4-card-footer-padding-vertical: 4px;
  --t4-card-footer-min-height: 48px;
  --t4-card-expandable-margin-horizontal: 12px;
  --t4-card-expandable-margin-vertical: 24px;
  --t4-card-expandable-box-shadow: var(--t4-elevation-10);
  --t4-card-expandable-border-radius: 8px;
  --t4-card-expandable-tablet-border-radius: 4px;
  --t4-card-expandable-header-font-size: 24px;
  --t4-card-expandable-header-font-weight: 500;
}
.aurora {
  --t4-card-border-radius: 8px;
  --t4-card-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
  --t4-card-header-font-size: 16px;
  --t4-card-header-font-weight: bold;
  --t4-card-header-padding-vertical: 8px;
  --t4-card-header-min-height: 48px;
  --t4-card-footer-text-color: rgba(0, 0, 0, 0.6);
  --t4-card-footer-padding-vertical: 8px;
  --t4-card-footer-min-height: 48px;
  --t4-card-expandable-margin-horizontal: 10px;
  --t4-card-expandable-margin-vertical: 20px;
  --t4-card-expandable-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
  --t4-card-expandable-border-radius: 8px;
  --t4-card-expandable-tablet-border-radius: 4px;
  --t4-card-expandable-header-font-size: 24px;
  --t4-card-expandable-header-font-weight: bold;
}

Приклади 

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="title">Cards</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block-title">Simple Cards</div>
      <div class="card">
        <div class="card-content card-content-padding">Це проста картка зі звичайним текстом, але картки також можуть
          містити власний верхній, нижній колонтитул, список, зображення або будь-який інший елемент.</div>
      </div>
      <div class="card">
        <div class="card-header">Card header</div>
        <div class="card-content card-content-padding">Card with header and footer. Card headers are used to display
          card titles and footers for additional information or just for custom actions.</div>
        <div class="card-footer">Card Footer</div>
      </div>
      <div class="card">
        <div class="card-content card-content-padding">Another card. Lorem ipsum dolor sit amet, consectetur
          adipiscing elit. Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet. Mauris aliquet magna
          justo. </div>
      </div>
      <div class="block-title">Outline Cards</div>
      <div class="card card-outline">
        <div class="card-content card-content-padding">This is a simple card with plain text, but cards can also
          contain their own header, footer, list view, image, or any other element.</div>
      </div>
      <div class="card card-outline">
        <div class="card-header">Card header</div>
        <div class="card-content card-content-padding">Card with header and footer. Card headers are used to display
          card titles and footers for additional information or just for custom actions.</div>
        <div class="card-footer">Card Footer</div>
      </div>
      <div class="card card-outline">
        <div class="card-content card-content-padding">Another card. Lorem ipsum dolor sit amet, consectetur
          adipiscing elit. Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet. Mauris aliquet magna
          justo. </div>
      </div>
      <div class="block-title">Styled Cards</div>
      <div class="card demo-card-header-pic">
        <div style="background-image:url(https://cdn.Techno4.io/placeholder/nature-1000x600-3.jpg)"
          class="card-header align-items-flex-end">Journey To Mountains</div>
        <div class="card-content card-content-padding">
          <p class="date">Posted on January 21, 2015</p>
          <p>Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies efficitur vitae non felis. Phasellus
            quis nibh hendrerit...</p>
        </div>
        <div class="card-footer"><a href="#" class="link">Like</a><a href="#" class="link">Read more</a></div>
      </div>
      <div class="card demo-card-header-pic">
        <div style="background-image:url(https://cdn.Techno4.io/placeholder/people-1000x600-6.jpg)"
          class="card-header align-items-flex-end">Lorem Ipsum</div>
        <div class="card-content card-content-padding">
          <p class="date">Posted on January 21, 2015</p>
          <p>Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies efficitur vitae non felis. Phasellus
            quis nibh hendrerit...</p>
        </div>
        <div class="card-footer"><a href="#" class="link">Like</a><a href="#" class="link">Read more</a></div>
      </div>
      <div class="block-title">Facebook Cards</div>
      <div class="card demo-facebook-card">
        <div class="card-header">
          <div class="demo-facebook-avatar"><img src="https://cdn.Techno4.io/placeholder/people-68x68-1.jpg"
              width="34" height="34" /></div>
          <div class="demo-facebook-name">John Doe</div>
          <div class="demo-facebook-date">Monday at 3:47 PM</div>
        </div>
        <div class="card-content"> <img src="https://cdn.Techno4.io/placeholder/nature-1000x700-8.jpg"
            width="100%" /></div>
        <div class="card-footer"><a href="#" class="link">Like</a><a href="#" class="link">Comment</a><a href="#"
            class="link">Share</a></div>
      </div>
      <div class="card demo-facebook-card">
        <div class="card-header">
          <div class="demo-facebook-avatar"><img src="https://cdn.Techno4.io/placeholder/people-68x68-1.jpg"
              width="34" height="34" /></div>
          <div class="demo-facebook-name">John Doe</div>
          <div class="demo-facebook-date">Monday at 2:15 PM</div>
        </div>
        <div class="card-content card-content-padding">
          <p>What a nice photo i took yesterday!</p><img
            src="https://cdn.Techno4.io/placeholder/nature-1000x700-8.jpg" width="100%" />
          <p class="likes">Likes: 112 &nbsp;&nbsp; Comments: 43</p>
        </div>
        <div class="card-footer"><a href="#" class="link">Like</a><a href="#" class="link">Comment</a><a href="#"
            class="link">Share</a></div>
      </div>
      <div class="block-title">Cards With List View</div>
      <div class="card">
        <div class="card-content">
          <div class="list links-list no-ios-edges">
            <ul>
              <li><a href="#">Link 1</a></li>
              <li><a href="#">Link 2</a></li>
              <li><a href="#">Link 3</a></li>
              <li><a href="#">Link 4</a></li>
              <li><a href="#">Link 5</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="card">
        <div class="card-header">New Releases:</div>
        <div class="card-content">
          <div class="list media-list no-ios-edges">
            <ul>
              <li class="item-content">
                <div class="item-media">
                  <img src="https://cdn.Techno4.io/placeholder/fashion-88x88-4.jpg" width="44" />
                </div>
                <div class="item-inner">
                  <div class="item-title-row">
                    <div class="item-title">Yellow Submarine</div>
                  </div>
                  <div class="item-subtitle">Beatles</div>
                </div>
              </li>
              <li class="item-content">
                <div class="item-media">
                  <img src="https://cdn.Techno4.io/placeholder/fashion-88x88-5.jpg" width="44" />
                </div>
                <div class="item-inner">
                  <div class="item-title-row">
                    <div class="item-title">Don't Stop Me Now</div>
                  </div>
                  <div class="item-subtitle">Queen</div>
                </div>
              </li>
              <li class="item-content">
                <div class="item-media">
                  <img src="https://cdn.Techno4.io/placeholder/fashion-88x88-6.jpg" width="44" />
                </div>
                <div class="item-inner">
                  <div class="item-title-row">
                    <div class="item-title">Billie Jean</div>
                  </div>
                  <div class="item-subtitle">Michael Jackson</div>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="card-footer"> <span>January 20, 2015</span><span>5 comments</span></div>
      </div>
      <div class="block-title">Expandable Cards</div>
      <div class="card card-expandable">
        <div class="card-content">
          <div class="bg-color-red" style="height: 300px">
            <div class="card-header text-color-white display-block">Techno4<br />
              <small style="opacity: 0.7">Build Mobile Apps</small>
            </div>
            <a href="#" class="link card-close card-opened-fade-in color-white"
              style="position: absolute; right: 15px; top: 15px">
              <i class="icon t4-icons">xmark_circle_fill</i>
            </a>
          </div>
          <div class="card-content-padding">
            <p>Techno4 - is a free and open source HTML mobile framework to develop hybrid mobile apps or web
              apps with iOS or Android (Material) native look and feel. It is also an indispensable prototyping apps
              tool to show working app prototype as soon as possible in case you need to.</p>
            <p>The main approach of the Techno4 is to give you an opportunity to create iOS and Android
              (Material) apps with HTML, CSS and JavaScript easily and clear. Techno4 is full of freedom. It
              doesn't limit your imagination or offer ways of any solutions somehow. Techno4 gives you freedom!
            </p>
            <p>Techno4 is not compatible with all platforms. It is focused only on iOS and Android (Material) to
              bring the best experience and simplicity.</p>
            <p>Techno4 is definitely for you if you decide to build iOS and Android hybrid app (Cordova or
              Capacitor) or web app that looks like and feels as great native iOS or Android (Material) apps.</p>
          </div>
        </div>
      </div>
      <div class="card card-expandable">
        <div class="card-content">
          <div class="bg-color-yellow" style="height: 300px">
            <div class="card-header text-color-black display-block">Techno4<br />
              <small style="opacity: 0.7">Build Mobile Apps</small>
            </div>
            <a href="#" class="link card-close card-opened-fade-in color-black"
              style="position: absolute; right: 15px; top: 15px">
              <i class="icon t4-icons">xmark_circle_fill</i>
            </a>
          </div>
          <div class="card-content-padding">
            <p>Techno4 - is a free and open source HTML mobile framework to develop hybrid mobile apps or web
              apps with iOS or Android (Material) native look and feel. It is also an indispensable prototyping apps
              tool to show working app prototype as soon as possible in case you need to.</p>
            <p>The main approach of the Techno4 is to give you an opportunity to create iOS and Android
              (Material) apps with HTML, CSS and JavaScript easily and clear. Techno4 is full of freedom. It
              doesn't limit your imagination or offer ways of any solutions somehow. Techno4 gives you freedom!
            </p>
            <p>Techno4 is not compatible with all platforms. It is focused only on iOS and Android (Material) to
              bring the best experience and simplicity.</p>
            <p>Techno4 is definitely for you if you decide to build iOS and Android hybrid app (Cordova or
              Capacitor) or web app that looks like and feels as great native iOS or Android (Material) apps.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style>
  .demo-card-header-pic .card-header {
    height: 40vw;
    background-size: cover;
    background-position: center;
    color: #fff;
  }

  .demo-card-header-pic .card-content-padding .date {
    color: #8e8e93;
  }

  .demo-facebook-card .card-header {
    display: block;
    padding: 10px;
  }

  .demo-facebook-card .demo-facebook-avatar {
    float: left;
  }

  .demo-facebook-card .demo-facebook-name {
    margin-left: 44px;
    font-size: 14px;
    font-weight: 500;
  }

  .demo-facebook-card .demo-facebook-date {
    margin-left: 44px;
    font-size: 13px;
    color: #8e8e93;
  }

  .demo-facebook-card .card-footer {
    background: #fafafa;
  }

  .demo-facebook-card .card-footer a {
    color: #81848b;
    font-weight: 500;
  }

  .demo-facebook-card .card-content img {
    display: block;
  }

  .demo-facebook-card .card-content-padding {
    padding: 15px 10px;
  }

  .demo-facebook-card .card-content-padding .likes {
    color: #8e8e93;
  }
</style>

Techno4 Framework