Files
VITEC-website/packages/vitec/ContentBlocks/ContentElements/intro-paragraph/templates/backend-preview.html
2026-07-09 10:10:05 +02:00

77 lines
2.6 KiB
HTML
Executable File

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<f:layout name="Preview"/>
<f:section name="Content">
<f:asset.css identifier="vitec-backend-preview" href="EXT:vitec/Resources/Public/Css/backend-preview.css"/>
<div class="vitec-preview">
<div class="vitec-preview__body">
<div class="vitec-preview__label">VITEC · Intro Paragraph</div>
<h3 class="vitec-preview__headline">
<f:if condition="{data.header}">
<f:then>{data.header}</f:then>
<f:else>
<em style="color:#c00;">⚠ Headline missing</em>
</f:else>
</f:if>
</h3>
<f:if condition="{data.subheader}">
<div class="vitec-preview__subline">{data.subheader}</div>
</f:if>
<f:if condition="{data.bodytext}">
<div class="vitec-preview__body-text">
<f:format.stripTags>{data.bodytext}</f:format.stripTags>
</div>
</f:if>
<f:if condition="{data.button_text}">
<div class="vitec-preview__ctas">
<span class="vitec-preview__cta-btn vitec-preview__cta-btn--{data.button_style}">
{data.button_text} →
</span>
</div>
</f:if>
</div>
<f:comment>Settings sidebar</f:comment>
<div class="vitec-preview__settings">
<span class="vitec-badge">
<f:switch expression="{data.intro_layout_variant}">
<f:case value="variant_1">▤ Variant 1</f:case>
<f:case value="variant_2">▥ Variant 2</f:case>
<f:case value="variant_3">▤ Variant 3</f:case>
<f:case value="variant_4">▥ Variant 4</f:case>
<f:defaultCase>{data.intro_layout_variant}</f:defaultCase>
</f:switch>
</span>
<f:if condition="{data.button_text}">
<span class="vitec-badge">
<span class="vitec-badge__dot vitec-badge__dot--{data.button_style}"></span>
Button: {data.button_style}
</span>
</f:if>
<f:if condition="{data.fullwidth}">
<span class="vitec-badge">↔ Full width</span>
</f:if>
<f:if condition="{data.button_text} && {data.button_link.url} == ''">
<span class="vitec-badge vitec-badge--warning">⚠ Button text without link</span>
</f:if>
<f:if condition="{data.debug}">
<span class="vitec-badge vitec-badge--warning">⚙ Debug ON</span>
</f:if>
</div>
</div>
</f:section>
</html>