Skip To Content Privacy Page

Travel Alert 2: High Passenger Volume During Labor Day Weekend.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer blandit nisl non ligula laoreet placerat nec ac mauris. Pellentesque ac nulla interdum, venenatis mauris quis, commodo tellus. Aenean iaculis nunc magna, in pharetra urna posuere et. Duis auctor nunc tellus, non consectetur est finibus nec. Proin quam leo, dapibus non imperdiet eu, vulputate vel est. Donec pretium est posuere vulputate sagittis. Fusce malesuada volutpat mauris, sed consequat tellus posuere ac. Suspendisse potenti. Cras ut blandit risus. Suspendisse sed auctor enim, vitae scelerisque velit. Donec eu sagittis erat, ac sagittis urna. Donec vel nisl non metus varius pellentesque ac et orci. Aenean at tempor tellus, ut pharetra erat.

Call To Action 2
Navigation 1 Navigation 2 Navigation 3
Optional CTA
Optional CTA
Optional CTA
Optional CTA
Optional CTA
Optional CTA

Button Examples

Default Button (Default Icons)

Call To Action Outlined Button

Disabled Button

Disabled Button

Outlined Button

Outlined Button

Outlined Disabled Button

Outlined Disabled

Small Button

Small Button

Custom Right Icon

Custom Right Icon

Left Icon Only

Left Icon Only

Right Icon Only

Right Icon Only

Text Only Button (No Icons)

Text Only

Button with Link

Visit Example.com

Button with Link in New Window

Open in New Window

Text Only Button (No Icons)

Text Only

Dark Theme Button

Dark Theme Button

Dark Theme Outlined Button

Dark Outlined Button

Dark Theme Disabled Button

Dark Disabled Button

Button Component Arguments

Argument Options Default Description
text String 'Call To Action' The text displayed on the button
disabled true | false false Whether the button is disabled
outlined true | false false Whether the button has outlined style
icon_left FontAwesome class 'fa-regular fa-heart' Icon class for left icon (empty string for no icon)
icon_right FontAwesome class 'fa-regular fa-arrow-up-right' Icon class for right icon (empty string for no icon)
size 'sm' | '' '' Button size ('sm' for small, empty string for default size)
link URL '#' URL for the button link
new_window true | false false Whether to open the link in a new window
class String '' Additional CSS classes to add to the button
attributes String '' Additional HTML attributes to add to the button
theme 'light' | 'dark' 'light' The theme of the button

Button Icon Examples

Default Icon Button



Outlined Icon Button



Disabled Icon Button



Small Icon Button



Custom Icon Button



Custom Icon Disabled Outlined



Button Icon Component Arguments

Argument Options Default Description
link URL '#' URL for the button link
title String 'Call To Action' Title attribute for the button
icon FontAwesome class 'far fa-search' Icon class for the button
size 'sm' | '' '' Button size ('sm' for small, empty string for default size)
disabled true | false false Whether the button is disabled
outlined true | false false Whether the button has outlined style
new_window true | false false Whether to open the link in a new window
class String '' Additional CSS classes to add to the button
attributes String '' Additional HTML attributes to add to the button

Accordions Examples

Boxed Accordion



Ghost Accordion

Accordion Component Arguments

Argument Options Default Description
title String 'Accordion Title' The accordion title/heading
copy String 'Accordion content goes here.' The content inside the accordion
style 'boxed' | 'ghost' 'boxed' The style of accordion

Accordion Airline Examples

Alert Bar Examples

Important announcement



Important Information

Here is the detailed information about this alert.

Call To Action

Alert Bar Component Arguments

Argument Options Default Description
icon FontAwesome class 'fa-solid fa-circle-info' FontAwesome icon class
title String 'This is an important message' Alert message/title text
style 'normal' | 'expandable' 'normal' Alert style
expandable_title String 'Headline Medium Length' Title for expandable content (used when style is 'expandable')
expandable_copy String 'Lorem ipsum...' Content for expandable section (used when style is 'expandable')

Callout

Lorem ipsum dolor sit amet consectetur. Lectus enim hendrerit arcu ultrices mattis pharetra ornare nisi viverra. Eu egestas eget aliquet ut ornare ornare et. Odio aenean at justo urna.

Callout Component Arguments

Argument Options Default Description
copy String 'Callout content goes here.' The content inside the callout

