Skip to content
PHIL
Français

ComingSoon

block

A "coming soon" page: the logo at the top of one column, a muted eyebrow, the animated headline and one or more paragraphs centred below it, and an illustration filling the other column. The columns stack on small screens, the illustration under the text.

Preview

Light

Coming soon

Studio

Our new site opens soon.

Code 
<twig:ComingSoon
    logoSrc="/images/logo.png"
    logoAlt="Studio"
    eyebrow="Coming soon"
    words="Studio"
    :paragraphs="['Our new site opens soon.']"
    :illustrations="['/images/main.png']"
    illustrationAlt=""
/>

Dark

Coming soon

Studio

Our new site opens soon.

Code 
<twig:ComingSoon
    logoSrc="/images/logo.png"
    logoAlt="Studio"
    eyebrow="Coming soon"
    words="Studio"
    :paragraphs="['Our new site opens soon.']"
    :illustrations="['/images/main.png']"
    illustrationAlt=""
/>

Try it

Change the props; the example is rendered again by the server.

Coming soon

Studio

Our new site opens soon.

<twig:ComingSoon
    logoSrc="/images/logo.png"
    logoAlt="Studio"
    eyebrow="Coming soon"
    words="Studio"
    :paragraphs="['Our new site opens soon.']"
    :illustrations="['/images/main.png']"
    illustrationAlt=""
/>

Variants

landmarks

Whether the column is written as header and main landmarks; false when the page's layout has them.

Coming soon

Studio

Our new site opens soon.

Coming soon

Studio

Our new site opens soon.

landmarks="false"

Coming soon

Studio

Our new site opens soon.

Coming soon

Studio

Our new site opens soon.

landmarks="true"

Usage

Usage

Coming soon

site.name

site.info

Code 
<twig:ComingSoon
    logoSrc="{{ asset('images/logo-{theme}.svg') }}"
    logoAlt="{{ 'site.name'|trans }}"
    :theme="theme"
    eyebrow="{{ 'coming_soon'|trans }}"
    words="{{ 'site.name'|trans }}"
    :paragraphs="['site.info'|trans]"
    :illustrations="[asset('images/knight.svg'), asset('images/robot.svg')]"
    illustrationAlt=""
/>

Installation

php bin/console ux:install coming-soon --kit=github.com/parler-haut-interagir-librement/ux-kit

It brings the recipes it needs: logo, animated-headline, illustration

Props

PropTypeDefaultDescription
logoWebp string|null null The WebP source of the logo.
logoHref string|null null A link around the logo.
theme string|null null The theme written in place of "{theme}" in the logo's sources.
locale string|null null The locale written in place of "{locale}" in the logo's sources.
headlineText string|null null Static text before the words of the headline.
paragraphs list<string> [] Paragraphs under the headline, each escaped.
illustrations list<string|array<string,mixed>>|string [] The illustrations to choose from; none leaves the column out.
illustrationAlt string '' The text alternative of an illustration that has none; an empty string for a decorative one.
seed int|null null The seed of the illustration's choice; null draws one at random.
landmarks bool true Whether the column is written as header and main landmarks; false when the page's layout has them.

Examples

Markup in the text

The content block comes after the paragraphs, for a translated text that holds markup.

<twig:ComingSoon logoSrc="/images/logo.png" logoAlt="Studio" eyebrow="Coming soon" words="Studio">
    <p>{{ 'site.info.html'|trans|raw }}</p>
</twig:ComingSoon>

Inside a layout

A layout that already writes header and main turns the landmarks off.

<twig:ComingSoon :landmarks="false" logoSrc="/images/logo.png" logoAlt="Studio" eyebrow="Coming soon" words="Studio" />

Accessibility

The column is a header (the logo) and a main (the text), unless landmarks is false. The eyebrow and the headline are an hgroup, so the eyebrow is not a heading of its own. The illustration enters with a slanted clip beside the text, never under prefers-reduced-motion.

Files to copy

templates/components/ComingSoon.html.twig 
{#-
 # A "coming soon" page: the logo at the top of one column, the eyebrow, the animated headline and the paragraphs
 # centred below it, and an illustration filling the other column; stacked on small screens.
 #}
{%- props
    ## string The logo image, PNG or SVG; "{theme}" and "{locale}" in it are replaced.
    logoSrc,
    ## string The text alternative of the logo, the name it writes.
    logoAlt,
    ## string The label above the headline, such as "Coming soon".
    eyebrow,
    ## list<string>|string The word, or the words to cycle through, of the headline.
    words,
    ## string|null The WebP source of the logo.
    logoWebp = null,
    ## string|null A link around the logo.
    logoHref = null,
    ## string|null The theme written in place of "{theme}" in the logo's sources.
    theme = null,
    ## string|null The locale written in place of "{locale}" in the logo's sources.
    locale = null,
    ## string|null Static text before the words of the headline.
    headlineText = null,
    ## list<string> Paragraphs under the headline, each escaped.
    paragraphs = [],
    ## list<string|array<string,mixed>>|string The illustrations to choose from; none leaves the column out.
    illustrations = [],
    ## string The text alternative of an illustration that has none; an empty string for a decorative one.
    illustrationAlt = '',
    ## int|null The seed of the illustration's choice; null draws one at random.
    seed = null,
    ## bool Whether the column is written as header and main landmarks; false when the page's layout has them.
    landmarks = true
-%}
{%- set _top = landmarks ? 'header' : 'div' -%}
{%- set _body = landmarks ? 'main' : 'div' -%}
<div{{ attributes.defaults({class: 'isSplit isFullHeight'}) }}>
    <div class="isCover">
        <{{ _top }}>
            <twig:Logo :src="logoSrc" :alt="logoAlt" :webp="logoWebp" :href="logoHref" :theme="theme" :locale="locale" />
        </{{ _top }}>
        <{{ _body }} class="isCoverBody">
            <div class="isNarrow">
                <hgroup>
                    <p class="isEyebrow">{{ eyebrow }}</p>
                    <twig:AnimatedHeadline :words="words" :text="headlineText" />
                </hgroup>
                {%- for paragraph in paragraphs %}
                <p>{{ paragraph }}</p>
                {%- endfor %}
                {##- More content under the paragraphs: a translated text with markup, a form, links. -#}
                {%- block content %}{% endblock -%}
            </div>
        </{{ _body }}>
    </div>
    {%- if illustrations is not empty %}
    <twig:Illustration class="isBleed hasEntrance" :candidates="illustrations" :alt="illustrationAlt" :seed="seed" />
    {%- endif %}
</div>