> ## Documentation Index
> Fetch the complete documentation index at: https://docs.ticketspotapp.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Layout

Layout section allows you to define how your event listings appear across desktop and mobile
screens. Each layout option changes the structure and visual presentation of events, helping
you create a browsing experience that matches your design goals and content style.

Let’s get started 🚀

Click on the **dropdown menu** and select **Layout**. You will be navigated to the Layout settings
screen, where you can choose how events are displayed across desktop and mobile views.

<img src="https://mintcdn.com/ticketspot/aRTX7Atm9AcaKjgz/assets/branding-and-design/layout/layout-1.png?fit=max&auto=format&n=aRTX7Atm9AcaKjgz&q=85&s=832dc86c3b7e62090b9ed166d4937ec3" alt="design" width="715" height="290" data-path="assets/branding-and-design/layout/layout-1.png" />

Below is an overview of each layout category you can choose from under the **Layout** section:

## List and Card Layouts

List and Card layout show events in a clean vertical style, making them easy to scroll through.
You can choose simple text-based lists, card-style layouts with images, or calendar-style
designs that help users browse events based on dates. This layout works well when you want
visitors to quickly read through event details.

<img src="https://mintcdn.com/ticketspot/aRTX7Atm9AcaKjgz/assets/branding-and-design/layout/list-2.gif?s=62969a63ab461607709ecd94db6a580f" alt="design" width="1280" height="614" data-path="assets/branding-and-design/layout/list-2.gif" />

## Grid Layouts

Grid layouts place events in multiple side-by-side columns. This helps users see several events
at once and compare them easily. It’s useful when you have a larger number of events and want
to display them in a compact, organized way.

<img src="https://mintcdn.com/ticketspot/aRTX7Atm9AcaKjgz/assets/branding-and-design/layout/grid-3.gif?s=c68fcd49cf1363ee02090e8a73c076a0" alt="design" width="1280" height="570" data-path="assets/branding-and-design/layout/grid-3.gif" />

## Time-Based Layouts

Time-Based layouts focus on the event schedule. They arrange events by dates, times, or
sessions so visitors can quickly find options that fit their availability. This is ideal for recurring
events, multi-session events, or any schedule-focused experience.

<img src="https://mintcdn.com/ticketspot/aRTX7Atm9AcaKjgz/assets/branding-and-design/layout/time-4.gif?s=4fd98dc4127ca5585f56970bc6197777" alt="design" width="1280" height="570" data-path="assets/branding-and-design/layout/time-4.gif" />

## Mobile Layouts

Mobile layouts are designed specifically for phones and small screens. They ensure your events
are easy to read, scroll, and tap through on mobile devices. This gives users a smooth and clear
browsing experience when they’re on the go.

<img src="https://mintcdn.com/ticketspot/aRTX7Atm9AcaKjgz/assets/branding-and-design/layout/mobile-5.gif?s=5451b492e284e0355da42ba56849671b" alt="design" width="1280" height="570" data-path="assets/branding-and-design/layout/mobile-5.gif" />

A live preview of each layout appears in the right panel, allowing you to confirm the design
before applying it.