Icon Styled

Background Style, Medium Size (Default)



Background Style, Large Size



Ghost Style, Medium Size



Ghost Style, Large Size

Icon Styled Component Arguments

Argument Options Default Description
style 'ghost' | 'background' 'background' The style of icon
size 'large' | 'medium' 'medium' The size of the icon
icon FontAwesome class 'fa-solid fa-pencil' The Font Awesome icon class

Card Icon

Default Card

Transforming Brands with Creativity

We specialize in creating custom digital experiences that engage and inspire. Our team leverages the latest technology and strategy to help brands thrive in the digital world.

Learn More

Transforming Brands with Creativity

We specialize in creating custom digital experiences that engage and inspire. Our team leverages the latest technology and strategy to help brands thrive in the digital world.

Learn More


Center Aligned Card

Transforming Brands with Creativity

We specialize in creating custom digital experiences that engage and inspire. Our team leverages the latest technology and strategy to help brands thrive in the digital world.

View Details

Ghost Style Card

Transforming Brands with Creativity

We specialize in creating custom digital experiences that engage and inspire. Our team leverages the latest technology and strategy to help brands thrive in the digital world.

Card Icon Component Arguments

Argument Options Default Description
style 'default' | 'center' | 'ghost' 'default' The style of the card
title String 'Card Title' The heading text for the card
copy String 'Card content goes here.' The paragraph text for the card
alignment 'left' | 'center' 'left' Text alignment
icon_style 'background' | 'ghost' 'background' The style of the icon
icon_size 'large' | 'medium' 'large' The size of the icon
icon FontAwesome class 'fa-solid fa-star' The Font Awesome icon class
link_title String 'Learn More' The text for the link
link_url URL '#' The URL for the link
link_size 'large' | 'medium' 'medium' The size of the link
link_window true | false false Whether the link opens in a new window
link_icon FontAwesome class 'fa-light fa-arrow-right' The Font Awesome icon class for the link

Card Icon Horizontal

Boxed Style

Transforming Brands with Creativity

We specialize in creating custom digital experiences that engage and inspire. Our team leverages the latest technology and strategy to help brands thrive in the digital world.

Ghost Style

Transforming Brands with Creativity

We specialize in creating custom digital experiences that engage and inspire. Our team leverages the latest technology and strategy to help brands thrive in the digital world.

Card Icon Horizontal Component Arguments

Argument Options Default Description
style 'boxed' | 'ghost' 'boxed' The style of the card
title String 'Card Title' The heading text for the card
copy String 'Card content goes here.' The paragraph text for the card
icon_style 'background' | 'ghost' 'background' The style of the icon
icon_size 'large' | 'medium' 'large' The size of the icon
icon FontAwesome class 'fa-solid fa-star' The Font Awesome icon class
link_title String 'Learn More' The text for the link
link_url URL '#' The URL for the link
link_window true | false false Whether the link opens in a new window

Card Image

Contained Style (Default)

Contained card image

Transforming Brands with Creativity

We specialize in creating custom digital experiences that engage and inspire. Our team leverages the latest technology and strategy to help brands thrive in the digital world.

Learn More

Center Aligned Card

Center aligned card image

Transforming Brands with Creativity

We specialize in creating custom digital experiences that engage and inspire. Our team leverages the latest technology and strategy to help brands thrive in the digital world.

View Details

Ghost Style Card

Ghost style card image

Transforming Brands with Creativity

We specialize in creating custom digital experiences that engage and inspire. Our team leverages the latest technology and strategy to help brands thrive in the digital world.

Learn More

Boxed Style Card

Boxed style card image

Transforming Brands with Creativity

We specialize in creating custom digital experiences that engage and inspire. Our team leverages the latest technology and strategy to help brands thrive in the digital world.

Learn More

Card Image Component Arguments

Argument Options Default Description
style 'contained' | 'ghost' | 'boxed' 'contained' The style of the card
title String 'Card Title' The heading text for the card
copy String 'Card content goes here.' The paragraph text for the card
alignment 'left' | 'center' 'left' Text alignment
image URL 'http://frutheme.fru.qa/app/uploads/2025/05/Image.jpg' The URL of the image
alt String '' The alt text for the image
aspectRatio String (format: 'width,height') '3,2' The aspect ratio of the image (ignored if full is true)
full true | false false Whether to display as a full-width image
border true | false true Whether to add rounded corners to the image
link_title String 'Learn More' The text for the link
link_url URL '#' The URL for the link
link_size 'large' | 'medium' 'medium' The size of the link
link_window true | false false Whether the link opens in a new window
link_icon FontAwesome class 'fa-light fa-arrow-right' The Font Awesome icon class for the link

