Блок / Блок контенту

Навігація

Блок
Заголовок блоку
Верхній / нижній колонтитул блоку
Змінні CSS
Приклади

Блок

Блоки вмісту, призначені (здебільшого) для додавання додаткового форматування та необхідного інтервалу для текстового вмісту:

Щоб додати елемент блоку вмісту, просто додайте <div> з класом block:

<div class="block">
  <!-- Вміст блоку -->
</div>

Щоб додати додаткове підсвічування елементу block, нам потрібен додатковий клас block-strong:

<div class="block block-strong">
  <!-- Вміст блоку -->
</div>

Щоб додати контур (межі) навколо блоку, нам потрібен додатковий клас block-outline :

<div class="block block-strong block-outline">
  <!-- вміст блоку -->
</div>

Щоб зробити вставку блоку, нам потрібен додатковий клас inset:

<div class="block block-strong inset">
  <!-- inset block content -->
</div>

Щоб видалити тонкі лінії навколо блоку, нам потрібен додатковий клас no-hairlines:

<div class="block block-strong no-hairlines">
  <!-- block content -->
</div>

Щоб зробити блокову вставку лише на великих екранах, нам потрібно замість цього використовувати клас medium-inset (>= 768px):

<div class="block block-strong medium-inset">
  <!-- inset block content -->
</div>

Щоб отримати повний набір таких адаптивних класів, перегляньте документи Grid docs. Вони бувають з маленькою вставкою xsmall-inset, малою вставкою small-inset, середньою вставкою medium-inset, великою вставкою large-inset, дуже великою вставкою xlarge-inset.

Заголовок блоку

Щоб додати назву блоку перед блоком або списком, нам потрібен елемент із класом block-title:

<div class="block-title">Here comes block title</div>
<div class="block">
  <!-- block content -->
</div>

<div class="block-title">Here comes the list</div>
<div class="list">
  <!-- list content -->
</div>

<!-- Medium size Block Title -->
<div class="block-title block-title-medium">Medium Title</div>
<div class="block">
  <!-- block content -->
</div>

<!-- Large size Block Title -->
<div class="block-title block-title-large">Large Title</div>
<div class="block">
  <!-- block content -->
</div>

Верхній\Нижній колонтитул

Якщо нам потрібні додаткові тексти заголовків і нижніх колонтитулів, ми можемо використати елемент Block Header. Його можна використовувати як всередині, так і поза блоковими елементами (Block, List View)

<!-- Inside of block -->
<div class="block">
  <!-- Block header -->
  <div class="block-header">Block Header</div>
  ...
  <!-- Block footer -->
  <div class="block-footer">Block Footer</div>
</div>

<!-- Outside of block -->
<div class="block-header">Block Header</div>
<div class="block">
  ...
</div>
<div class="block-footer">Block Footer</div>

<!-- After Block Title -->
<div class="block-title">Block Title Here</div>
<div class="block-header">Block Header</div>
<div class="block">
  ...
</div>
<div class="block-footer">Block Footer</div>

Змінні CSS

Нижче наведено список пов’язаних змінних CSS (спеціальні властивості CSS).

:root {
  --t4-block-padding-horizontal: 16px;
  --t4-block-padding-vertical: 16px;
  --t4-block-font-size: inherit;
  --t4-block-text-color: inherit;
  --t4-block-header-margin: 10px;
  --t4-block-footer-margin: 10px;
  --t4-block-header-font-size: 14px;
  --t4-block-footer-font-size: 14px;
  --t4-block-title-text-transform: none;
  --t4-block-title-white-space: nowrap;
  --t4-block-title-medium-text-transform: none;
  --t4-block-title-large-text-transform: none;
  --t4-block-inset-side-margin: 16px;
  --t4-block-title-medium-text-color: #000;
  --t4-block-title-large-text-color: #000;
  --t4-block-strong-bg-color: #fff;
}
:root .dark,
:root.dark {
  --t4-block-title-text-color: #fff;
  --t4-block-strong-border-color: rgba(255, 255, 255, 0.15);
  --t4-block-title-medium-text-color: #fff;
  --t4-block-title-large-text-color: #fff;
  --t4-block-strong-bg-color: #1c1c1d;
}
.ios {
  --t4-block-margin-vertical: 35px;
  --t4-block-strong-border-color: rgba(0, 0, 0, 0.22);
  --t4-block-title-text-color: #000;
  --t4-block-title-font-size: 16px;
  --t4-block-title-font-weight: 600;
  --t4-block-title-line-height: 20px;
  --t4-block-title-margin-bottom: 10px;
  --t4-block-title-medium-font-size: 22px;
  --t4-block-title-medium-font-weight: bold;
  --t4-block-title-medium-line-height: 1.4;
  --t4-block-title-large-font-size: 30px;
  --t4-block-title-large-font-weight: bold;
  --t4-block-title-large-line-height: 1.3;
  --t4-block-inset-border-radius: 8px;
  --t4-block-strong-text-color: #000;
  --t4-block-header-text-color: rgba(0, 0, 0, 0.45);
  --t4-block-footer-text-color: rgba(0, 0, 0, 0.45);
}
.ios .dark,
.ios.dark {
  --t4-block-header-text-color: rgba(255, 255, 255, 0.55);
  --t4-block-footer-text-color: rgba(255, 255, 255, 0.55);
  --t4-block-strong-text-color: #fff;
}
.md {
  --t4-block-margin-vertical: 32px;
  --t4-block-strong-text-color: inherit;
  --t4-block-strong-border-color: rgba(0, 0, 0, 0.12);
  --t4-block-title-font-size: inherit;
  --t4-block-title-text-color: rgba(0, 0, 0, 0.54);
  --t4-block-title-font-weight: 500;
  --t4-block-title-line-height: 16px;
  --t4-block-title-margin-bottom: 16px;
  --t4-block-title-medium-font-size: 24px;
  --t4-block-title-medium-font-weight: 500;
  --t4-block-title-medium-line-height: 1.3;
  --t4-block-title-large-font-size: 34px;
  --t4-block-title-large-font-weight: 500;
  --t4-block-title-large-line-height: 1.2;
  --t4-block-inset-border-radius: 4px;
  --t4-block-header-text-color: rgba(0, 0, 0, 0.54);
  --t4-block-footer-text-color: rgba(0, 0, 0, 0.54);
}
.md .dark,
.md.dark {
  --t4-block-header-text-color: rgba(255, 255, 255, 0.54);
  --t4-block-footer-text-color: rgba(255, 255, 255, 0.54);
}
.aurora {
  --t4-block-margin-vertical: 32px;
  --t4-block-strong-border-color: rgba(0, 0, 0, 0.12);
  --t4-block-title-font-size: 16px;
  --t4-block-title-text-color: #000;
  --t4-block-title-font-weight: 600;
  --t4-block-title-line-height: 1.5;
  --t4-block-title-margin-bottom: 10px;
  --t4-block-title-medium-font-size: 22px;
  --t4-block-title-medium-font-weight: bold;
  --t4-block-title-medium-line-height: 1.4;
  --t4-block-title-large-font-size: 28px;
  --t4-block-title-large-font-weight: bold;
  --t4-block-title-large-line-height: 1.3;
  --t4-block-inset-border-radius: 8px;
  --t4-block-strong-text-color: inherit;
  --t4-block-header-text-color: rgba(0, 0, 0, 0.6);
  --t4-block-footer-text-color: rgba(0, 0, 0, 0.6);
}
.aurora .dark,
.aurora.dark {
  --t4-block-header-text-color: rgba(255, 255, 255, 0.54);
  --t4-block-footer-text-color: rgba(255, 255, 255, 0.54);
  --t4-block-strong-text-color: #fff;
}

