Stylebook

SEO Box

Filtru odpovídá 1492 bytů na prodej. Jak najít ideální inzerát? Více informací

Jak najít ideální inzerát bytu v Českých Budějovicích?

test
Skrýt

        {% include "@Components/seo-box/seo-box.twig" with {
    props : {
        id: 'top_seo_box',
        bait: {
            text: 'Filtru odpovídá 1492 bytů na prodej. Jak najít ideální inzerát?',
            button_label: 'Více informací',
        },
        content: {
            html: '<h2>Jak najít ideální inzerát bytu v Českých Budějovicích?</h2><p>test</p>',
        }
    }
} %}

          <article class="seo-box">
	<header >
		<p>
            Filtru odpovídá 1492 bytů na prodej. Jak najít ideální inzerát?
              <a class="link --primary" href="#" data-toggle-target='seo-box-top_seo_box'>
      <span class="link__title">
      <span class="link__title-wrap">Více informací</span>
    </span>
    </a>
        </p>

	</header>
	<main data-toggle-content="seo-box-top_seo_box"
		  class="seo-box-article js-toggle-hiden">
					<h2>Jak najít ideální inzerát bytu v Českých Budějovicích?</h2><p>test</p>
		          <a class="link --primary" href="#" data-toggle-target='seo-box-top_seo_box'>
      <span class="link__title">
      <span class="link__title-wrap">Skrýt</span>
    </span>
    </a>
	</main>
</article>

SEO Box (opened on load)

Filtru odpovídá 1492 bytů na prodej. Jak najít ideální inzerát? Více informací

Jak najít ideální inzerát bytu v Českých Budějovicích?

test
Skrýt

        {% include "@Components/seo-box/seo-box.twig" with {
    props : {
        id: 'bottom_seo_box',
        bait: {
            text: 'Filtru odpovídá 1492 bytů na prodej. Jak najít ideální inzerát?',
            button_label: 'Více informací',
        },
        content: {
            html: '<h2>Jak najít ideální inzerát bytu v Českých Budějovicích?</h2><p>test</p>',
            opened: true,
        }
    }
} %}

          <article class="seo-box">
	<header >
		<p>
            Filtru odpovídá 1492 bytů na prodej. Jak najít ideální inzerát?
              <a class="link --primary" href="#" data-toggle-target='seo-box-bottom_seo_box'>
      <span class="link__title">
      <span class="link__title-wrap">Více informací</span>
    </span>
    </a>
        </p>

	</header>
	<main data-toggle-content="seo-box-bottom_seo_box"
		  class="seo-box-article js-toggle-show">
					<h2>Jak najít ideální inzerát bytu v Českých Budějovicích?</h2><p>test</p>
		          <a class="link --primary" href="#" data-toggle-target='seo-box-bottom_seo_box'>
      <span class="link__title">
      <span class="link__title-wrap">Skrýt</span>
    </span>
    </a>
	</main>
</article>

Schema

    {
    "props": {
        "id": {
            "type": "String",
            "description": "Unique \"url-String\" identification on the page in case of multiple SEO boxes",
            "required": true
        },
        "bait": {
            "type": "Object",
            "description": "Url of paginated content without page parameter, typically for page 1 content",
            "props": {
                "text": {
                    "type": "String",
                    "description": "Visible part text",
                    "required": true
                },
                "button_label": {
                    "type": "String",
                    "description": "Visible part button label which will on click open the hidden content",
                    "required": true
                },
                "classes": {
                    "type": "array",
                    "description": "array of classes",
                    "required": false,
                    "items": {
                        "type": "String"
                    }
                }
            }
        },
        "content": {
            "type": "Object",
            "description": "object containing content settings",
            "props": {
                "html": {
                    "type": "String",
                    "description": "Content of SEO box",
                    "required": true
                },
                "opened" : {
                    "type": "Boolean",
                    "description": "Initial visibility state of the content",
                    "default_value": false
                }
            }
        }
    }
}