Card Image Horizontal

Boxed Style (Default)

Boxed Style Card
Learn More

Ghost Style

Ghost Style Card
View Details

Card Image Horizontal Component Arguments

Argument Options Default Description
style 'boxed' | 'ghost' 'boxed' The style of the card
title String 'Card Title' The heading text for the card
image URL 'http://frutheme.fru.qa/app/uploads/2025/05/Image.jpg' The URL of the background image
link_title String 'Learn More' The text for the link
link_url URL '#' The URL for the link
link_size 'large' | 'medium' 'medium' The size of the link
link_window true | false false Whether the link opens in a new window
link_icon FontAwesome class 'fa-light fa-arrow-right' The Font Awesome icon class for the link

Card Image Background

Default Style with Two Buttons

Default Style Card

Learn More Contact Us

Ghost Style with One Button

Ghost Style Card

View Details

Card Image Background Component Arguments

Argument Options Default Description
image URL 'http://frutheme.fru.qa/app/uploads/2025/05/Image.jpg' The URL of the background image
title String 'Transforming Brands' The heading text for the card
style 'default' | 'ghost' 'default' The style of the card
button1_text String '' Text for the first button (no button if empty)
button1_link URL '#' URL for the first button
button1_outlined true | false true Whether the first button should be outlined
button1_icon_left FontAwesome class '' Left icon for the first button
button1_icon_right FontAwesome class '' Right icon for the first button
button2_text String '' Text for the second button (no button if empty)
button2_link URL '#' URL for the second button
button2_outlined true | false true Whether the second button should be outlined
button2_icon_left FontAwesome class '' Left icon for the second button
button2_icon_right FontAwesome class '' Right icon for the second button

Card Video

Boxed Style (Default)

Boxed Style Video Card

Boxed Style Video Card

Ghost Style

Ghost Style Video Card

Ghost Style Video Card

Card Video Component Arguments

Argument Options Default Description
style 'boxed' | 'ghost' 'boxed' The style of the card
video_url URL 'https://www.youtube.com/watch?v=u31qwQUeGuM' The YouTube video URL
image URL 'http://frutheme.fru.qa/app/uploads/2025/05/Image.jpg' The URL of the thumbnail image
title String 'Video Headline Title' The heading text for the card

Card Team

Overlay Layout (Default)

Jane Smith

Jane Smith

Chief Technology Officer

Bottom Layout with Link

John Doe

John Doe

Chief Marketing Officer

Card Team Component Arguments

Argument Options Default Description
name String 'John Scott' The team member's name
title String 'Chief Executive Officer' The team member's job title
image URL 'http://frutheme.fru.qa/app/uploads/2025/05/Columns.jpg' The URL of the team member's image
alt String 'Team Member' Alt text for the image
layout 'overlay' | 'bottom' 'overlay' The layout style
link_title String '' The text for the link (only used in 'bottom' layout)
link_url URL '#' The URL for the link (only used in 'bottom' layout)
link_window true | false false Whether the link opens in a new window (only used in 'bottom' layout)
link_icon FontAwesome class 'fa-light fa-arrow-right' The Font Awesome icon class for the link (only used in 'bottom' layout)

List

Small Size List

  • December 6
  • 10:00-12:30pm
  • List Item


Medium Size List (Default)

  • January 15
  • 2:00-4:30pm
  • Medium List Item
  • Additional Item

List Component Arguments

Argument Options Default Description
size 'small' | 'medium' 'medium' List size
items Array Array of example items Array of list items. Each item is an array with 'icon' and 'text' keys

Checkbox

Checkbox Component Arguments

Argument Options Default Description
id String 'checkbox' ID attribute for the checkbox input and 'for' attribute for the label
label String 'I agree to the terms' Text label for the checkbox





Radio Button

Stacked Radio Buttons (Default)

Horizontal Radio Buttons

Disabled State

Radio Button Component Arguments

