Component Definitions
1. Header with No Text
Description: A full-width background image at the top of interior pages, typically setting the visual theme for the page.
Use case: The Header with No Text component is added at the top of the page, usually above the navigation and directly below the header for a clean aesthetic.
2. Intro text
Description: Positioned anywhere, presenting an introductory summary centered on the page.
Use Case: Directly below the header; serves as an opening paragraph.
3. Zig Zag Feature Box
Description: An alternating left-right design, each block presenting a feature with a brief description.
Use Case: Scattered throughout the page, often between sections to create visual flow.
4. Zig Zag Feature Box with Listing
Description: A zig-zag layout containing list-based descriptions, ideal for presenting multiple features or details in sequence.
Use Case: Within the main content area, usually a bit lower in the hierarchy.
5. Zig Zag Feature Box with Gallery
Description: Alternating layout featuring a gallery, typically used to present visually rich content with supporting text.
Use Case: Mid to bottom sections, enhancing visual storytelling.
6. Zig Zag Feature Box with Features
Description: An alternating layout with multiple features listed, creating visual flow while presenting content.
Use Case: Within the main content area for variety.
7. Zig Zag Feature Box with Venue Info
Description: Alternating layout sections specifically providing venue information, useful for event or space details.
Use Case: Often mid to lower, near event or venue details.
8. 2-Col Feature Boxes
Description: A two-column layout displaying two distinct features side-by-side, typically mid-page to present dual highlights.
Use Case: Used to display dual features side-by-side, often near the top or midsection.
9. 3-Col Feature Boxes
Description: A three-column layout, often used mid-page, to showcase multiple features or services, providing a broad overview.
Use Case: Frequently placed in the main content or as a highlights section.
10. Multi-Image Slider with Content
Description: An interactive gallery with multiple images and overlaid content, used to tell a story visually with text descriptions.
Use Case: Top of the page or within the hero section, giving users a first impression.
11. Multi-Image Slider
Description: A full-width image carousel with no additional text, ideal for showcasing multiple visuals.
Use Case: Hero section or at key breaks between sections.
12. Call to Action
Description: A prompt or button encouraging users to take a specific action, such as "Book Now" or "Contact Us," strategically placed to drive conversions.
Use Case: Spread throughout, often at the end of sections or at the bottom of the page.
13. Image Box
Description: A simple image section that may appear with or without accompanying text, used to break up content or add visual interest.
Use Case: Throughout the content, often adjacent to text or in feature sections.
14. Fluid Image Box
Description: A full-width image section with overlay text, creating an immersive effect and enhancing visual storytelling.
Use Case: Typically in headers or hero sections, creating an immersive entry.
15. Reviews Slider
Description: A carousel displaying user reviews or testimonials, typically placed mid-to-lower on the page to build social proof and credibility.
Use Case: Mid to bottom of the page to build credibility.
16. History Timeline
Description: A visual timeline section showing significant milestones, often within an "About Us" section, providing a story of progression.
Use Case: Mid to lower sections, often in 'About Us' or history sections.
17. Icon & Text
Description: Icons paired with brief text descriptions, visually breaking up content and highlighting features or benefits.
Use Case: Spread across the page to break up content with visual highlights.
18. Horizontal Tabs with Feature Box
Description: Horizontal tabs that allow navigation between sections without refreshing the page, making content accessible and user-friendly.
Use Case: Often in the main content area for structured details.
19. UNAP with Map
Description: A footer or contact section displaying contact information (UNAP - URL, Name, Address, Phone) with an embedded map for location reference.
Use Case: Bottom of the page or in the footer, showing location information.
20. UNAP Form
Description: A form section to gather user information, typically for contact purposes, located near contact information or in the footer.
Use Case: Bottom or in dedicated call-to-action sections, especially for lead generation.
21. Vertical Tabs
Description: Vertically aligned tabs that make navigating between topics or features easier without reloading the page.
Use Case: Mid-page to allow easy navigation between topics.
22. Accordian 1
Description: A collapsible content section used to show or hide related content, often used in FAQs for easy access.
Use Case: Frequently in FAQ or information-dense sections.
23. Accordian 2
Description: Similar to Accordion 1 but with added call-to-action buttons, inviting users to engage further with the content.
Use Case: Frequently in FAQ or information-dense sections where users can use a CTA to perform an action.
24. List Repeaters
Description: Repeated visual and text-based lists, often used to showcase features or options in a uniform format.
Use Case: Scattered as highlights, often to list features, benefits, or key items.
25. Feature Box with Accordian
Description: An accordion-style section within a feature box, including images and content, allowing expandable details for each feature.
Use Case: Typically for product features or details, often mid-page.
26. Number Highlights
Description: A section emphasizing key numbers or statistics, often used to showcase growth, achievements, or unique selling points.
Use Case: Top or mid-sections as attention-grabbers for statistics.
27. Feature Boxes with Slider
Description: Feature boxes displayed within a slider, providing interactive viewing for multiple items or content highlights.
Use Case: Mid to lower sections, especially in a portfolio or showcase area.
28. Header with Text
Description: A prominent header section with text, used as an attention-grabbing opening element.
Use Case: Top, serving as a section opener.
29. Header
Description: The top section of the page, often containing the logo, navigation links, and call-to-action buttons for quick access.
Use Case: Top of the page, central and prominent.
30. Feature Box Large Heading
Description: A feature box with a bold H2 heading and a call-to-action button, emphasizing a key section or content area.
Use Case: Frequently at the start of a section to introduce a major feature.