# Section Variants & Layouts

## Section Variants & Layouts

**Skill level:** Beginner for options, light code to swap components

Consultiz gives you two ways to change how a section looks:

1. **An option in the content file**, such as `options.layout`. The content stays the same; only the look changes.
2. **A different component** of the same kind, such as one of the three testimonial sliders. Each has its own content file, and you swap it in the route file.

### Options In Content Files
Set these in the section file (every page) or in a page block (one page). Set them in both language folders.

| Section or page                 | Where it is set                                       | Values                                                        |
| ------------------------------- | ----------------------------------------------------- | ------------------------------------------------------------- |
| Pricing plans                   | `options.layout` in `pricing-section.md` or the `pricingSection` block | `default` · `advisory` (the pricing page uses `advisory`) |
| Client logos, look              | `layout` in `partner-marquee.md`, `customers.md`, or the `customersSection` block | `default` · `corporate`             |
| Client logos, motion            | `display`                                             | `marquee` (scrolling) · `grid` (static)                       |
| Client logos, spacing           | `options.sectionVerticalSpace`, `options.bottomSpacing`, `options.background` | `true` · `false`                      |
| Client logos, review badge      | `googleReview.enable`                                 | `true` · `false`                                              |
| Testimonial sliders             | `options.layout` in `testimonial-slider-vertical.md` and `testimonial-slider-video.md` | `carousel-full` · `carousel` · `card` |
| Portfolio list page             | `options.layout` in `portfolio/<lang>/-index.md`      | `grid` · `masonry` · `horizontal` (with category filters)     |
| Industries list page            | `options.layout` in `industries/<lang>/-index.md`     | `list` · `grid`                                               |
| Numbered blog pages (`/blog/page/2/`) | `options.layout` and `options.columns` in `blog/<lang>/-index.md` | `card` · `grid` · `creative` · `horizontal`; columns `1`, `2`, or `3` |

The shipped content files show the value each page uses today.

```yaml
# src/content/sections/english/partner-marquee.md
layout: "corporate"   # default | corporate
display: "grid"       # marquee | grid
```

<Aside type="caution">
  Section files are only loosely checked, so a misspelled value such as
  `layout: "advisery"` is not reported and the section falls back to its
  default look. In page blocks, `npm run astro-check` reports values that are
  not in the list. Check the page in the browser either way.
</Aside>

### Swap A Section For Another Variant
Several kinds of section come in more than one design. Each design is its own component with its own content file in `src/content/sections/<language>/`:

| Kind of section     | Components (in `src/layouts/components/sections/`)                         | Content files                                                     |
| ------------------- | -------------------------------------------------------------------------- | ----------------------------------------------------------------- |
| Banner              | `banner/BannerSlider`, `banner/BannerTabbedSlider`                        | `banner-slider.md`, `banner-tabbed-slider.md`                    |
| About               | `about/AboutCentered`, `about/AboutImageStats`, `about/AboutProcess`, `about/AboutVideoStats` | `about-centered.md`, `about-image-stats.md`, `about-process.md`, `about-video-stats.md` |
| Services            | `services/ServicesCentered`, `services/ServicesParallax`, `services/ServicesSlider` | `services-centered.md`, `services-parallax.md`, `services-slider.md` |
| Industries          | `industries/IndustriesStepper`, `industries/IndustriesCover` | `industries-stepper.md`, `industries-cover.md` |
| Growth banner       | `growth-banner/GrowthBannerFullWidth`, `growth-banner/GrowthBannerCard`   | `growth-banner-full-width.md`, `growth-banner-card.md`           |
| Testimonials        | `testimonial/TestimonialVideoShowcase`, `testimonial/TestimonialSliderVertical`, `testimonial/TestimonialSliderVideo` | `testimonial-video-showcase.md`, `testimonial-slider-vertical.md`, `testimonial-slider-video.md` |
| Articles            | `blog/BlogTwoColumn`, `blog/BlogGridCentered`, `blog/BlogGrid`            | `blog-grid-centered.md` (the first two), `blog-grid.md`          |
| FAQ                 | `faq/FaqCentered`, `faq/FaqImageSplit`                                    | `faq-centered.md`, `faq-image-split.md`                          |
| Contact             | `contact/ContactImageForm`, `contact/ContactSplit`                        | `contact-image-form.md`, `contact-split.md`                      |
| Call to action      | `cta/CtaImageBanner`, `cta/CtaCircle`                                     | `cta-image-banner.md`, `cta-circle.md`                           |
| Portfolio preview   | `portfolio/PortfolioSlider`, `portfolio/PortfolioSliderPanel`             | `portfolio-slider.md`, `portfolio-slider-panel.md`               |
| Process steps       | `solution-steps/SolutionStepsSlider`, `solution-steps/SolutionStepsCounter` | `solution-steps-slider.md`, `solution-steps-counter.md`        |

To swap one for another on a page:

1. In the route file (`src/pages/[...lang]/<page>.astro`), change the `import` line to the other component.
2. Change the component tag in the page body.
3. Remove the `content={...}` prop, or point it at a block whose fields match the new component. Each component expects the fields of its own content file.
4. Run `npm run astro-check` and look at the page.

### Sections Not Placed On Any Page
These sections ship with content but are not used by any demo page. Add them to a route when you need them ([Sections](/consultiz/customization/sections/#add-a-section-to-a-page)):

| Component                           | Content file                  |
| ----------------------------------- | ----------------------------- |
| `about/AboutVideoStats`             | `about-video-stats.md`        |
| `blog/BlogGrid`                     | `blog-grid.md`                |
| `contact/ContactSplit`              | `contact-split.md`            |
| `cta/CtaCircle`                     | `cta-circle.md`               |
| `portfolio/PortfolioSlider`         | `portfolio-slider.md`         |
| `portfolio/PortfolioSliderPanel`    | `portfolio-slider-panel.md`   |
| `services/ServicesSlider`           | `services-slider.md`          |
| `solution-steps/SolutionStepsSlider` | `solution-steps-slider.md`   |
| `testimonial/TestimonialSliderVideo` | `testimonial-slider-video.md` |
| `solution-steps/SolutionStepsCounter` | `solution-steps-counter.md` |
| `ProcessSection`                    | `process-section.md`          |
| `RoadmapSection`                    | `roadmap-section.md`          |
| `JoinTeamSection`                   | `join-team-section.md`        |
| `TeamworkSection`                   | `teamwork-section.md`         |
| `WorkWithUsSection`                 | `work-with-us-section.md`     |

### Page Layouts
Some pages also come in several designs. These are separate routes, each with its own content folder:

| Kind     | URLs                                                                 | Content folders                                       |
| -------- | -------------------------------------------------------------------- | ----------------------------------------------------- |
| About    | `/about/`, `/about/style-02/`                                        | `about/`, `faq/` (style 2 is an FAQ-led page)         |
| Solutions | `/solutions/style-01/`, `/solutions/style-02/` (beside the list page `/solutions/`) | `solution-style-01/`, `solution-style-02/` |
| Industries | `/industries/style-01/`, `/industries/style-02/` (beside the list page `/industries/`) | `industry-style-01/`, `industry-style-02/` |
| Blog list | `/blog/` (also `/blog/standard/`), `/blog/style-01/`, `/blog/style-02/` | `blog/` (all read `-index.md`)                       |

Keep the designs you like, delete the routes you don't need, and update the menus. See [Pages](/consultiz/customization/pages/).