Argument Options Default Description
id String 'radio-[random]' ID attribute for the radio input
name String 'radio-group' Name attribute for the radio input
value String '' Value attribute for the radio input
label String 'Option' Label text for the radio button
checked true | false false Whether the radio button is checked
disabled true | false false Whether the radio button is disabled
layout 'stacked' | 'horizontal' 'stacked' Layout of the radio button
class String '' Additional CSS classes to add to the radio wrapper
attributes String '' Additional HTML attributes to add to the radio input





Dropdown

Multiple Selection Dropdown with Label



Single Selection Dropdown with Label

Dropdown Component Arguments

Argument Options Default Description
id String 'dropdown' ID attribute for the dropdown
label String '' Optional label text to display above the dropdown
icon FontAwesome class 'fa-regular fa-user' Icon class for left icon
icon_unicode String '' Unicode value for left icon (e.g. 'f007')
multiple true | false true Whether multiple selections are allowed
options Array Array of fruit options Array of dropdown options. Each option is an array with 'value' and 'text' keys





Field

Field with Label (User Icon)



Email Field with Label (Envelope Icon)



Phone Field with Label (Phone Icon)

Field Component Arguments

Argument Options Default Description
id String 'field' ID attribute for the field
label String '' Optional label text to display above the field
placeholder String 'Enter your name' Placeholder text for the field
aria_label String 'Name' Aria-label attribute for accessibility
icon_unicode String 'f007' Unicode value for left icon (e.g. 'f007')
attributes String '' Additional HTML attributes to add to the field

Form

Boxed Style Form

Contact Sales

"*" indicates required fields

Would you like for a member of our team to call you?
Would you like for a member of our team to call you?


Ghost Style Form

Contact Sales Left

"*" indicates required fields

Would you like for a member of our team to call you?
Would you like for a member of our team to call you?

Form Component Arguments

Argument Options Default Description
style 'boxed' | 'ghost' 'boxed' Form style
form_id Integer 1 Gravity Form ID
title String 'Contact Sales' Form title

Filter Bar

Horizontal Boxed Filter Bar (also support vertical and ghost)

Filter Bar Component Arguments

Argument Options Default Description
style 'boxed' | 'ghost' 'ghost' Filter bar style
align 'vertical' | 'horizontal' 'vertical' Filter bar alignment

Jump Navigation

Basic Jump Navigation

Section 1 Section 2 Section 3


Jump Navigation with Custom Icons

Features Pricing Contact About

Jump Navigation Component Arguments

Argument Options Default Description
links Array Array of default links Array of link data. Each link should have 'title', 'link', and 'icon_right' keys

Link Configuration

Each link in the links array accepts the following parameters:

Parameter Options Default Description
title String 'Medium Link' Link text
link URL or anchor '#' URL or anchor the link points to
icon_right FontAwesome class 'fa-solid fa-badge-check' Icon class for the right icon

Keyline

Small Keyline



Medium Keyline (Default)



Large Keyline

Keyline Component Arguments

Argument Options Default Description
size 'small' | 'medium' | 'large' 'medium' Keyline size

Scrolling Banner

We craft custom digital experiences that engage and inspire, using cutting-edge tech
We craft custom digital experiences that engage and inspire, using cutting-edge tech
We craft custom digital experiences that engage and inspire, using cutting-edge tech
We craft custom digital experiences that engage and inspire, using cutting-edge tech

Scrolling Banner Component Arguments

Argument Options Default Description
items Array of items, each containing 'image/icon' and 'text' (string) [] An array of items to display in the scrolling banner. Each item should include a 'image' (image array) or 'icon' (fontawesome class) and 'text' (string).

Stats

Ghost Style (Default)

250+

Happy Customers



Boxed Style

15+

Years Experience

Stats Component Arguments

Argument Options Default Description
title String '250+' The title/heading for the stats component
copy String 'Happy Customers' The content/description text
style 'ghost' | 'boxed' 'ghost' The style of the component
title_size 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' 'h3' The HTML heading tag size for the title

Tabs

Horizontal Tabs (Default)

Features

Our product includes a wide range of features designed to enhance your productivity and streamline your workflow.





Vertical Tabs

About Us

Founded in 2010, our company has been at the forefront of innovation in the industry for over a decade.

Tabs Component Arguments

