Accordions Examples

Boxed Accordion

What is the difference between organic and paid results?

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

Breadcrumbs

Home Components

Breadcrumbs Component Arguments

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

Button Examples

Default Button (Default Icons)

Call To Action Outlined Button

Disabled Button

Outlined Button

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

Text Only

Dark Outline

Text Only

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

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

Card Basic Example

Director of Awesomeness

steph@sbvmwd.com 555-555-5555

Card Basic Component Arguments

Argument	Options	Default	Description
`title`	String	`''`	The card heading/title
`body`	String	`''`	The card body text
`links`	Array	`[]`	Links for CTA section
`icon`	Boolean	`true`	Show icon in links

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.

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.

View Details

Ghost Style Card Center

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

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_right`	`'arrow'` \| `'new_window'` \| `'download'` \| `'modal'` \| `''`	`'arrow'`	The type of right icon for the link

Card Icon Horizontal

Boxed Style

Location

616 E Speer Blvd 3rd Floor, Denver, CO

Boxed (no title)

Location

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)

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

Card with Wave Effect

Ocean-Inspired Design

Experience the beauty of fluid design with our wave effect. This creates a unique visual element that adds depth and movement to your content.

Explore Wave

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
`wave`	`true` \| `false`	`false`	Whether to apply the wave clip-path effect to the card
`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

Ghost Style (Default - No Hover Effect)

Transforming Brands

Call to Action

Background Card with Wave Effect (No Hover Effect)

Ocean-Inspired Background

Explore Wave

Hover Reveal Mode - Copy and CTA appear on hover

Discover More

This copy text appears below the title on hover with a smooth fade-in animation

Learn More

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
`wave`	`true` \| `false`	`false`	Whether to apply the wave clip-path effect to the background card
`hover_reveal_mode`	`true` \| `false`	`false`	Enable to hide copy and CTA by default, showing them only on hover
`copy`	String	`''`	Additional copy text that appears on hover (when hover_reveal_mode is enabled)
`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 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 Logo

Card Logo Example

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 Logo Component Arguments

Argument	Options	Default	Description
`title`	String	`'Card Title'`	The heading text for the card
`copy`	String	`''`	The paragraph text for the card
`title_size`	`'h1'` \| `'h2'` \| `'h3'` \| `'h4'` \| `'h5'` \| `'h6'`	`'h2'`	The heading size
`logo_url`	URL	`'https://frutheme.fru.qa/app/uploads/2023/03/Logo-Horizontal.png'`	The URL of the logo image
`logo_alt`	String	`''`	Alt text for the logo
`logo_width`	Number (pixels)	`'200'`	The width of the logo in pixels
`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
`icon_right`	FontAwesome class	`'fa-light fa-arrow-right'`	The Font Awesome icon class for the link

Card Team

Bottom Layout with Link

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)

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

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

Ut enim ad minim veniam
Quis nostrud exercitation ullamco
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

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

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

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

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)

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

Image

Image with Border

Full-Width Image with Border

Image with Zoom on Hover

Full-Width Image with 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

Image Gallery

Default Gallery

Center mode

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 gallery images. Each image should have 'url', 'alt', 'title', and 'description' keys

Image Thumbnail Slider

A component for displaying a main image with thumbnail navigation.

Basic Image Thumbnail Slider

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
}

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

Links

Default Link (arrow right icon)

Default Link

New Window Link (arrow-up-right icon)

External Link

Download Link (download icon)

Download PDF

Link with Custom Left Icon

User Profile

Large Link with Explicit Icon Right Type

Large New Window

Link with Both Left Icon and Download

Download Report

Modal Link (circle plus icon)

Open Details

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
`icon_right`	`''` \| `'arrow'` \| `'new_window'` \| `'download'` \| `'modal'`	`''`	Type of right icon and link behavior: - `''`: No icon - `arrow`: fa-light fa-arrow-right (standard link) - `new_window`: fa-light fa-arrow-up-right-from-square (opens in new tab/window) - `download`: fa-solid fa-arrow-down-to-line (opens in new tab/window) - `modal`: fa-solid fa-circle-plus (for modal/popup triggers)
`icon_left`	Font Awesome class	`''`	Optional Font Awesome icon class for the left icon (e.g., 'fa-solid fa-user', 'fa-light fa-arrow-left')
`theme`	`'light'` \| `'dark'`	`'light'`	The theme of the link
`class`	String	`''`	Additional CSS classes to add to the link

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`

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

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

Modal Component Arguments

Argument	Options	Default	Description
This component currently accepts no arguments and displays a default modal implementation.

Stats

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

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

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

Card Species

Western Spadefoot Toad

Spea hammondii - Amphibian

See Details

Western Spadefoot Toad

Spea hammondii - Amphibian

Size: 1.2 to 2.5 inches long

Habitat: Grasslands, chaparral, scrub, oak woodlands

Diet: Insects

Fun Fact: These toads can emit a peanut-scented secretion to deter predators

Hide Details

Button Group Example

Team Category Team Category Team Category Team Category

Accordions Examples

Accordion Component Arguments

Breadcrumbs

Breadcrumbs Component Arguments

Button Examples

Button Component Arguments

Button Icon Examples

Button Icon Component Arguments

Callout

Callout Component Arguments

Card Basic Example

Stephanie Chesin

Card Basic Component Arguments

Card Icon

Transforming Brands with Creativity

Transforming Brands with Creativity

Transforming Brands with Creativity

Transforming Brands with Creativity

Card Icon Component Arguments

Card Icon Horizontal

Location

Card Icon Horizontal Component Arguments

Card Image

Transforming Brands with Creativity

Transforming Brands with Creativity

Ocean-Inspired Design

Card Image Component Arguments

Card Image Background

Transforming Brands

Ocean-Inspired Background

Discover More

Card Image Background Component Arguments

Card Image Horizontal

Boxed Style Card

Ghost Style Card

Card Image Horizontal Component Arguments

Card Logo

Transforming Brands with Creativity

Card Logo Component Arguments

Card Team

John Doe

John Doe

Card Team Component Arguments

Card Video

Boxed Style Video Card

Ghost Style Video Card

Card Video Component Arguments

Copy Full

Lorem Ipsum Heading 1

Lorem Ipsum Heading 2

Lorem Ipsum Heading 3

Lorem Ipsum Heading 4

Lorem Ipsum Heading 5

Lorem Ipsum Heading 6

Unordered List

Ordered List

Copy Full Component

Filter Bar

Filter Bar Component Arguments

Form

Contact Sales

Contact Sales Left

Form Component Arguments

Checkbox

Checkbox Component Arguments

Radio Button

Radio Button Component Arguments

Dropdown

Dropdown Component Arguments

Field

Field Component Arguments

Icon Social Examples

Icon Social Component Arguments

Icon Styled

Icon Styled Component Arguments

Image

Image Component Arguments

Image Gallery

Image Gallery Component Arguments

Image Thumbnail Slider