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>
Copied to clipboard

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;
}
Copied to clipboard

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>
Copied to clipboard