Github

How to use it

Site structure

Basic webpage template

The markup below is essential for every page of the website. Each page and each template file must contain the following code to get it working.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
    /* five basic css stylesheets */
        <link rel="stylesheet" href="css/t-options.css">
        <link rel="stylesheet" href="css/t-block-style.css">
        <link rel="stylesheet" href="css/t-block-style-mobile.css">
        <link rel="stylesheet" href="css/t-header.css">
        <link rel="stylesheet" href="css/t-footer.css">
    </head>

    <body>
        /* main site wrapper */
        <section id="t-wrapper">

            <header id="t-main-header">
            /* header code goes there... */
            </header>

            <section id="t-main-container">
            
                ======================
                PAGE CONTENT GOES HERE
                ======================
            
            </section>/* end of id="main-container" */

            <footer id="footer-3-cols">
            /* footer code goes there... */
            </footer>

        </section> /* end of id="site-wrapper" */
    </body>
</html>

Schematically, the basic webpage layout looks like this:

CSS Stylesheets & Template Files

Basic CSS Stylesheets

There are five basic CSS stylesheets to be included in a project:

css/options.css contains root CSS variables. It's used to quickly modify colors, border radius, shadows etc throughout the site.

css/t-block-style.css contains styling for every block and element this framework uses.

css/t-block-style-mobile.css contains media queries for responsive styling.

css/t-header.css contains main header styling.

css/t-footer.css contains main footer styling.

Each of these stylesheets needs to be included between <head></head> tags.

Main Header

Tuicast goes with built-in fully responsive header. You can locate its code in html/header.html file.

We'll see header in detail below.

Main Container

The main container is a section between the header and footer where all the page content should be.

Main Footer

There are three pre-designed fully responsive footers placed in html/footer-[number]-columns.html.

Here goes the essential header code which you can locate in html/header.html. Please note that all CSS styling for the main header can be found in css/header.css. The header template, ready-to-use, rests in html/directory.

<header id="t-main-header" class="t-main-header t-bg-darker is-sticky">
    <div id="t-main-header-container">

        /* Responsive mobile hamburger menu, hidden on large screens */
        <input type="checkbox" class="toggleSideMenu" id="toggleSideMenu" autocomplete="off">
        <label for="toggleSideMenu" class="hamburger-icon">
            <div class="hamburger-menu-line hamburger-menu-line-diagonal-1"></div>
            <div class="hamburger-menu-line hamburger-menu-line-horizontal"></div>
            <div class="hamburger-menu-line hamburger-menu-line-diagonal-2"></div>
        </label>

        /* Logo section */
        <section id="t-main-header-logo">
            <img src="../img/logo-small.png" alt="">
        </section>

        /* Main menu container */
        <section id="t-main-header-menu-container">

            /* Responsive section before the menu, hidden on large screens */
            <section id="before-side-menu">
                ===================================
                MOBILE ABOVE-MENU CONTENT GOES HERE
                ===================================
            </section>

            /* Main menu section */
            <nav id="t-main-header-menu">
                <ul>
                    <li><a href="../index.html">Blocks&Elements</a></li>
                    <li><a href="documentation.html">Documentation</a></li>
                    <li><a href="about.html">About</a></li>
                </ul>
            </nav>

            /* Responsive section after the menu, hidden on large screens */
            <section id="after-side-menu">
                ===================================
                MOBILE BELOW-MENU CONTENT GOES HERE
                ===================================
            </section>

        </section>

        /* Section by the right side */
        <section id="t-main-header-right">
        ============================
        RIGHT-SIDE CONTENT GOES HERE
        ============================
        </section>

    </div>
</header>

Here are the schemes of both desktop and mobile headers.

The main header must have #t-main-header ID. .is-sticky class makes the header sticky, also shifting #t-main-container container by the header's height, defined by --header-height option in css/options.css.

#t-main-header container wraps #t-main-header-container block, which is a flex-positioning container for the header elements, which are as follows:

First goes the code part for a hamburger-style button for showing a mobile menu:

<input type="checkbox" class="toggleSideMenu" id="toggleSideMenu" autocomplete="off">
<label for="toggleSideMenu" class="hamburger-icon">
    <div class="hamburger-menu-line hamburger-menu-line-diagonal-1"></div>
    <div class="hamburger-menu-line hamburger-menu-line-horizontal"></div>
    <div class="hamburger-menu-line hamburger-menu-line-diagonal-2"></div>
</label>

#t-main-header-logo is a section to put a logo image into.
#t-main-header-menu-container is a section containing three blocks: #before-side-menu contains information to be shown above the main menu when from mobile device, nav#t-main-header-menu is a place to put your menu, #after-side-menu is for any content beneath the main menu. Both #before-side-menu and #after-side-menu are by default hidden on large screens.
#t-main-header-rightis the last, right-side section.

The mobile menu is 250px width, absolute-positioned, sliding from the left side.

2-Column Footer Source Code

<footer id="t-main-footer" class="t-main-footer t-main-footer-4-columns t-bg-darker t-color-light">
    <div id="t-main-footer-container">

        /* footer top section */
        <section class="t-main-footer-top" >
            ==========================
            FOOTER TOP SECTION CONTENT
            ==========================
        </section>

        /* footer middle section */
        <section class="t-main-footer-middle">

            /* middle left section */
            <section class="t-main-footer-left">
                ==================================
                FOOTER MIDDLE LEFT SECTION CONTENT
                ==================================
            </section>

            /* middle right section */
            <section class="t-main-footer-right">
                ===================================
                FOOTER MIDDLE RIGHT SECTION CONTENT
                ===================================
            </section>
        </section>

        /* footer bottom section */
        <section class="t-main-footer-bottom">
            =============================
            FOOTER BOTTOM SECTION CONTENT
            =============================
        </section>

    </div>
</footer>

3-Column Footer Source code

<footer id="t-main-footer" class="t-main-footer t-main-footer-4-columns t-bg-darker t-color-light">
    <div id="t-main-footer-container">

        /* footer top section */
        <section class="t-main-footer-top" >
            ==========================
            FOOTER TOP SECTION CONTENT
            ==========================
        </section>

        /* footer middle section */
        <section class="t-main-footer-middle">

            /* middle left section */
            <section class="t-main-footer-left">
                ==================================
                FOOTER MIDDLE LEFT SECTION CONTENT
                ==================================
            </section>

            /* middle center section */
            <section class="t-main-footer-center">
                ====================================
                FOOTER MIDDLE CENTER SECTION CONTENT
                ====================================
            </section>

            /* middle right section */
            <section class="t-main-footer-right">
                ===================================
                FOOTER MIDDLE RIGHT SECTION CONTENT
                ===================================
            </section>
        </section>

        /* footer bottom section */
        <section class="t-main-footer-bottom">
            =============================
            FOOTER BOTTOM SECTION CONTENT
            =============================
        </section>

    </div>
