{{! Latest projects (ADR 0062): a ready-made section — the section heading, the Projects element's cards (projects/template.html, "requires": ["projects"]) and an optional button to the projects page. }}
<div {{@attrs}}>{{#heading}}<div class="sv-sectionhead sv-sectionhead--{{headingAlign}}{{#headingSize}} sv-sectionhead--size-{{headingSize}}{{/headingSize}}"><h2 class="sv-sectionhead__title"{{@edit heading}}>{{{heading}}}</h2>{{#intro}}<p class="sv-sectionhead__text"{{@edit intro}}>{{intro}}</p>{{/intro}}</div>{{/heading}}{{^heading}}{{#intro}}<div class="sv-sectionhead sv-sectionhead--{{headingAlign}}{{#headingSize}} sv-sectionhead--size-{{headingSize}}{{/headingSize}}"><p class="sv-sectionhead__text"{{@edit intro}}>{{intro}}</p></div>{{/intro}}{{/heading}}<div class="sv-posts sv-posts--columns-{{columns}} sv-posts--look-{{look}}">{{#hasFilters}}<nav class="sv-posts__filters" aria-label="{{filtersLabel}}"{{^limited}} data-sv-project-filters{{/limited}}>{{#filters}}<a class="sv-posts__filter" href="{{url}}" data-sv-filter="{{slug}}"{{#current}} aria-current="page"{{/current}}>{{name}}</a>{{/filters}}</nav>{{/hasFilters}}{{#hasItems}}{{#overflow}}<div class="sv-carousel sv-carousel--nav-{{carouselNav}}" data-sv-carousel><div class="sv-carousel__track">{{/overflow}}{{^overflow}}<div class="sv-posts__grid">{{/overflow}}{{#items}}<article class="sv-service-card sv-service-card--look-{{look}}{{#shape}} sv-service-card--shape-{{shape}}{{/shape}}{{#titleSize}} sv-service-card--title-size-{{titleSize}}{{/titleSize}} sv-posts__item sv-projects__item{{^turns}}{{#style}} sv-card-{{style}}{{#styleCustom}} sv-card-custom{{/styleCustom}}{{/style}}{{/turns}}{{#turns}} sv-card-turns{{/turns}} sv-round-{{corners}}{{#hover}} sv-cardhover-{{hover}}{{/hover}}"{{^turns}}{{#styleCustom}} style="--sv-custom-card:{{styleCustom}}"{{/styleCustom}}{{/turns}} data-sv-cats="{{cats}}"><div class="sv-service-card__media">{{^slides}}{{#image.url}}<img class="sv-service-card__photo" src="{{image.url}}" alt="{{image.alt}}"{{#image.width}} width="{{image.width}}" height="{{image.height}}"{{/image.width}} loading="lazy" decoding="async">{{/image.url}}{{^image.url}}<span class="sv-posts__nophoto" aria-hidden="true"></span>{{/image.url}}{{/slides}}{{#slides}}<div class="sv-projects__slides" data-sv-slides>{{#images}}<img class="sv-service-card__photo sv-projects__slide" src="{{url}}" alt="{{alt}}"{{#width}} width="{{width}}" height="{{height}}"{{/width}} loading="lazy" decoding="async">{{/images}}<button type="button" class="sv-projects__arrow sv-projects__arrow--prev" aria-label="{{prevLabel}}"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="m15 6-6 6 6 6"/></svg></button><button type="button" class="sv-projects__arrow sv-projects__arrow--next" aria-label="{{nextLabel}}"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="m9 6 6 6-6 6"/></svg></button></div>{{/slides}}</div><div class="sv-service-card__body"><p class="sv-posts__meta">{{#showCategory}}{{#category.name}}<span class="sv-posts__category">{{category.name}}</span>{{/category.name}}{{/showCategory}}{{#showClient}}{{#client}}<span>{{client}}</span>{{/client}}{{/showClient}}{{#showYear}}{{#year}}<span>{{year}}</span>{{/year}}{{/showYear}}{{#showLocation}}{{#location}}<span>{{location}}</span>{{/location}}{{/showLocation}}</p><h3 class="sv-service-card__title">{{title}}</h3>{{#showExcerpt}}{{#excerpt}}<p class="sv-service-card__text">{{excerpt}}</p>{{/excerpt}}{{/showExcerpt}}{{#showServices}}{{#hasServices}}<ul class="sv-projects__tags">{{#services}}<li>{{name}}</li>{{/services}}</ul>{{/hasServices}}{{/showServices}}{{#moreLabel}}<span class="sv-posts__more" aria-hidden="true">{{moreLabel}}</span>{{/moreLabel}}</div>{{#tiles}}<span class="sv-image__arrow sv-service-card__arrow" aria-hidden="true"></span>{{/tiles}}<a class="sv-service-card__link" href="{{url}}"><span class="sv-service-card__sr">{{title}}</span></a></article>{{/items}}{{^overflow}}</div>{{/overflow}}{{#overflow}}</div><button type="button" class="sv-carousel__arrow sv-carousel__arrow--prev" aria-label="{{prevLabel}}"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="m15 6-6 6 6 6"/></svg></button><button type="button" class="sv-carousel__arrow sv-carousel__arrow--next" aria-label="{{nextLabel}}"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="m9 6 6 6-6 6"/></svg></button></div>{{/overflow}}{{/hasItems}}{{^hasItems}}{{#ready}}{{@placeholder projects}}{{/ready}}{{^ready}}{{@placeholder loading-projects}}{{/ready}}{{/hasItems}}</div>{{#button.label}}<div class="sv-posts__action sv-posts__action--{{headingAlign}}"><div class="sv-button sv-button--variant-outline">{{#button.link.url}}<a class="sv-button__control{{#button.arrow}} sv-button__control--arrow{{/button.arrow}}{{#button.icon}} sv-button__control--icon{{#button.iconEnd}} sv-button__control--icon-end{{/button.iconEnd}} sv-glyph-{{button.icon}}{{/button.icon}}" href="{{button.link.url}}"{{#button.link.newTab}} target="_blank" rel="noopener noreferrer"{{/button.link.newTab}}{{@edit button.label}}>{{button.label}}</a>{{/button.link.url}}{{^button.link.url}}<span class="sv-button__control{{#button.arrow}} sv-button__control--arrow{{/button.arrow}}{{#button.icon}} sv-button__control--icon{{#button.iconEnd}} sv-button__control--icon-end{{/button.iconEnd}} sv-glyph-{{button.icon}}{{/button.icon}}"{{@edit button.label}}>{{button.label}}</span>{{/button.link.url}}</div></div>{{/button.label}}</div>