Using HTML and CSS

For your Turbo pages, you can use one of the HTML processing modes:

  • Default mode — In this mode, the class and id attributes will be ignored and the original tag structure can be changed. See RSS feed example for this mode.

  • Mode using turbo:extendedHtml — In this mode, the class and id attributes are used and the original tag structure is preserved. See the examples below for this mode.

Note

Custom HTML and CSS don't work inside RSS feed blocks.

Supported tags

All listed tags support the class and id attributes when using the turbo:extendedHtml parameter.

Block

main, div, footer, aside, section, pre, h1-h6, hr, blockquote, table.

Inline

ins, del, small, big, u, abbr, span, a.

Formatting

b, strong, i, em, sub, sup, code.

Lists

ol, ul.

Attention

The span, aside, main, footer, and section tags will be moved to the Turbo page if the turbo:extendedHtml option is enabled.

HTML example

<header>
    <h1><span class="title">The Healthy Breakfast restaurant</span></h1>
</header>
<div class="subtitle">Healthy and delicious</div>
<div class="image-grid">
    <div class="cell">
        <img src="https://avatars.mds.yandex.net/get-turbo/1683990/rthbee79622d4d555cff702b7d5d1e52287/orig">
    </div>
    <div class="cell">
        <img src="https://avatars.mds.yandex.net/get-turbo/3611801/rthb52c0e885feecd3c3b4f65b93b387bd2/orig">
    </div>
    <div class="cell">
        <img src="https://avatars.mds.yandex.net/get-turbo/2916822/rthaff163472730718b6eae066a7904c301/orig">
    </div>
    <div class="cell">
        <img src="https://avatars.mds.yandex.net/get-turbo/2799516/rth0b82b0afdb2dc030e328bf1cb983cf05/orig">
    </div>
</div>
<div class="site">
    <a class="site-link" href="https://example.com/">Site</a>
</div>
<p>What's a good way to start your day? With a delicious and healthy breakfast!</p>
<p>Come by for breakfast. You can find photos of our dishes <a href="#">on our site</a>.</p>
<h2>Menu</h2>
<figure>
    <img src="https://avatars.mds.yandex.net/get-sbs-sd/369181/49e3683c-ef58-4067-91f9-786222aa0e65/orig">
    <figcaption>Omelette with herbs</figcaption>
</figure>
<p>Our menu always has fresh, delicious, and healthy dishes.</p>
<p>Find out for yourself.</p>
<button formaction="tel:+7(123)456-78-90" data-background-color="#5B97B0" data-color="white"
        data-primary="true">Reserve a table</button>
<p>Our address: <a href="#">Nullam dolor massa, porta a nulla in, ultricies vehicula arcu.</a></p>
<p>Photos — http://unsplash.com</p>

CSS example

.title {
    text-align: center;
}

.custom.subtitle {
    font-family: "Comic Sans MS", "Comic Sans", cursive;
    font-size: 25px;
    text-align: center;
    padding: 25px;
}

.image-grid {
    line-height: 0;
    padding-bottom: 20px;
}

.image-grid .cell {
    display: inline-block;
    width: 49%;
}

.user .img-wrapper {
    width: 100px;
    min-width: 100px;
}

.user .img-wrapper .turbo-image {
    border-radius: 50%;
}

.site {
    width: 75px;
    height: 75px;
    position: fixed;
    bottom: 15px;
    right: 15px;
    background-color: #eee;
    border-radius: 50%;
    box-shadow: 0 0 5px #aaa;
    z-index: 100;
}

.site .site-link {
    position: relative;
    top: 25px;
    display: block;
    text-align: center;
}

Example of the result

RSS feed example

<item turbo="true">
    <title>Page title</title>
    <turbo:extendedHtml>true</turbo:extendedHtml>
    <link>https://example.com/restoran</link>
    <turbo:content>
        <![CDATA[
        <header>
            <h1><span class="title">The Healthy Breakfast restaurant</span></h1>
        </header>
        <div class="subtitle">Healthy and delicious</div>
        <div class="image-grid">
            <div class="cell">
                <img src="https://avatars.mds.yandex.net/get-turbo/1683990/rthbee79622d4d555cff702b7d5d1e52287/orig">
            </div>
            <div class="cell">
                <img src="https://avatars.mds.yandex.net/get-turbo/3611801/rthb52c0e885feecd3c3b4f65b93b387bd2/orig">
            </div>
            <div class="cell">
                <img src="https://avatars.mds.yandex.net/get-turbo/2916822/rthaff163472730718b6eae066a7904c301/orig">
            </div>
            <div class="cell">
                <img src="https://avatars.mds.yandex.net/get-turbo/2799516/rth0b82b0afdb2dc030e328bf1cb983cf05/orig">
            </div>
        </div>
        <div class="site">
            <a class="site-link" href="https://example.com/">Site</a>
        </div>
        <p>What's a good way to start your day? With a delicious and healthy breakfast!</p>
        <p>Come by for breakfast. You can find photos of our dishes <a href="#">on our site</a>.</p>
        <h2>Menu</h2>
        <figure>
            <img src="https://avatars.mds.yandex.net/get-sbs-sd/369181/49e3683c-ef58-4067-91f9-786222aa0e65/orig">
            <figcaption>Omelette with herbs</figcaption>
        </figure>
        <p>Our menu always contains fresh, delicious, and healthy options.</p>
        <p>Find out for yourself.</p>
        <button formaction="tel:+7(123)456-78-90"
                data-background-color="#5B97B0"
                data-color="white"
                data-primary="true">Reserve a table</button>
        <p>Our address: <a href="#">Nullam dolor massa, porta a nulla in, ultricies vehicula arcu.</a></p>
        <p>Photos — http://unsplash.com</p>
        ]]>
    </turbo:content>
</item>
Contact support
Previous
Overview
Next
Page header