</footer>

4-Column Footer Source code

<footer id="t-main-footer" class="t-main-footer t-main-footer-4-columns t-bg-darker t-color-light">
    <div id="t-main-footer-container">

        /* footer top section */
        <section class="t-main-footer-top" >
            ==========================
            FOOTER TOP SECTION CONTENT
            ==========================
        </section>

        /* footer middle section */
        <section class="t-main-footer-middle">

            /* middle left section */
            <section class="t-main-footer-left">
                ==================================
                FOOTER MIDDLE LEFT SECTION CONTENT
                ==================================
            </section>

            /* middle first center section */
            <section class="t-main-footer-center1">
                ======================================
                FOOTER MIDDLE CENTER 1 SECTION CONTENT
                ======================================
            </section>

            /* middle second center section */
            <section class="t-main-footer-center2">
                ======================================
                FOOTER MIDDLE CENTER 2 SECTION CONTENT
                ======================================
            </section>

            /* middle right section */
            <section class="t-main-footer-right">
                ===================================
                FOOTER MIDDLE RIGHT SECTION CONTENT
                ===================================
            </section>
        </section>

        /* footer bottom section */
        <section class="t-main-footer-bottom">
            =============================
            FOOTER BOTTOM SECTION CONTENT
            =============================
        </section>

    </div>
</footer>

Tuicast features three footer variations depending upon your needs, which are: 2-column, 3-column, 4-column types. All the necessary CSS styling is located in css/footer.css. In addition, you'll find the templates for each type of footer in html/directory.

A footer is declared with <footer id="t-main-footer" class="t-main-footer-(number)-columns">...</footer>, where the necessary class is one of these:

.t-main-footer-2-columns for a 2-column footer,
.t-main-footer-3-columns for a 3-column footer,
.t-main-footer-4-columns for a 4-column footer.

Inside the <footer>...</footer>there's a container with #t-main-footer-container ID. All the content goes within this block.

Every type of footer consists of three horizontal sections:

.t-main-footer-top is a top section,
.t-main-footer-middle is a middle section,
.t-main-footer-bottom is a bottom one.

Both .t-main-footer-top and .t-main-footer-bottom are displayed as display:block;. If you need to change them to flex, you need to uncomment the necessary rules in css/footer.css. The middle .t-main-footer-middle section is, otherwise, a flex container for the footer columns. The number of these columns vary in accordance with the chosen.t-main-footer-(number)-columns style.

Footer Middle Section Columns Classes

2-column footer uses .t-main-footer-2-columns class for the footer and .t-main-footer-left and .t-main-footer-right classes for the columns inside the middle .t-main-footer-middle section.

3-column footer uses .t-main-footer-3-columns class for the footer and .t-main-footer-left, .t-main-footer-center and .t-main-footer-right classes for the columns inside the middle .t-main-footer-middle section.

4-column footer uses .t-main-footer-4-columns class for the footer and .t-main-footer-left, .t-main-footer-center1, .t-main-footer-center2 and .t-main-footer-right classes for the columns inside the middle .t-main-footer-middle section.

Sections

Basic section (t-section)

The basic section code:

<section class="t-section">
    <div class="t-inner-section">
        ======================
        CONTENT GOES HERE
        ======================
    </div>
</section>

Example of .t-section (darker color)
and .t-inner-section (lighter color)

The content goes inside .t-inner-section block.

.t-section goes fullwidth, except when .site-wrapper limits it.
.t-inner-section limits the content width to the --overall-content-width option value in css/options.css, so that we have a nice option to build blocks with a content inside them.

It is strongly encouraged to wrap every part of your content in .t-section and .t-inner-sections.

Layout Components

Flex Layout

T-code features two flex layouts: 50%/50% and 33.333%/66.666%. If you need more complex layouts, it is recommended to use Grid layouts (below) instead or design your own one.

Flex Layout: 50%

Demo

Text Header

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis distinctio excepturi exercitationem, facilis iure quibusdam quos tempore! Expedita, nemo, sit! Aperiam nam provident ratione recusandae soluta ut vel voluptatem? Similique.

Corporis

Background

Border

Source code


<section class="t-section">
    <div class="t-inner-section">

        <div class="t-flex-box">

            <div class="t-flex-part t-flex-part-50">
                ======================
                CONTENT GOES HERE
                ======================
            </div>

            <div class="t-flex-part t-flex-part-50">
                ======================
                CONTENT GOES HERE
                ======================
            </div>

        </div>

    </div>
</section>

Flex layout is wrapped in .t-flex-box class. Each flex part is wrapped in t-flex-part class. .t-flex-box-50 class indicates that it's 50/50 layout. Adding .has-background or .has-border class adds paddings so that it's possible to add a background or border to a flex element. Please note that both .has-background and .has-border modify the .t-flex-part class.

Flex Layout 66%/33%, 33%/66%

Demo

Text Header

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis distinctio excepturi exercitationem, facilis iure quibusdam quos tempore!

Text Header

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis distinctio excepturi exercitationem, facilis iure quibusdam quos tempore!

Text Header

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis distinctio excepturi exercitationem, facilis iure quibusdam quos tempore!

Text Header

Source code

<section class="t-section">
    <div class="t-inner-section">

        <div class="t-flex-box">

            <div class="t-flex-part t-flex-part-66">
                ======================
                CONTENT GOES HERE - 1
                ======================
            </div>

            <div class="t-flex-part t-flex-part-33">
                ======================
                CONTENT GOES HERE - 2
                ======================
            </div>

            <div class="t-flex-part t-flex-part-66">
                ======================
                CONTENT GOES HERE - 3
                ======================
            </div>

            <div class="t-flex-part t-flex-part-33">
                ======================
                CONTENT GOES HERE - 4
                ======================
            </div>

        </div>

    </div>
</section>

Basically the same. Flex layout is wrapped in .t-flex-box class. Each flex part is wrapped in t-flex-part class. .t-flex-box-66 and .t-flex-box-33 classes indicate that it's 66/33 layout. Adding .has-background or .has-border class adds paddings so that it's possible to add background or border to a flex element. Please note that both .has-background and .has-border modify the .t-flex-part class.

An important note: please make sure you're using .t-flex-box-66 and .t-flex-box-33 flex element in a single row together. The order may vary, but a row must contain a single .t-flex-box-33 element and a single .t-flex-box-66 element. You should avoid using the two same elements in a single row.