Argument Options Default Description
layout 'horizontal' | 'vertical' 'horizontal' The layout of the tabs (horizontal or vertical)
tabs Array Array of example tabs Array of tab data. Each tab is an array with 'title', 'icon', and 'content' keys

Copy Full

Lorem Ipsum Heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam rhoncus. Maecenas tempus, tellus eget Etiam rhoncus. Maecenas tempus, tellus eget Etiam rhoncus. Maecenas tempus, tellus eget Etiam rhoncus. Maecenas tempus, tellus eget

Lorem Ipsum Heading 2

Vivamus luctus urna sed urna ultricies ac tempor dui sagittis.

Lorem Ipsum Heading 3

In condimentum facilisis porta. Sed nec diam eu diam mattis viverra.

Lorem Ipsum Heading 4

Nulla fringilla, orci ac euismod semper, magna diam.

Lorem Ipsum Heading 5

Curabitur ullamcorper ultricies nisi. Nam eget dui.

Lorem Ipsum Heading 6

Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus.

Unordered List

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Sed do eiusmod tempor incididunt

Ordered List

  1. Ut enim ad minim veniam
  2. Quis nostrud exercitation ullamco
  3. Laboris nisi ut aliquip ex ea commodo

Copy Full Component

This component demonstrates the full typography styles available in the theme, including all heading levels (H1-H6), paragraphs, links, and list styles. It serves as a comprehensive reference for content formatting and styling.

Element Description
h1-h6 All heading levels with proper hierarchy and styling
p Paragraph text with proper line height and spacing
a Links with hover states and proper contrast
ul Unordered lists with consistent bullet styling
ol Ordered lists with numbered items

Tags

Neutral Style (Default)

Neutral Tag


Primary Style

Primary Tag


Secondary Style

Secondary Tag


Tertiary Style

Tertiary Tag


Success Style

Success Tag


Error Style

Error Tag

Tags Component Arguments

Argument Options Default Description
title String 'Tag' The text to display in the tag
icon FontAwesome class 'fa-regular fa-square-check' The Font Awesome icon class
style 'neutral' | 'primary' | 'secondary' | 'tertiary' | 'success' | 'error' 'neutral' The color style of the tag

Image

Default Image (Aspect Ratio 21:5)

Default image with 21:5 aspect ratio


Custom Aspect Ratio (16:9)

Image with 16:9 aspect ratio


Full-Width Image

Full-width image


Image with Border

Image with border


Image with Tag

Image with tag
Featured


Full-Width Image with Border

Full-width image with border


Image with Zoom on Hover

Image with zoom on hover


Full-Width Image with Zoom

Full-width image with zoom effect


Image with Tag and Zoom

Image with tag and zoom
New

Image Component Arguments

Argument Options Default Description
src URL 'http://frutheme.fru.qa/app/uploads/2025/05/Columns.jpg' The image source URL
alt String '' The alt text for the image
aspectRatio String (format: 'width,height') '21,5' The aspect ratio of the image (ignored if full is true)
full true | false false Whether to display as a full-width image (removes aspectRatio and adds flex-img class)
border true | false false Whether to add rounded corners (radiusImage class) to the image
tag Array null Optional tag to display on the image. If provided, should be an array with 'title', 'icon', and 'style' keys
zoom true | false false Whether to add zoom animation on hover

Testimonials

Boxed Style (Default)

Fruition Digital has completely transformed the way we do business. Their innovative approach, attention to detail, and dedication to our vision exceeded all expectations.

Testimonial 1

John Scott

Acme Corporation

Working with Fruition has been a game-changer for our organization. Their team consistently delivers exceptional results and provides strategic insights that have helped us grow.

Testimonial 2

Jane Doe

XYZ Industries

The level of professionalism and expertise at Fruition is unmatched. They took the time to understand our unique challenges and delivered solutions that exceeded our expectations.

Testimonial 3

Michael Johnson

Global Solutions



Ghost Style

Fruition Digital delivered exactly what we needed, when we needed it. Their team was responsive, creative, and truly understood our business objectives.

Testimonial 1

Sarah Williams

Tech Innovations

The strategic guidance and technical expertise provided by Fruition has been invaluable to our growth. They are not just vendors, they are true partners in our success.

Testimonial 2

Robert Chen

Nexus Partners

From strategy to execution, Fruition exceeded our expectations at every turn. Their team's attention to detail and commitment to quality is evident in everything they do.

Testimonial 3

