<div class="countdown_clock theme_" aria-labelledby="countdown_clock-1_title" aria-describedby="countdown_clock-1_desc">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="countdown_clock_inner">
                <header class="
						countdown_clock_header
						
					">
                    <h2 id="countdown_clock-1_title" class="countdown_clock_title">
                        Countdown to Giving Day 2026
                    </h2>

                    <span id="countdown_clock-1_desc" class="visually_hide">Countdown timer going down to August 25, 2026 to celebrate Giving Day</span>
                </header>

                <div class="countdown_clock_wrap" aria-hidden="true">
                    <div class="js-countdown-clock simply-countdown" data-countdown-clock='{"date":"2026-12-02 00:00:00"}'></div>
                </div>

                <footer class="countdown_clock_footer">
                    <div class="countdown_clock_date_wrap">
                        <time class="countdown_clock_date" datetime="2026-12-02">
                            Dec 02, 2026
                        </time>
                    </div>
                </footer>
            </div>
        </div>
    </div>
</div>
{% set id = uniqid("countdown_clock") %}
{% set config = {
	date: date
}|json_encode() %}

<div
	class="countdown_clock theme_{{ theme }}"
	aria-labelledby="{{ id }}_title"
	aria-describedby="{{ id }}_desc"
>
	<div class="fs-row">
		<div class="fs-cell">
			<div class="countdown_clock_inner">
				<header
					class="
						countdown_clock_header
						{{ not show_title ? 'visually_hide' : ''  }}
					"
				>
					<h2 id="{{ id }}_title" class="countdown_clock_title">
						{{ title }}
					</h2>

					<span id="{{ id }}_desc" class="visually_hide">{{ aria_label }}</span>
				</header>

				<div class="countdown_clock_wrap" aria-hidden="true">
					<div
						class="js-countdown-clock simply-countdown"
						data-countdown-clock='{{ config }}'
					></div>
				</div>

				{% if show_date %}
					<footer class="countdown_clock_footer">
						<div class="countdown_clock_date_wrap">
							<time class="countdown_clock_date" datetime="{{ date|date('Y-m-d') }}">
								{{ date|date("M d, Y") }}
							</time>
						</div>
					</footer>
				{% endif %}
			</div>
		</div>
	</div>
</div>
  • Handle: @component-countdown-clock
  • Preview:
  • Filesystem Path: src/twig/components/countdown-clock/countdown-clock.twig

No notes defined.