Grids

There are several pre-defined grids — from 100% (1fr) to 25% (1fr 1fr 1fr 1fr)

Demo

100%

50%

33.333%

25%

33.333%

66.666%

33.333%

25% (no gap)

25%

50%

25%

50%

25%

50%

25%

75%

25%

75%

Source code

<section class="t-grid-box t-grid-box-100 has-gap">
    <div class="t-grid-part">Grid 100%</div>
</section>

<section class="t-grid-box t-grid-box-50 has-gap t-v-margin-small">
    <div class="t-grid-part">Grid 50%</div>
    <div class="t-grid-part">Grid 50%</div>
</section>

<section class="t-grid-box t-grid-box-33 has-gap t-v-margin-small">
    <div class="t-grid-part">Grid 33.333%</div>
    <div class="t-grid-part">Grid 33.333%</div>
    <div class="t-grid-part">Grid 33.333%</div>
</section>

<section class="t-grid-box t-grid-box-25 has-gap t-v-margin-small">
    <div class="t-grid-part">Grid 25%</div>
    <div class="t-grid-part">Grid 25%</div>
    <div class="t-grid-part">Grid 25%</div>
    <div class="t-grid-part">Grid 25%</div>
</section>

<section class="t-grid-box t-grid-box-33-66 has-gap t-v-margin-small">
    <div class="t-grid-part">Grid 33.333%</div>
    <div class="t-grid-part">Grid 66.666%</div>
</section>

<section class="t-grid-box t-grid-box-66-33 has-gap t-v-margin-small">
    <div class="t-grid-part">Grid 66.666%</div>
    <div class="t-grid-part">Grid 33.333%</div>
</section>

<section class="t-grid-box t-grid-box-25 t-v-margin-small">
    <div class="t-grid-part">Grid 25% (no gap)</div>
    <div class="t-grid-part">Grid 25% (no gap)</div>
    <div class="t-grid-part">Grid 25% (no gap)</div>
    <div class="t-grid-part">Grid 25% (no gap)</div>
</section>

<section class="t-grid-box t-grid-box-25-25-50 has-gap t-v-margin-small">
    <div class="t-grid-part">Grid 25%</div>
    <div class="t-grid-part">Grid 25%</div>
    <div class="t-grid-part">Grid 50%</div>
</section>

<section class="t-grid-box t-grid-box-25-50-25 has-gap t-v-margin-small">
    <div class="t-grid-part">Grid 25%</div>
    <div class="t-grid-part">Grid 50%</div>
    <div class="t-grid-part">Grid 25%</div>
</section>

<section class="t-grid-box t-grid-box-50-25-25 has-gap t-v-margin-small">
    <div class="t-grid-part">Grid 50%</div>
    <div class="t-grid-part">Grid 25%</div>
    <div class="t-grid-part">Grid 25%</div>
</section>

<section class="t-grid-box t-grid-box-75-25 has-gap t-v-margin-small">
    <div class="t-grid-part">Grid 75%</div>
    <div class="t-grid-part">Grid 25%</div>
</section>

<section class="t-grid-box t-grid-box-25-75 has-gap t-v-margin-small">
    <div class="t-grid-part">Grid 25%</div>
    <div class="t-grid-part">Grid 75%</div>
</section>

Grid Classes

Each grid should have a .t-grid-box class. The second class determines the type of a grid used. The predefined classes are those:

.t-grid-box-100 — a 100% grid template (grid-template-columns: 1fr;)
.t-grid-box-50 — a 50% grid template (grid-template-columns: 1fr 1fr;)
.t-grid-box-33 — a 33% grid template (grid-template-columns: 1fr 1fr 1fr;)
.t-grid-box-25 — a 25% grid template (grid-template-columns: 1fr 1fr 1fr 1fr;)
.t-grid-box-33-66 — a 33% + 66% grid template (grid-template-columns: 1fr 2fr;)
.t-grid-box-66-33 — a 66% + 33% grid template (grid-template-columns: 2fr 1fr;)
.t-grid-box-25-25-50 — a 25% + 25% + 50% grid template (grid-template-columns: 1fr 1fr 2fr;)
.t-grid-box-25-50-25 — a 25% + 50% + 25% grid template (grid-template-columns: 1fr 2fr 1fr;)
.t-grid-box-50-25-25 — a 50% + 25% + 25% grid template (grid-template-columns: 2fr 1fr 1fr;)
.t-grid-box-75-25 — a 75% + 25% grid template (grid-template-columns: 3fr 1fr;)
.t-grid-box-25-75 — a 25% + 75% grid template (grid-template-columns: 1fr 3fr;)

By default, grids come with no gap. To add the gap, add .has-gap class to the grid. The gap value can be changed in --gap option from css/options.cssstylesheet. Please note that a grid with no gap doesn't comply with --overall-border-radius option from css/options.css.

Each grid part should have a .t-grid-part class.

Ready-to-use Blocks

The true power of Tuicast reveals when it comes down to pre-defined website elements you can use straight from the box.

Spoiler

A smooth multiple-choice accordion.

Demo

Spoiler Header 1

Spoiler Paragraph 1

Got any questions?

A good option for FAQ's and tutorials.

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad ducimus eos exercitationem impedit numquam odit perspiciatis porro quas quis soluta. Amet consectetur distinctio, eligendi eos explicabo non porro quae qui?Accusantium alias beatae consequatur consequuntur debitis dolor doloremque facere, fuga illum, incidunt laboriosam, nemo neque soluta vel vero! At dicta dolore iusto molestias optio ratione repellendus repudiandae rerum sequi soluta?

Source code

                            
<section class="t-spoiler">

    <div class="t-spoiler-block">
        <input type="checkbox" id="spoiler-1" class="spoiler-hidden-checkbox">
        <h4><label class="t-spoiler-label" for="spoiler-1">Spoiler Header 1</label></h4>
        <div class="t-spoiler-text">
            <p>Spoiler Paragraph 1</p>
        </div>
    </div>

    <div class="t-spoiler-block">
        <input type="checkbox" id="spoiler-2" class="spoiler-hidden-checkbox">
        <h4><label class="t-spoiler-label" for="spoiler-2">Got any questions?</label></h4>
        <div class="t-spoiler-text">
            <p>A good option for FAQ's and tutorials.</p>
        </div>
    </div>

    <div class="t-spoiler-block">
        <input type="checkbox" id="spoiler-3" class="spoiler-hidden-checkbox">
        <h4><label class="t-spoiler-label" for="spoiler-3">Lorem Ipsum</label></h4>
        <div class="t-spoiler-text">
            <p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                        Ad ducimus eos exercitationem impedit numquam odit perspiciatis porro quas quis soluta.
                        Amet consectetur distinctio, eligendi eos explicabo non porro quae qui?</span><span>
                        Accusantium alias beatae consequatur consequuntur debitis dolor doloremque facere, fuga illum,
                        incidunt laboriosam, nemo neque soluta vel vero! At dicta dolore iusto molestias optio ratione
                        repellendus repudiandae rerum sequi soluta?</span>
            </p>
        </div>
    </div>