Emily Rodriguez

Pinnacle Enterprises

Testimonials Component Arguments

Argument Options Default Description
alignment 'center' 'center' Alignment of the testimonials
style 'boxed' | 'ghost' 'boxed' Style of the testimonial cards
items Number '2' Number of slides to show
testimonials Array Required. Array of testimonial data Array of testimonial data. Each testimonial should have 'image_src', 'image_alt', 'name', 'company', and 'quote' keys

Timeline

Basic Timeline with Mixed Content (Some with Images, Some without)

1995

Cusetom Title Here

Aenean fermentum elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis ut felis magna. We follow a structured approach that ensures success at every stage of your project.

Water Rights Application 1995

2010

Cusetom Title Here

Aenean fermentum elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis ut felis magna. We follow a structured approach that ensures success at every stage of your project.

2018

Cusetom Title Here

Aenean fermentum elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis ut felis magna. We follow a structured approach that ensures success at every stage of your project.

Phase 1-A Construction 2018

2019

Cusetom Title Here

Aenean fermentum elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis ut felis magna. We follow a structured approach that ensures success at every stage of your project.

2023

Cusetom Title Here

Aenean fermentum elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis ut felis magna. We follow a structured approach that ensures success at every stage of your project.

Phase 1-B Construction 2023

Timeline Component Arguments

Argument Type Required Description
items Array Yes Array of timeline items

Timeline Item Configuration

Each item in the items array accepts the following parameters:

Parameter Type Required Description
year String No Year or date for the timeline event
title String No Title of the timeline event
copy String No Description text for the event
image_src URL String No Image source URL (optional)
image_alt String No Image alt text (optional)

WYSIWYG

With Rich HTML Content - Full Heading Hierarchy

Our Comprehensive Approach to Digital Excellence

Lorem ipsum dolor sit amet consectetur adipiscing elit. Ipsum maecenas dolor eu proin iaculis vitae in sed porta. Amet nullam molestie integer leo nisi diam cursus. Natoque a massa in dictumst cursus lectus ligula consectetur viverra. Discover our full range of services and see how we can transform your digital presence.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante magna. Donec eu libero sit amet quam egestas semper dapibus nunc.

Why Choose Our Services

Bibendum nullam fames ipsum dolor nunc elementum cursus. In maecenas nisi ut auctor malesuada sed. We offer comprehensive solutions that include:

  • Strategic digital planning and consultation
  • Custom web development and design
  • Search engine optimization and marketing
  • Brand identity and creative services
  • Ongoing support and maintenance

Our team brings decades of combined experience to every project. View our portfolio to see examples of our work.

Our Proven Process

Aenean fermentum elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis ut felis magna. We follow a structured approach that ensures success at every stage of your project.

Getting Started

Ready to begin your digital transformation journey? Contact our team today for a free consultation and discover how we can help you achieve your business goals.

Parking Form

Book Parking

Terminal 1 Plaza

243 Open Space

Terminal 1 Plaza

243 Open Space

All Parking Info


Parking Form Horizontal

Book Parking

Terminal 1 Plaza

243 Open Space

Terminal 1 Plaza

243 Open Space

Reservations can be made up to 30 days in advance. Avoid the hassle of searching for a spot when you arrive! SAN now offers online parking reservations for added convenience and guaranteed availability.

Flight Data Tray Examples

Arrivals

Flight

From

Time

Status

Gate

Watch

Flight #

Arriving From

12:00 PM

Cancelled

Gate 8

Flight #

Arriving From

12:00 PM

Cancelled

Gate 8

View All Arrivals & Baggage Claim Info

Flight Table Examples

Flight

From

Time

Status

Gate

Watch

Flight #

Arriving From

12:00 PM

Cancelled

Gate 8

Flight #

Arriving From

12:00 PM

Cancelled

Gate 8

Icon Social Examples




Icon Social Component Arguments

Argument Options Default Description
link URL '#' URL for the social media link (supports http/https, mailto:, tel:)
target '_blank' | '_self' | '' '_blank' Link target attribute (_blank opens in new window)
icon FontAwesome class 'fa-brands fa-facebook' FontAwesome icon class (brands, regular, solid)
title String 'Social Media Link' Link title/tooltip text for accessibility
layout 'horizontal' | 'vertical' 'horizontal' Layout display type (horizontal: inline-flex, vertical: flex)

