Block / Content Block
Content blocks designed (mostly) to add extra formatting and required spacing for text content:
Block
To add content block element just add <div> with block class:
<div class="block">
<!-- block content -->
</div>To add extra highlighting to block element we need additional block-strong class
<div class="block block-strong">
<!-- block content -->
</div>To remove hairlines around strong block we need additional no-hairlines class
<div class="block block-strong no-hairlines">
<!-- block content -->
</div>To make block inset we need additional inset class
<div class="block block-strong inset">
<!-- inset block content -->
</div>To make block inset only on large screens we need to use tablet-inset class instead
<div class="block block-strong tablet-inset">
<!-- inset block content -->
</div>Block Title
To add block title before Block or List View we need element with block-title class:
<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 / Footer
If we need and extra heading and footer texts we can use Block Header element. It can be used both inside and outside of block elements (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 Variables
Below is the list of related CSS variables (CSS custom properties).
:root {
--f7-block-font-size: inherit;
--f7-block-strong-bg-color: #fff;
--f7-block-title-font-size: inherit;
--f7-block-header-margin: 10px;
--f7-block-footer-margin: 10px;
--f7-block-header-font-size: 14px;
--f7-block-footer-font-size: 14px;
--f7-block-title-white-space: nowrap;
--f7-block-title-medium-text-color: #000;
--f7-block-title-medium-text-transform: none;
--f7-block-title-large-text-color: #000;
--f7-block-title-large-text-transform: none;
}
:root .theme-dark,
:root.theme-dark {
--f7-block-strong-border-color: #282829;
--f7-block-title-medium-text-color: #fff;
--f7-block-title-large-text-color: #fff;
--f7-block-strong-bg-color: #1c1c1d;
}
.ios {
--f7-block-text-color: #6d6d72;
--f7-block-padding-horizontal: 15px;
--f7-block-padding-vertical: 15px;
--f7-block-margin-vertical: 35px;
--f7-block-strong-text-color: #000;
--f7-block-strong-border-color: #c8c7cc;
--f7-block-title-text-transform: uppercase;
--f7-block-title-text-color: #6d6d72;
--f7-block-title-font-weight: 400;
--f7-block-title-line-height: 17px;
--f7-block-title-margin-bottom: 10px;
--f7-block-title-medium-font-size: 22px;
--f7-block-title-medium-font-weight: bold;
--f7-block-title-medium-line-height: 1.4;
--f7-block-title-large-font-size: 29px;
--f7-block-title-large-font-weight: bold;
--f7-block-title-large-line-height: 1.3;
--f7-block-inset-side-margin: 15px;
--f7-block-inset-border-radius: 7px;
--f7-block-header-text-color: #8f8f94;
--f7-block-footer-text-color: #8f8f94;
}
.ios .theme-dark,
.ios.theme-dark {
--f7-block-title-text-color: #8E8E93;
--f7-block-header-text-color: #8E8E93;
--f7-block-footer-text-color: #8E8E93;
--f7-block-strong-text-color: #fff;
}
.md {
--f7-block-text-color: inherit;
--f7-block-padding-horizontal: 16px;
--f7-block-padding-vertical: 16px;
--f7-block-margin-vertical: 32px;
--f7-block-strong-text-color: inherit;
--f7-block-strong-border-color: rgba(0, 0, 0, 0.12);
--f7-block-title-text-transform: none;
--f7-block-title-text-color: rgba(0, 0, 0, 0.54);
--f7-block-title-font-weight: 500;
--f7-block-title-line-height: 16px;
--f7-block-title-margin-bottom: 16px;
--f7-block-title-medium-font-size: 24px;
--f7-block-title-medium-font-weight: 500;
--f7-block-title-medium-line-height: 1.3;
--f7-block-title-large-font-size: 34px;
--f7-block-title-large-font-weight: 500;
--f7-block-title-large-line-height: 1.2;
--f7-block-inset-side-margin: 16px;
--f7-block-inset-border-radius: 4px;
--f7-block-header-text-color: rgba(0, 0, 0, 0.54);
--f7-block-footer-text-color: rgba(0, 0, 0, 0.54);
}
.md .theme-dark,
.md.theme-dark {
--f7-block-title-text-color: #fff;
--f7-block-header-text-color: rgba(255, 255, 255, 0.54);
--f7-block-footer-text-color: rgba(255, 255, 255, 0.54);
}
.aurora {
--f7-block-text-color: inherit;
--f7-block-padding-horizontal: 15px;
--f7-block-padding-vertical: 15px;
--f7-block-margin-vertical: 15px;
--f7-block-strong-text-color: inherit;
--f7-block-strong-border-color: rgba(0, 0, 0, 0.12);
--f7-block-title-text-transform: none;
--f7-block-title-text-color: rgba(0, 0, 0, 0.7);
--f7-block-title-font-weight: 600;
--f7-block-title-line-height: 1.5;
--f7-block-title-margin-bottom: 5px;
--f7-block-title-medium-font-size: 20px;
--f7-block-title-medium-font-weight: 600;
--f7-block-title-medium-line-height: 1.4;
--f7-block-title-large-font-size: 28px;
--f7-block-title-large-font-weight: bold;
--f7-block-title-large-line-height: 1.3;
--f7-block-inset-side-margin: 15px;
--f7-block-inset-border-radius: 4px;
--f7-block-header-text-color: rgba(0, 0, 0, 0.6);
--f7-block-footer-text-color: rgba(0, 0, 0, 0.6);
}
.aurora .theme-dark,
.aurora.theme-dark {
--f7-block-title-text-color: #fff;
--f7-block-header-text-color: rgba(255, 255, 255, 0.52);
--f7-block-footer-text-color: rgba(255, 255, 255, 0.52);
--f7-block-strong-text-color: #fff;
}
Examples
<p>This paragraph is outside of content block. Not cool, but useful for any custom elements with custom styling.</p>
<!-- Content block -->
<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>
<!-- Additional "block-strong" class for extra highlighting -->
<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>
<!-- Block Title -->
<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>
<!-- Inset content block -->
<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>
<!-- This block will be inset only on tablets (large screens) -->
<div class="block block-strong tablet-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">
<!-- Block footer -->
<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>
<!-- Block header -->
<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>