</section>

A spoiler is wrapped in .t-spoiler class. Every expandable spoiler block has a .t-spoiler-block class. Inside, we first put a hidden checkbox with a .spoiler-hidden-checkbox class and a unique ID. Then goes the header: be sure to use <h4></h4> tag. Inside the header, put a label to the prior checkbox. An expandable part below the header should be wrapped in .t-spoiler-text block.

Horizontal tabs

Demo

You're looking at it right now!

Source code

                            
<section class="t-tabs">

    /* First tab and its content */
    <input type="radio" class="tabs-hidden-radio" name="tab-bar-1" id="tab-bar-1-tab-1" checked="checked">
    <label for="tab-bar-1-tab-1" class="t-tab-bar-label">First Tab</label>
    <div class="t-tab-content">
        ======================
        CONTENT GOES HERE - 1
        ======================
    </div>

    /* Second tab and its content */
    <input type="radio" class="tabs-hidden-radio" name="tab-bar-1" id="tab-bar-1-tab-2">
    <label for="tab-bar-1-tab-2" class="t-tab-bar-label">Second tab</label>
    <div class="t-tab-content">
        ======================
        CONTENT GOES HERE - 2
        ======================
    </div>

</section>

The tabs are wrapped in .t-tabs block. Each tab has a hidden radio button with .tabs-hidden-radio class followed by its <label></label> with .t-tab-bar-label class.

Please note, each particular tab group must share the same name attribute for its radio buttons. Also, all radio buttons must have unique IDs, to which their respective <label></label>'s are assigned to.

If you need a header inside a tab content block, using <h4></h4> compensates for a top margin: .t-tabs .t-tab-content h4:first-child {margin-top: 0;}

Vertical Tabs

Demo Source code

Demo

You're looking at it right now!

Source code


<section class="t-v-tabs">

    /* Labels (left column) */
    <section class="t-v-tabs-wrapper">
        <label for="t-v-tab1">Cabernet</label>
        <label for="t-v-tab2">Merlot</label>
    </section>

    /* Content (right column) */
    <section class="t-v-tabs-content-wrapper">
        <section class="t-v-tabs-content">
            
            <input name="tab" id="t-v-tab1" type="radio" checked/>
            <section class="t-v-tab-content">
                <h2>Cabernet</h2>
                <p>
                    ======================
                     CONTENT 1 GOES HERE
                    ======================
                </p>
            </section>
        
            <input name="tab" id="t-v-tab2" type="radio"/>
            <section class="t-v-tab-content">
                <h2>Merlot</h2>
                <p>                 
                    ======================
                     CONTENT 2 GOES HERE
                    ======================
                </p>
            </section>
            
        </section> /.t-v-tabs-content
    </section> /.t-v-tabs-content-wrapper

</section> /.t-v-tabs

The vertical tabs are wrapped in .t-v-tabs class block. Next, we have two flex-positioned sections: <section class="t-v-tabs-wrapper">...</section> and <section class="t-v-tabs-content-wrapper"></section>

<section class="t-v-tabs-wrapper">...</section> by the left side contains labels for hidden radio buttons in the right-side section. These are our tab labels.

<section class="t-v-tabs-content-wrapper">...</section> by the right side wraps up <section class="t-v-tabs-content">...</section> block, which contains a respective number of .t-v-tabs-content sections. Each of those contains hidden radio buttons with unique IDs which must correspond to their labels from the left section. Also don't forget that each particular vertical tabs group must share the same name attribute. Each tab content block beneath its radio button should have the .t-v-tab-content class.

Text with Icon

A multifunctional block used for system messages, warnings or as a part of a website layout.

Demo

Info message

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, adipisci at beatae eius in maxime modi natus neque non, nostrum numquam perferendis, quo quod ratione rerum similique temporibus! Asperiores, dolore.

Success message

Failure message

Warning message

Source code

/* Regular Block */
<section class="t-text-with-icon-block">
    <div class="t-text-with-icon-icon">
        <img src="img/icons8-info.png" alt="">
    </div>
    <div class="t-text-with-icon-text">
        <h4>Info message</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, adipisci at beatae eius in maxime modi natus neque non, nostrum numquam perferendis, quo quod ratione rerum similique temporibus! Asperiores, dolore.</p>
    </div>
</section>

/* Success Block */
<section class="t-text-with-icon-block t-success">
    <div class="t-text-with-icon-icon">
        <img src="img/icons8-success.png" alt="">
    </div>
    <div class="t-text-with-icon-text">
        <h4>Success message</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, adipisci at beatae eius in maxime modi natus neque non, nostrum numquam perferendis, quo quod ratione rerum similique temporibus! Asperiores, dolore.</p>
    </div>
</section>

/* Failure Block */
<section class="t-text-with-icon-block t-failure">
    <div class="t-text-with-icon-icon">
        <img src="img/icons8-failure.png" alt="">
    </div>
    <div class="t-text-with-icon-text">
        <h4>Failure message</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, adipisci at beatae eius in maxime modi natus neque non, nostrum numquam perferendis, quo quod ratione rerum similique temporibus! Asperiores, dolore.</p>
    </div>
</section>

/* Warning Block */
<section class="t-text-with-icon-block t-warning">
    <div class="t-text-with-icon-icon">
        <img src="img/icons8-warning.png" alt="">
    </div>
    <div class="t-text-with-icon-text">
        <h4>Warning message</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, adipisci at beatae eius in maxime modi natus neque non, nostrum numquam perferendis, quo quod ratione rerum similique temporibus! Asperiores, dolore.</p>
    </div>
</section>

This thing is simple: the block should have a .t-text-with-icon-block class. Adding the .t-success, .t-failure or .t-warning class changes the block's background respectively and text color to white. You can read about those classes below.

The icon goes first and is wrapped in .t-text-with-icon-icon block. Then goes the text, being wrapped in .t-text-with-icon-text class block. Please use <h4>...</h4> tag for the header to get the color change correct.

List with icons

Demo

Image Icon
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto autem consequuntur debitis enim, exercitationem fuga, harum in iusto laboriosam maxime porro provident quae quam rem suscipit, unde vero. Necessitatibus, quis?
✓Unicode Icon