Flyout Trigger

Basic Example

View Arrivals
|
View Departures
|
Parking Info

Flyout Trigger Component Arguments

Argument Options Default Description
links Array Empty array Array of link items
theme 'light' | 'dark' 'light' The theme of the links

Link Item Arguments

Argument Options Default Description
title String 'Link' The text content of the link
link URL '#' The URL the link points to
icon_left FontAwesome class '' The Font Awesome icon class for the left icon
icon_right FontAwesome class Automatically set based on window parameter The Font Awesome icon class for the right icon. If not specified, uses 'fa-light fa-arrow-right' for normal links and 'fa-light fa-arrow-up-right-from-square' for external links.
window true | false false Whether the link opens in a new window

Card Dine Shop Relax

A versatile card component for showcasing dining, shopping, and relaxation options.

Basic Example

Coastal Cuisine Restaurant

Coastal Cuisine Restaurant

Experience fresh seafood and coastal flavors in a relaxed atmosphere with ocean views. Our chef creates seasonal dishes using locally sourced ingredients.

123 Oceanfront Drive, Seaside
Dine
Deal
View Menu

Card Dine Shop Relax Component Arguments

Argument Options Default Description
style 'contained' | 'ghost' | 'boxed' 'contained' The style of the card
title String 'Card Title' The heading text for the card
title_size 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' 'h2' The heading size
copy String 'Card content goes here.' The paragraph text for the card
alignment 'left' | 'center' 'left' Text alignment
image URL 'https://frupress.ddev.site/app/uploads/2025/05/Image.jpg' The URL of the image
alt String '' The alt text for the image
aspectRatio String (format: 'width,height') '16,9' The aspect ratio of the image
full true | false false Whether to display as a full-width image
border true | false true Whether to add rounded corners to the image
category 'dine' | 'shop' | 'relax' 'dine' The category type
icon FontAwesome class Depends on category The Font Awesome icon class for the category
location String '' The location or address information
deal_title String '' The title for the deal tag
deal_icon FontAwesome class 'fa-regular fa-tag' The Font Awesome icon class for the deal tag
deal_style 'neutral' | 'primary' | 'secondary' | 'tertiary' | 'success' | 'error' 'primary' The style for the deal tag
link_title String 'Learn More' The text for the link
link_url URL '#' The URL for the link
link_size 'large' | 'medium' 'medium' The size of the link
link_window true | false false Whether the link opens in a new window
link_icon FontAwesome class 'fa-light fa-arrow-right' The Font Awesome icon class for the link

Tags Deals

Deal tags for displaying promotional information.

Basic Deal Tags

Deal

Tags Deals Component Arguments

Argument Options Default Description
title String 'Deal' The text to display in the deal tag
icon FontAwesome class 'fa-regular fa-tag' The Font Awesome icon class
style 'neutral' | 'primary' | 'secondary' | 'tertiary' | 'success' | 'error' 'primary' The color style of the deal tag

Image Thumbnail Slider

A component for displaying a main image with thumbnail navigation.

Basic Image Thumbnail Slider

Image 1
Image 2
Image 3
Image 4
Image 5
Image 6
Image 1
Image 2
Image 3
Image 4
Image 5
Image 6

Image Thumbnail Slider Component Arguments

Argument Type Default Description
images Array [] Array of image data. Each image should have 'url', 'alt', and 'title' keys.
aspectRatio String '4,3' The aspect ratio for the main image in format "width,height" (e.g., "4,3").
border Boolean true Whether to add rounded corners to images.
thumbsToShow Integer 4 Number of thumbnails to show at once. Thumbnails use the image component with a 1:1 aspect ratio.

Image Data Structure

Each image in the images array should have the following structure:

{
	'url': 'https://example.com/image.jpg',  // Required: URL of the image
	'alt': 'Image description',              // Optional: Alt text for accessibility
	'title': 'Image title'                   // Optional: Title for the image
}

Lorem ipsum dolor sit amet consectetur. Ipsum nibh consectetur cras sed. Lacinia donec sodales sit at amet vitae. Sed quam posuere scelerisque nulla sed convallis a vel feugiat. Sociis eu aliquet euismod.

Menu Title

Menu Title

Menu Title

Menu Title

© 2025 Company Inc | All Rights Reserved | 501c3 Nonprofit