Button Examples

Default Button (Default Icons)

Call To Action Outlined Button

Disabled Button

Outlined Button

Outlined Disabled Button

Outlined Disabled

Small Button

Custom Right Icon

Left 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 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

Alert Bar Examples

Important announcement

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')

Breadcrumbs

Home Components

Breadcrumbs Component Arguments

Argument	Options	Default	Description
`style`	`'boxed'` \| `'ghost'`	`'ghost'`	The style of breadcrumbs

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

Links

Medium Size Link (Default)

Medium Link

Large Size Link

Large Link

Link with New Window (shows left icon)

External Link

Link with Custom Icon

Custom Icon Link

Link without Right Icon

No Right Icon

Link without Right Icon

No Right Icon

Links Component Arguments

Argument	Options	Default	Description
`title`	String	`'Link'`	The text content of the link
`link`	URL	`'#'`	The URL the link points to
`size`	`'large'` \| `'medium'`	`'medium'`	The size of the link
`window`	`true` \| `false`	`false`	Whether the link should open in a new window
`icon`	FontAwesome class	`'fa-light fa-arrow-right'`	The Font Awesome icon class for the right icon

Multi Link

Multi Link Component Arguments

Argument	Options	Default	Description
`columns`	`auto` (Auto) `col-md-6` (2 Columns) `col-md-4` (3 Columns) `col-lg-3` (4 Columns)	`col-lg-3` (4 Columns)	The number of columns for the links. Default 'auto'
`links`	URLs	`'#'`	Array of link data. Each link should have `icon` `link` `title` `url` `target`

Card Icon & Card Icon Horizontal

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

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.

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.

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 Image

Contained Style (Default)

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.

Learn More

Boxed 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.

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

Ghost Style

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

Chief Technology Officer

Jane Smith

Chief Technology Officer

Bottom Layout with Link

John Doe

Chief Marketing Officer

John Doe

Chief Marketing Officer

View LinkedIn Profile

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

I agree to the terms and conditions

Subscribe to our newsletter

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)

Option 1 Option 2 Option 3

Horizontal Radio Buttons

Option 1 Option 2 Option 3

Disabled State

Disabled Unchecked Disabled Checked

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)

Full Name

Email Field with Label (Envelope Icon)

Email Address

Phone Field with Label (Phone Icon)

Phone Number

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

Ghost Style Form

Contact Sales Left

"*" indicates required fields

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)

First Name

Last Name

Email

Filter Bar Component Arguments

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

Jump Navigation

Medium Link Medium Link Medium Link

Keyline

Small Keyline

Medium Keyline (Default)

Large Keyline

Keyline Component Arguments

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

Logo

Logo Component Arguments

Argument	Options	Default	Description
`url`	URL	`'http://frutheme.fru.qa/app/uploads/2025/05/Logo-Horizontal.png'`	The URL of the logo image
`alt`	String	`''`	The alt text for the logo image
`width`	String	`'200'`	The width of the logo in pixels

Logo Client

Logo Client Component Arguments

Argument	Options	Default	Description
`url`	URL	`'http://frutheme.fru.qa/app/uploads/2025/05/Logo-Horizontal.png'`	The URL of the logo image
`alt`	String	`''`	The alt text for the logo image
`width`	String	`'200'`	The width of the logo in pixels

Modal

Empowering Brands with Creativity and Innovation

We craft custom digital experiences that engage and inspire, using cutting-edge technology and strategy to help brands thrive.

Transforming Brands with Creativity

We are a full-service digital agency dedicated to helping brands succeed in the ever-evolving online landscape. Our team of experts combines creativity, strategy, and cutting-edge technology to craft solutions that drive real results. Whether you need a stunning website, an engaging digital campaign, or a complete brand transformation, we have the expertise to bring your vision to life. We understand the importance of delivering user-centric experiences that resonate with your audience and keep them coming back. With a data-driven approach, we ensure every project is optimized for maximum impact and measurable success. Collaboration is at the core of our process, as we work closely with you to understand your goals and exceed expectations.

Empowering Brands with Creativity and Innovation

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.

External Link

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

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

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

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

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 6:5)

Default Image (Aspect Ratio 16:9)

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

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.

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.

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.

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.

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.

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.

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

WYSIWYG

Basic Usage with Just Content

Custom Heading

Custom paragraph text here.

With Content and a Single Button

Content with Button

This example includes a button.

Learn More

With Content, Multiple Buttons, and a Link

Full Example

Lorem ipsum dolor sit amet consectetur. Ipsum maecenas dolor eu proin iaculis vitae in sed. Amet nullam molestie integer leo nisi. Natoque a massa in dictumst cursus lectus ligula consectetur. Consectetur egestas mi nunc et. Bibendum nullam fames ipsum dolor nunc elementum. In maecenas nisi ut auctor malesuada sed.

List item 1
List item 2
List item 3

Primary Button Secondary Button Learn More

With Rich HTML Content

Rich HTML Content

This example demonstrates using rich HTML in the content area.

Subheading

You can include multiple paragraphs, formatting, and other HTML elements.

This is a blockquote example.

WYSIWYG Component Arguments

Argument	Options	Default	Description
`content`	String (HTML)	Sample heading and paragraph	HTML content for the main copy area
`buttons`	Array	`[]` (empty array)	Array of button configurations
`links`	Array	`[]` (empty array)	Array of link configurations

Button Configuration

Each button in the buttons array accepts the following parameters:

Parameter	Options	Default	Description
`text`	String	`'Call To Action'`	Button text
`link`	URL	`'#'`	URL for the button link
`outlined`	`true` \| `false`	`false`	Whether the button has outlined style
`icon_left`	FontAwesome class	`''`	Icon class for left icon
`icon_right`	FontAwesome class	`''`	Icon class for right icon
`new_window`	`true` \| `false`	`false`	Whether to open the link in a new window

Link Configuration

Each link in the links array accepts the following parameters:

Parameter	Options	Default	Description
`title`	String	`'Link'`	Link text
`link`	URL	`'#'`	URL the link points to
`size`	`'large'` \| `'medium'`	`'medium'`	Size of the link
`window`	`true` \| `false`	`false`	Whether the link opens in a new window
`icon_right`	FontAwesome class	`'fa-light fa-arrow-right'`	Icon class for the right icon

Image Gallery

Default Gallery

Center mode

Image 1

Description for Image 1

Image 2

Description for Image 2

Image 3

Description for Image 3

Image Gallery Component Arguments

Argument	Options	Default	Description
`mode`	Boolean	False	True to enable Center mode
`item_to_show`	Number	`3`	Number of Items to Show (minimum 3)
`gallery`	Array	`[]` (empty array)	Array of link gallery images

Banner Mini

Launch Your Career with BNP Associates — Where Innovation Meets Opportunity

View Careers

Banner Mini Component Arguments

Argument	Options	Default	Description
`title`	String	Banner Mini Title	The title/heading for the banner
`button`	Array	`[]` (empty array)	Array of button arguments. Each button should have 'text', 'link', 'outlined', and optionally 'icon_left' or 'icon_right'
`background`	String	`/themes/bnp-associates/images/banne-mini-bg.svg`	Background image URL for the banner. Default is a placeholder image