Source code

<ul class="t-list-with-icons">
    <li><img class="img-list-icon" src="img/icons8-success.png" alt=""> Image Icon</li>
    <li><img class="svg-list-icon" src="img/calendar-svgrepo-com.svg" alt=""> <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto autem consequuntur debitis enim, exercitationem fuga, harum in iusto laboriosam maxime porro provident quae quam rem suscipit, unde vero. Necessitatibus, quis? </span>
    </li>
    <li><span class="unicode-list-icon">✓</span>Unicode Icon</li>
</ul>

Simply add a .t-list-with-icons class to your <ul></ul> list and a corresponding class to your icon according to its type:

.img-list-icon class to an image type icon,
.svg-list-icon class to an SVG type icon,
.unicode-list-icon to the <span></span>tag containing your Unicode character.

Of course, if you're using an icon font, use the necessary classes from its specification rather than this.

Breadcrumbs

Demo

Breadcrumbs

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium culpa dignissimos distinctio dolore minima molestias mollitia odio sapiente sed...

Source code

/* Slash Breadcrumbs */
<section class="t-breadcrumbs t-breadcrumbs-slash">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Category</a></li>
        <li><span>Slash Breadcrumbs</span></li>
    </ul>
</section>

/* Arrow Breadcrumbs */
<section class="t-breadcrumbs t-breadcrumbs-arrow">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Category</a></li>
        <li><span>Arrow Breadcrumbs</span></li>
    </ul>
</section>

/* Triangular Breadcrumbs */
<section class="t-breadcrumbs t-breadcrumbs-triangle">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Category</a></li>
        <li><span>Triangle Breadcrumbs</span></li>
    </ul>
</section>

The breadcrumbs are wrapped in a section with two classes: the first is .t-breadcrumbs, the second determines the divider type:

.t-breadcrumbs-slash for a slash,
.t-breadcrumbs-arrow for an arrow,
.t-breadcrumbs-triangle for a triangle.

All you need next is to put your breadcrumbs links to a list of <ul><li>...</li></ul>. Yea, it's that simple.

User Avatars

Demo

Circle

Rounded

Square

Source code

/* Circle avatars */
<h4>Circle</h4>
<section class="t-user-avatar t-user-avatar-circle t-user-avatar-small" style="background-image:url('img/user.jpg') "></section>
<section class="t-user-avatar t-user-avatar-circle t-user-avatar-medium" style="background-image:url('img/user.jpg') "></section>
<section class="t-user-avatar t-user-avatar-circle t-user-avatar-large" style="background-image:url('img/user.jpg') "></section>

/* Rounded avatars */
<h4>Rounded</h4>
<section class="t-user-avatar t-user-avatar-rounded t-user-avatar-small" style="background-image:url('img/user.jpg') "></section>
<section class="t-user-avatar t-user-avatar-rounded t-user-avatar-medium" style="background-image:url('img/user.jpg') "></section>
<section class="t-user-avatar t-user-avatar-rounded t-user-avatar-large" style="background-image:url('img/user.jpg') "></section>

/* Square avatars (just image, no background) */
<h4>Square</h4>
<section class="t-user-avatar t-user-avatar-square t-user-avatar-small">
    <img src = "/image.jpg" alt = "user avatar">
</section>
<section class="t-user-avatar t-user-avatar-square t-user-avatar-medium">
    <img src = "/image.jpg" alt = "user avatar">
</section>
<section class="t-user-avatar t-user-avatar-square t-user-avatar-large">
    <img src = "/image.jpg" alt = "user avatar">
</section>

For an avatar section, we need to add three classes. The first is t-user-avatar. The second class defines the preferred avatar shape, which could be:

.t-user-avatar-circle defines a circle shape,
.t-user-avatar-rounded defines a rounded-rectangle shape. The border-radius is what's set throughout the site, from the --overall-border-radius option in css/options.css
.t-user-avatar-squared defines a square shape.

The third class defines the size of an avatar. There are three predefined sizes: small, medium, large, so there are three classes also.

.t-user-avatar-small defines a small size, 48×48 px by default,
.t-user-avatar-medium defines a medium size, 72×72 px by default,
.t-user-avatar-large defines a large size, 96×96 px by default.

You can either place an image inside the section, or use it as a background of the section. Both ways are acceptable.

Forms, Inputs, Form Elements

Demo

Your name (type=text) E-mail (type=e-mail) Password (type=password) Phone number (type=phone) Date (type=date) Datetime local (type=datetime-local) Random number (type=number) Check your mind Radio Select a car Select several cars Search query (type=search) Set a color...

Fieldset (fieldset tag) First name:
Last name:

Textarea Select a file Enter your time (type=time) Current week (type=week) Current month (type=month) Enter your URL (type=url) Click me Range Image

Source code

Just use regular inputs and form elements.

The form inputs comply with --overall-border-radius option set in css/options.css. Labels are to be placed before their respective inputs.

Using a switch component is simple.

<label class="t-switch">
<input type="checkbox">
<span class="t-switch-slider"></span>
</label>

Text formatting and highlighting

Demo

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto cumque deleniti dolorem eveniet id nemo nostrum odit quaerat quos voluptatem! Debitis et excepturi facilis laboriosam nihil. Id nihil reiciendis unde.Corporis, cumque fuga, fugiat hic ipsam molestiae officiis quibusdam quo, ratione sequi tempore temporibus voluptas voluptatum. Aliquam deserunt distinctio exercitationem explicabo illo mollitia quam suscipit? Explicabo magni necessitatibus quas voluptatibus?Accusamus alias aliquam amet culpa debitis eum, exercitationem expedita fuga id inventore ipsum iusto maxime molestiae molestias nobis non nulla quia rem repellat repellendus sequi tempore unde veritatis vero vitae.Alias aut eum nemo nobis officia possimus quia quisquam. A animi commodi consectetur dolore ducimus eligendi enim eveniet incidunt modi sit! Aspernatur id itaque minima odit omnis quos rem saepe.Accusantium architecto blanditiis consectetur dignissimos dolorum ducimus est, exercitationem expedita facere hic id incidunt iste maiores mollitia nisi obcaecati officia officiis quisquam, quo ratione reprehenderit sapiente sunt temporibus? Commodi, quod?Accusantium amet aspernatur at commodi consequuntur dignissimos eligendi enim esse est, nemo praesentium quasi rerum sequi similique sunt tempore vel velit, voluptatem! Ad assumenda eveniet maiores nemo omnis optio provident!

Source code