Приклади

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner">
      <div class="title">Block</div>
    </div>
  </div>
  <div class="page-content">
    <p>This paragraph is outside of content block. Not cool, but useful for any custom elements with custom
      styling.</p>
    <div class="block">
      <p>Here comes paragraph within content block. Donec et nulla auctor massa pharetra adipiscing ut sit amet
        sem. Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis, vulputate turpis vel,
        sagittis felis. </p>
    </div>
    <div class="block block-strong">
      <p>Here comes another text block with additional "<b>block-strong</b>" class. Praesent nec imperdiet diam.
        Maecenas vel lectus porttitor, consectetur magna nec, viverra sem. Aliquam sed risus dolor. Morbi
        tincidunt ut libero id sodales. Integer blandit varius nisi quis consectetur. </p>
    </div>
    <div class="block-title">Block title</div>
    <div class="block">
      <p>Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. Suspendisse molestie velit vitae mattis
        tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis felis. </p>
    </div>
    <div class="block-title">Another ultra long content block title</div>
    <div class="block block-strong">
      <p>Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. Suspendisse molestie velit vitae mattis
        tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis felis. </p>
    </div>
    <div class="block-title">Inset</div>
    <div class="block block-strong inset">
      <p>Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. Suspendisse molestie velit vitae mattis
        tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis felis. </p>
    </div>
    <div class="block-title">Tablet Inset</div>
    <div class="block block-strong medium-inset">
      <p>Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. Suspendisse molestie velit vitae mattis
        tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis felis. </p>
    </div>
    <div class="block-title">With Header & Footer</div>
    <div class="block">
      <div class="block-header">Block Header</div>
      <p>Here comes paragraph within content block. Donec et nulla auctor massa pharetra adipiscing ut sit amet
        sem. Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis, vulputate turpis vel,
        sagittis felis. </p>
      <div class="block-footer">Block Footer</div>
    </div>
    <div class="block-header">Block Header</div>
    <div class="block">
      <p>Here comes paragraph within content block. Donec et nulla auctor massa pharetra adipiscing ut sit amet
        sem. Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis, vulputate turpis vel,
        sagittis felis. </p>
    </div>
    <div class="block-footer">Block Footer</div>
    <div class="block block-strong">
      <div class="block-header">Block Header</div>
      <p>Here comes paragraph within content block. Donec et nulla auctor massa pharetra adipiscing ut sit amet
        sem. Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis, vulputate turpis vel,
        sagittis felis. </p>
      <div class="block-footer">Block Footer</div>
    </div>
    <div class="block-header">Block Header</div>
    <div class="block block-strong">
      <p>Here comes paragraph within content block. Donec et nulla auctor massa pharetra adipiscing ut sit amet
        sem. Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis, vulputate turpis vel,
        sagittis felis. </p>
    </div>
    <div class="block-footer">Block Footer</div>
    <div class="block-title block-title-large">Block Title Large</div>
    <div class="block block-strong">
      <p>Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. Suspendisse molestie velit vitae mattis
        tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis felis. </p>
    </div>
    <div class="block-title block-title-medium">Block Title Medium</div>
    <div class="block block-strong">
      <p>Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. Suspendisse molestie velit vitae mattis
        tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis felis. </p>
    </div>
  </div>
</div>