<span class="t-text-underline-fine">fine underline</span>
<span class="t-text-underline-heavy">heavy underline</span>
<span class="t-text-underline-regular">regular underline</span>
<span class="t-text-underline-dotted">dotted underline</span>
<span class="t-text-underline-dashed">dashed underline</span>
<span class="t-text-highlight-light">highlight with a light color</span>
<span class="t-text-highlight-dark">highlight with a dark color</span>
<span class="t-text-hint">A hint: changes a cursor into a question mark</span>
<span class="t-text-bordered">Bordered text</span>

It's pretty much self-explanatory: just add a desired class to your <span></span> tag to get a highlight effect.

The list of classes by this time is as follows:

.t-text-underline-fine dolor sit amet
.t-text-underline-heavy cumque deleniti
.t-text-underline-regular laboriosam
.t-text-underline-dotted cumque fuga
.t-text-underline-dashed quam suscipit?
.t-text-highlight-light exercitationem
.t-text-highlight-darkmolestias
.t-text-hint Aspernatur
.t-text-bordered Accusantium

Pre-titles

Demo

New gaming experience

Text Header

Our new project

Text Header

Sale!

Text Header

Source code

/* Circle-bulleted */
<section class="pre-title">
    <div class="pre-title-bullet-circle"></div>
    <div class="pre-title-content">New gaming experience</div>
</section>
<h2>Text Header</h2>

/* Square-bulleted */
<section class="pre-title">
    <div class="pre-title-bullet-square"></div>
    <div class="pre-title-content">Our new project</div>
</section>
<h3>Text Header</h3>

/* Background */
<section class="pre-title">
    <div class="pre-title-simple-bg"></div>
    <div class="pre-title-content t-bg-darker">Sale!</div>
</section>
<h4>Text Header</h4>

First we need to wrap the pre-title content in a .pre-title block. Inside this block, we place two blocks: a bullet block and a content block. There are three predefined types of bullets:

.pre-title-bullet-circle renders a circle bullet. You can style its background: property next.
.pre-title-bullet-squarerenders a square bullet. Also stylable.
.pre-title-simple-bgisn't technically a bullet, but it gives an option to set a background to the pre-title.

The content block has a .pre-title-content class.

Blockquotes & Text Emphasis Blocks

Blockquotes

Demo

The greatest glory in living lies not in never falling, but in rising every time we fall.

Nelson Mandela

Source code

<section class="t-blockquote">
    <blockquote>The greatest glory in living lies not in never falling, but in rising every time we fall.</blockquote>
    <cite>Nelson Mandela</cite>
</section>

To use a simple blockquote, just wrap your <blockquote>...</blockquote> and <cite>...</cite> content in a .t-blockquotecontainer. Please don't forget blockquotes are designated for citing, not for emphasizing. To emphasize a text part inside a long text flow it's encouraged to use Text Emphasis Blocks.

Text Emphasis Blocks

Demo

Molestias pariatur porro reiciendis rem ullam vitae. — Text Emphasis 1

Laborum maxime nostrum quas quod reiciendis. — Text Emphasis 2

Dolor eaque error eum modi mollitia. — Text Emphasis 3

Amet commodi dignissimos dolor ea eos. — Text Emphasis 4

Source code

<section class="t-emp t-emp-1">
    Molestias pariatur porro reiciendis rem ullam vitae. — Text Emphasis 1
</section>

<section class="t-emp t-emp-2">
    Laborum maxime nostrum quas quod reiciendis. — Text Emphasis 2
</section>

<section class="t-emp t-emp-3">
    Dolor eaque error eum modi mollitia. — Text Emphasis 3
</section>

<section class="t-emp t-emp-4">
    Amet commodi dignissimos dolor ea eos. — Text Emphasis 4
</section>

Using Emphasis Blocks is easy - just add .t-emp and .t-emp-[1-4] classes to the parent container. The great news is you can, and are endorsed to easily use each of those four for displaying system messages, simply by adding .t-success, .t-failure or .t-warning classes to the two above. The pre-defined Emphasis Blocks have special extra styling for that usage.

Tooltips

Demo

Source code

<div class="t-tooltip t-tooltip-right">Accusamus atque aut culpa cumque doloremque, enim eum exercitationem hic impedit nihil obcaecati pariatur perferendis quo reprehenderit sunt ullam.
</div>

<div class="t-tooltip t-tooltip-bottom">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>

<div class="t-tooltip t-tooltip-left">A aliquam delectus deserunt eaque eligendi eos esse est et, harum inventore iste itaque iure odio quidem repellat rerum totam ullam voluptate?
</div>

<div class="t-tooltip t-tooltip-top">Aperiam, natus quia? Accusantium, aperiam cupiditate dolores, eos esse, expedita fugiat labore laboriosam nemo odio quaerat quisquam soluta veniam. Ab assumenda, velit.
</div>

Add both .t-tooltip and .t-tooltip-[right|left|top|bottom] classes to your container to turn in into a tooltip box.

Headers with Icons

Demo

Row Header & Icon

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae consequuntur deleniti dolore dolorem, minus nesciunt nihil nostrum praesentium quia repellendus reprehenderit sunt? Aliquid asperiores culpa delectus ipsum odio, sapiente veniam!

Row Header & Icon

Source code

/* Horizontal */
<section class="t-header-with-icon-h t-bottom-margin-small">
    <div class="t-header-icon t-header-icon-h1">
        <img src="img/calendar-svgrepo-com.svg">
    </div>
    <div class="t-header-icon-text">
    <h1 style="color:#3498db;">
        Row Header & Icon
    </h1>
    </div>
</section>

/* Horizontal, reversed */
<section class="t-header-with-icon-h-r t-bottom-margin-small">
    <div class="t-header-icon t-header-icon-h1">
        <img src="img/calendar-svgrepo-com.svg">
    </div>
    <div class="t-header-icon-text">
        <h1 style="color:#3498db;">
            Row Header & Icon
        </h1>
    </div>
</section>

/* Vertical */
<section class="t-header-with-icon-v t-bottom-margin-small">
    <div class="t-header-icon t-header-icon-h1">
        <img src="img/calendar-svgrepo-com.svg">
    </div>
    <div class="t-header-icon-text">
        <h1 style="color:#3498db;">
            Row Header & Icon
        </h1>
    </div>
</section>

/* vertical, reversed */
<section class="t-header-with-icon-v-r t-bottom-margin-small">
    <div class="t-header-icon t-header-icon-h1">
        <img src="img/calendar-svgrepo-com.svg">
    </div>
    <div class="t-header-icon-text">
        <h1 style="color:#3498db;">
            Row Header & Icon
        </h1>
    </div>
</section>

The header is wrapped in a block having one of the following classes according to its type:

.t-header-with-icon-h for a horizontal layout,
.t-header-with-icon-h-r for a horizontal reversed layout,
.t-header-with-icon-v for a vertical layout,
.t-header-with-icon-v-rfor a vertical reversed layout.

Inside, we put two div's, first is for an icon, second for a text. Don't reverse the order, the icon comes first. For an icon, we add .t-header-icon class. We also can add one of six .t-header-icon-h# classes to fit the icon size to the header text. For the header text, we give a .t-header-icon-text class to the parent div element. The header inside should be within <h1></h1> — <h6></h6>tags.

By default, these headers are centered by justify-content: center; rule. To get a header aligned left or right, add .t-header-align-left or .t-header-align-right class to the wrapping block.

Pre-designed Components Examples

Post Blocks

Linear Post Block # 1 — Simple

Demo

Linear Block with picture #1

by John Doe | September, 11

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio dolorum ducimus eius, excepturi fugit maiores modi natus necessitatibus nobis nostrum obcaecati pariatur quibusdam recusandae reiciendis rerum saepe sed, veritatis voluptates!

Source code

<article class="t-line-entry t-line-entry-simple">
    <div class="t-line-entry-thumbnail">
        <img src="../img/picture-1.jpg" alt="">
    </div>
    <div class="t-line-entry-content">
        <h4 class="t-line-entry-header">
            Linear Block with picture #1
        </h4>
        <p class="t-line-entry-subtitle">
            by John Doe | September, 11
        </p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio dolorum ducimus
            eius, excepturi fugit maiores modi natus necessitatibus nobis nostrum obcaecati pariatur
            quibusdam recusandae reiciendis rerum saepe sed, veritatis voluptates!
        </p>
    </div>
</article>

So, for a first linear post component it goes like that. First, for a linear post block, we add .t-line-entryclass to a wrapping element (usually it's an <article> tag). To specify the type, we should add .t-line-entry-simple class.

Next, we place a thumbnail into a .t-line-entry-thumbnail container, content into .t-line-entry-content, header gets its .t-line-entry-headerclass.

Linear Post Block # 2 — Shifted

Demo

Linear Block with picture #2

by John Doe | September, 11

Source code

<article class="t-line-entry t-line-entry-shifted">
    <div class="t-line-entry-thumbnail">
        <img src="img/picture-1.jpg" alt="">
    </div>
    <div class="t-line-entry-content">
        <h4 class="t-line-entry-header">
            Linear Block with picture #2
        </h4>
        <p class="t-line-entry-subtitle">
            by John Doe | September, 11
        </p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio dolorum ducimus
            eius, excepturi fugit maiores modi natus necessitatibus nobis nostrum obcaecati pariatur
            quibusdam recusandae reiciendis rerum saepe sed, veritatis voluptates!
        </p>
    </div>
</article>

Same as #1 except that now we add .t-line-entry-shifted as a second class to our article.

Linear Post Block #3 — Transparent (No Background)

Demo

Linear Block with picture #3

by John Doe | September, 11

Source code

<article class="t-line-entry t-line-entry-no-bg">
    <div class="t-line-entry-thumbnail">
        <picture><img src="../img/picture-1.jpg" alt=""></picture>
    </div>
    <div class="t-line-entry-content">
        <h4 class="t-line-entry-header">
            Linear Block with picture #3
        </h4>
        <p class="t-line-entry-subtitle">
            by John Doe | September, 11
        </p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio dolorum ducimus
            eius, excepturi fugit maiores modi natus necessitatibus nobis nostrum obcaecati pariatur
            quibusdam recusandae reiciendis rerum saepe sed, veritatis voluptates!
        </p>
    </div>
</article>

Same as both above but how we're using .t-line-entry-no-bg class for an article.

It's possible to use .t-line-entry-subtitle for meta and secondary information.

Card Post Blocks

This type of articles is able to serve both as blog/news posts or shop item cards.

Demo

Sneakers

Shop Item Header #1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ducimus, est expedita itaque molestias nam provident quia recusandae sit ullam ut veniam vero vitae. At iste mollitia rem ullam voluptatem!

Made in:China

Size:45

Color:sarcoline

$51.45

Source code

<article class="t-card-entry t-w-320">
    <div class="t-card-entry-thumbnail">
        <img src="img/hero.webp" alt="">
    </div>
    <div class="t-card-entry-content">
        <div class="t-card-entry-subtitle">Sneakers</div>
        <h4 class="t-card-entry-header">Shop Item Header #1</h4>
        <div class="t-card-entry-excerpt t-top-margin-small">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ducimus, est expedita itaque molestias nam provident quia recusandae sit ullam ut veniam vero vitae. At iste mollitia rem ullam voluptatem!</p>
        </div>
        /* parameters */
        <div class="t-card-entry-parameters">
            <div class="t-card-entry-parameter"><span class="t-card-entry-parameter-name">Made in:</span><span class="t-card-entry-parameter-value">China</span></div>
            <div class="t-card-entry-parameter"><span class="t-card-entry-parameter-name">Size:</span><span class="t-card-entry-parameter-value">45</span></div>
            <div class="t-card-entry-parameter"><span class="t-card-entry-parameter-name">Color:</span><span class="t-card-entry-parameter-value">sarcoline</span></div>
        </div>

        <div class="t-flex-box">
            <div class="t-flex-part t-flex-part-50">
                <div class="t-card-entry-price">$51.45</div>
            </div>
            <div class="t-flex-part t-flex-part-50">
                <div class="t-card-entry-add-to-cart"><button class="t-success">Add to cart</button></div>
            </div>
        </div>

    </div>
</article>

.t-card-entry is the main article class. First, we can use width limiters for the card entry, which are those:

.t-w-320 sets the block's maximum width to 320px.
.t-w-500 sets the block's maximum width to 500px.
.t-w-25 sets the block's width to 25%.
.t-w-33 sets the block's width to 33.333%.
.t-w-50 sets the block's width to 50%.

Another, more versatile option, is to place a card post component into a grid cell inside a grid box or into a flex box. You probably might not want to limit its width then so don't add the width limiter. It'll be set to width: 100%;.

Thumbnails are wrapped in .t-card-entry-thumbnail wrapper. Another wrappers are self-explanatory for their respective content. A parameter section is available and can be conveniently used in a shop item card to list the item's features.

<div class="t-card-entry-parameters">
<div class="t-card-entry-parameter"><span class="t-card-entry-parameter-name">Made in:</span><span class="t-card-entry-parameter-value">China</span></div>
<div class="t-card-entry-parameter"><span class="t-card-entry-parameter-name">Size:</span><span class="t-card-entry-parameter-value">45</span></div>
<div class="t-card-entry-parameter"><span class="t-card-entry-parameter-name">Color:</span><span class="t-card-entry-parameter-value">sarcoline</span></div>
</div>

Use .t-card-entry-price to highlight a price, and .t-card-entry-add-to-cart for a special cart button. .t-card-entry-subtitle is at your disposal for meta & supplementary information.

Use <section class="t-card-entry t-card-entry-full-bg t-padding-small"> if you're planning to add a full-width background to a card post block.

Actually, you can even use the card post block for creating full-width announces, hero banners and CTA's, though there are more precise layouts for these purposes (listed below). Let's see a simple example.

Demo

Starting in September

Programming in Scratch

Advanced-level course for our students

Card-type full-width announce

Source code

<section class="t-card-entry t-card-entry-full-bg t-padding" style="background-image: url('../img/scratch-bg.webp')">
    <div class="t-card-entry-content">
        <div class="pre-title">
            <div class="pre-title-simple-bg"></div>
            <div class="pre-title-content t-bg-accent t-color-main">Starting in September</div>
        </div>
        <h3 class="t-color-light">Programming in Scratch</h3>
        <p class="t-color-light">Advanced-level course for our students</p>
        <p class="t-color-light">Card-type full-width announce</p>
        <button class="t-top-margin-medium">Learn more</button>
    </div>
</section>

Hero Banners, Fullwidth Blocks

Combining .t-banner wrapping section class with a Flex-box or Grid layout inside is a simple technique to create fullwidth banners.

Demo

Delicious Ice Cream

Hero Block Example #1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus accusantium adipisci doloremque, earum error est ex expedita facilis illo itaque minus, provident sequi voluptatibus! Maxime nihil nisi porro reprehenderit sunt.

Source code

<section class="t-banner t-padding" style="background-color: #111111; ">
    <div class="t-flex-box">
        <div class="t-flex-part t-flex-part-66">
            <h1 class="t-color-light">Delicious Ice Cream</h1>
            <h4 class="t-color-light"><span>Hero Block Example #1</span></h4>

            <p class="t-color-light">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus accusantium adipisci doloremque, earum error est ex expedita facilis illo itaque minus, provident sequi voluptatibus! Maxime nihil nisi porro reprehenderit sunt.
            </p>
            <button class="t-top-margin-small">Get it</button>
        </div>
        <div class="t-flex-part t-flex-part-33">
            <img class="t-banner-main-picture" src="img/icecream.png" alt="">
        </div>
    </div>
</section>

Demo

We're Hiring Professionals

Hero Block Example #2

Graphic Designer
PHP Developer
CMS Wordpress Developer

Source code

<section class="t-banner" style=" background-image: linear-gradient(to right bottom, #e3e3e3, #e5e5e5, #ececec, #f3f3f3);">
    <div class="t-flex-box" style="align-items: center; height: 100%">

        <div class="t-flex-part t-flex-part-50">
            <img src="img/man.png" alt="" class="t-banner-main-picture">
        </div>

        <div class="t-flex-part t-flex-part-50 t-padding">
            <p style="font-size: 34pt; line-height: 1.2em;">We're Hiring Professionals</p>
            <p><span><b>Hero Block Example #2</b></span></p>

            <p><ul style="list-style: none">
            <li>Graphic Designer</li>
            <li>PHP Developer</li>
            <li>CMS Wordpress Developer</li>
        </ul>
            </p>
            <button class="t-success">Learn more</button>
        </div>
    </div>
</section>

It is also possible to use TIBs (the image banners or trade image banners) to easily create a banner with a full-height image (or a video) aside.

Demo

Lora vase

Lorem ipsum dolor sit amet, consectetur adipisicing elit. At blanditiis corporis dicta, dignissimos dolor doloribus eaque expedita explicabo fugiat, in incidunt libero magni odit quo quos similique temporibus totam, ut.

★★★★★

Source code

<section class="t-tib">
    <div class="t-grid-box t-grid-box-33-66">
        <div class="t-grid-part t-tib-left t-no-padding">
            <img class="t-tib-main-image" src="img/vase-with-tulips-table.jpg" alt="">
        </div>
        <div class="t-grid-part t-bg-lighter t-tib-right">
            <div class="t-banner-subtitle">studio design</div>
            <h4>Lora vase</h4>
            <div class="t-banner-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At blanditiis corporis dicta, dignissimos dolor doloribus eaque expedita explicabo fugiat, in incidunt libero magni odit quo quos similique temporibus totam, ut.</div>
            <div class="t-rating">★★★★★</div>
            <button class="t-top-margin-medium">More info</button>
        </div>
    </div>
</section>

.t-tib section should contain a .t-grid-box .t-grid-box-33-66, .t-grid-box .t-grid-box-66-33 or .t-grid-box .t-grid-box-50 grid layout. Also don't forget to add .t-tib-left and .t-tib-right classes respectively, so that it provides correct work.

How to use it

See also

Table of contents

Site structure

Basic webpage template

CSS Stylesheets & Template Files

Basic CSS Stylesheets

Main Header

Main Container

Main Footer

Site Header

Site Footer

Footer Middle Section Columns Classes

Sections

Basic section (t-section)

Layout Components

Flex Layout

Flex Layout: 50%

Text Header

Corporis

Background

Border

Flex Layout 66%/33%, 33%/66%

Text Header

Text Header

Text Header

Text Header

Text Header

Text Header

Grids

Grid Classes

Ready-to-use Blocks

Spoiler

Spoiler Header 1

Got any questions?

Lorem Ipsum

Horizontal tabs

Vertical Tabs

Demo

Source code

Text with Icon

Info message

Success message

Failure message

Warning message

List with icons

Breadcrumbs

Breadcrumbs

Tags

User Avatars

Circle

Rounded

Square

Forms, Inputs, Form Elements

Text formatting and highlighting

Pre-titles

Text Header

Text Header

Text Header

Blockquotes & Text Emphasis Blocks

Blockquotes

Text Emphasis Blocks

Tooltips

Headers with Icons

Row Header & Icon

Row Header & Icon

Row Header & Icon

Row Header & Icon

Pre-designed Components Examples

Post Blocks

Linear Post Block # 1 — Simple

Linear Block with picture #1

Linear Post Block # 2 — Shifted

Linear Block with picture #2

Linear Post Block #3 — Transparent (No Background)

Linear Block with picture #3

Card Post Blocks

Shop Item Header #1

Programming in Scratch

Hero Banners, Fullwidth Blocks