Button Examples

Default Button (Default Icons)

Default Button (No Icon)

Disabled Button

Outlined Button

Outlined Disabled Button

Dark Theme Button

Dark Theme Outlined Button

Dark Theme Disabled Button

Button Element (renders as <button>)

Paragraph Element (renders as <p> for clickable cards)

Paragraph Element

Button Icon Examples

Default Icon Button

Outlined Icon Button

Disabled Icon Button

Small Icon Button

Custom Icon Button

Custom Icon Disabled Outlined

Accordions Examples

Ghost Accordion

Boxed Accordion

Accordion Airline Examples

Location: Terminal 3 More Info

Alert Bar Examples

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.

Checkbox Examples

Default Checkbox

Icon Styled

Ghost Style

Ghost Style, Large Size (60px)

Ghost Style, Medium Size (40px)

Ghost Style, Small Size (28px)

Background Style

Background Style, Large Size (60px)

Background Style, Medium Size (40px)

Background Style, Small Size (28px)

Links

Default Link (arrow right icon)

New Window Link (arrow-up-right icon)

Download Link (download icon)

Link with Custom Left Icon

Large Link with Explicit Icon Right Type

Link with Both Left Icon and Download

Modal Link (circle plus icon)

Card Icon Link Examples

These examples show how links appear inside card-icon components (displayed as paragraph tags with links classes)

Card Icon Link with Arrow (as paragraph)

Learn More

Card Icon Link - Large with Arrow (as paragraph)

Get Started

Card Icon Link with Download Icon (as paragraph)

Download Report

Card Icon Link with Modal Icon (as paragraph)

View Details

Multi Link

Card Icon Vertical

Default Card

Card Icon Horizontal

Card Image

Light Contained Style (Default)

Category

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

Light 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

Dark Contained Style (Default)

Category

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

Dark 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 Image and UI Overlay

Layout Left - Inside

Layout Left - Outside

Layout Right - Inside

Layout Right - Outside

Card Image Horizontal

Card Image Horizontal Featured

Healthcare

Read Time: 15 min.

Empowering Brands with Creativity and Innovation

Technology

Read Time: 10 min.

Building Better Healthcare Through Innovation

Usage Example

<?php
get_template_part('components/card-image-horizontal-featured', null, [
    'image_url' => 'https://example.com/image.jpg',
    'image_alt' => 'Doctor with patient',
    'tag'       => 'Healthcare',
    'read_time' => 'Read Time: 15 min.',
    'headline'  => 'Empowering Brands with Creativity and Innovation',
    'link'      => '#',
]);
?>

Parameters

• image_url (string): The URL for the image. Default: empty
• image_alt (string): Alt text for the image. Default: empty
• tag (string): Tag text. Default: 'Tag'
• read_time (string): Read time text. Default: 'Read Time: 15 min.'
• headline (string): The headline text. Default: 'Empowering Brands with Creativity and Innovation'
• link (string): The URL the entire card links to. Default: '#'

Card Image Horizontal Featured Hero

Healthcare

October 30, 2025

DrChrono RCM Empowers Clinicians

Russ Philpott started his counseling career in Marietta, OH after completing his internship.

Continue Reading

Usage Example

<?php
get_template_part('components/card-image-horizontal-featured-hero', null, [
    'image_url' => 'https://example.com/image.jpg',
    'image_alt' => 'Doctor with patient',
    'tag'       => 'Healthcare',
    'date'      => 'October 30, 2025',
    'headline'  => 'New Day Therapy Uses DrChrono RCM to Empower their Clinicians & Community',
    'copy'      => 'Russ Philpott graduated in 1997 with his Master\'s Degree in Counselor Education and started his counseling career in Marietta, OH after completing his internship at Marietta Memorial\'s Chemical Dependency Unit.',
    'link_text' => 'Continue Reading',
    'link'      => '#',
]);
?>

Parameters

• image_url (string): The URL for the image. Default: empty
• image_alt (string): Alt text for the image. Default: empty
• tag (string): Tag text to display on image. Default: 'Category'
• date (string): Date text. Default: 'October 30, 2025'
• headline (string): The headline text.
• copy (string): The body copy text.
• link_text (string): The link text. Default: 'Continue Reading'
• link (string): The URL the entire card links to. Default: '#'

Card Image Background

Card Image Bottom Vertical

This component features a smooth hover transition that fades between the body content (with image) and an overlay (with list and button).

Card Image Bottom Vertical (No CTA)

Patient Management

Streamline your practice with our comprehensive patient management tools. Track appointments, medical records, and billing all in one place.

Patient Management

Streamline your practice with our comprehensive patient management tools. Track appointments, medical records, and billing all in one place.

• Electronic Health Records
• Appointment Scheduling
• Billing & Insurance
• Patient Portal
• Analytics Dashboard
• HIPAA Compliant

Card Image Bottom Vertical (With CTA)

Telehealth Solutions

Connect with patients remotely through secure video consultations. Expand your reach and provide flexible care options.

Telehealth Solutions

Connect with patients remotely through secure video consultations. Expand your reach and provide flexible care options.

• HD Video Consultations
• Secure Messaging
• Screen Sharing
• Digital Prescriptions
• Session Recording

Get Started

How It Works

The card displays different content on hover:

• Default State: Shows headline, copy text, and image
• Hover State: Smoothly fades to show headline, copy text, list items, and a button

Usage Example

<?php
get_template_part('components/card-image-bottom-vertical', null, [
    'headline'   => 'Feature Item Headline',
    'copy'       => 'Lorem ipsum dolor sit amet consectetur. Sed ullamcorper tellus sed sit.',
    'image_url'  => 'https://example.com/image.jpg',
    'image_alt'  => 'Descriptive alt text',
    'list_items' => [
        'Feature one',
        'Feature two',
        'Feature three',
    ],
    'button' => [
        'text' => 'Learn More',
        'link' => '#',
    ],
]);
?>

Parameters

• headline (string): The headline text. Default: 'Feature Item Headline'
• copy (string): The body copy text. Default: Lorem ipsum text
• image_url (string): The URL for the image shown in default state. Default: empty
• image_alt (string): Alt text for the image. Default: empty
• list_items (array): Array of feature/benefit items shown on hover. Default: empty array
• button (array): Button configuration with 'text' and 'link' keys shown on hover. Default: null

Features

• Smooth fade transition (0.3s) between states
• Background color changes on hover
• Overlay positioned absolutely for seamless transition
• Pointer events disabled on hidden overlay for better UX
• Fully responsive design

Card Video

Boxed Style (Default)

Boxed Style Video Card

Ghost Style

Ghost Style Video Card

Card Team

Bottom Layout with Link

John Doe

Chief Marketing Officer

Meet John

John Doe

Chief Marketing Officer

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 Box

Usage Example

<?php
get_template_part('components/list-box', null, [
    'list_items' => [
        'Speech-to-text',
        'Mobile Application',
        'Practice Chat',
        'Document Management & Faxing',
        'Custom Macros',
        'Immunization Registries',
        'Lab Integrations',
    ],
]);
?>

Parameters

• list_items (array): Array of list item strings. Default: array with 7 example items

Notes

• Blue background (#bdceff) with white inner container
• Icons default to checkmarks (duotone circle-check) and cannot be changed
• Box shadow and rounded corners for elevated appearance
• Uses the list component internally with small size

Checkbox

Radio Button

Stacked Radio Buttons (Default)

Horizontal Radio Buttons

Disabled State

Dropdown

Multiple Selection Dropdown with Label

Single Selection Dropdown with Label

Field

Field with Label (User Icon)

Email Field with Label (Envelope Icon)

Phone Field with Label (Phone Icon)

Form

Boxed Style Form

Ghost Style Form

Filter Bar

Horizontal Ghost Filter Bar (also support vertical and ghost)

Footer Banner

Usage Example

<?php
get_template_part('components/footer-banner', null, [
    'headline'         => 'Headline Medium Length',
    'button_primary'   => [
        'text' => 'Schedule Demo',
        'link' => '#',
    ],
    'button_secondary' => [
        'text' => 'Request Quote',
        'link' => '#',
    ],
]);
?>

Parameters

• headline (string): The headline text. Default: 'Headline Medium Length'
• button_primary (array): Primary button configuration with 'text' and 'link' keys
• button_secondary (array): Secondary button configuration with 'text' and 'link' keys

Notes

• Blue background (#003ef3) with white text
• Border radius: 120px 120px 0 120px
• Uses buttons component for primary and outlined secondary buttons
• Responsive layout with headline on left and buttons on right

Jump Navigation

Basic Jump Navigation

Jump Navigation with Custom Icons

Keyline

Small Keyline

Medium Keyline (Default)

Large Keyline

Logo

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

Modal

Stats

Boxed Style

Table Examples

Default Table (ID 1)

Table with ID 2

Table with ID 3

Tabs

Horizontal Tabs (Default)

Copy Stacked

Tags

Neutral Style (Default)

Neutral Style (No Icon)

Primary Style

Image

Default Image (Aspect Ratio 21:5)

Custom Aspect Ratio (16:9)

Square Aspect Ratio with Extra Border (1:1)

Square Aspect Ratio with Extra Border and Inverted (1:1)

Full-Width Image

Image with Border

Image with Tag

Featured

Full-Width Image with Border

Image with Zoom on Hover

Full-Width Image with Zoom

Image with Tag and Zoom

New

Image and Checklist

• Speech-to-text
• Mobile Application
• Practice Chat
• Document Management & Faxing
• Custom Macros

• Speech-to-text
• Mobile Application
• Practice Chat
• Document Management & Faxing
• Custom Macros

Usage Example

<?php
get_template_part('components/image-and-checklist', null, [
    'image_url'  => 'https://frutheme.fru.qa/app/uploads/2025/05/Image.jpg',
    'image_alt'  => 'Doctor with patient',
    'list_items' => [
        'Speech-to-text',
        'Mobile Application',
        'Practice Chat',
        'Document Management & Faxing',
        'Custom Macros',
    ],
    'type'       => 'left', // or 'right'
]);
?>

Parameters

• image_url (string): The URL for the image.
• image_alt (string): Alt text for the image. Default: empty
• list_items (array): Array of list item strings (maximum 6 items). Default: array with 5 example items
• type (string): Position of list box: 'left' or 'right'. Default: 'left'

Notes

• Users can add up to 6 list items
• Icons default to checkmarks (duotone circle-check) and cannot be changed
• List box has a shadow and blue background with white inner container
• Image uses the standard image component with 600x600 aspect ratio

Image UI Overlay

Usage Example

<?php
get_template_part('components/image-ui-overlay', null, [
    'image_url' => 'https://frutheme.fru.qa/app/uploads/2025/05/Image.jpg',
    'image_alt' => 'Doctor with patient',
    'overlay_1' => [
        'enabled' => true,
        'image'   => 'https://drchronowp.wpenginepowered.com/wp-content/uploads/2025/11/Text-1.png',
        'position' => [
            'bottom' => '-39.92px',
            'left'   => '20px',
        ],
    ],
    'overlay_2' => [
        'enabled' => true,
        'image'   => 'https://drchronowp.wpenginepowered.com/wp-content/uploads/2025/11/Text-1.png',
        'position' => [
            'bottom' => '32px',
            'left'   => '32px',
        ],
    ],
    'overlay_3' => [
        'enabled' => true,
        'image'   => 'https://drchronowp.wpenginepowered.com/wp-content/uploads/2025/11/Text-1.png',
        'position' => [
            'bottom' => '139px',
            'right'  => '-28px',
        ],
    ],
]);
?>

Parameters

• image_url (string): The URL for the background image.
• image_alt (string): Alt text for the image. Default: empty
• overlay_1 (array): Configuration for first UI overlay. Default: null
  • enabled (bool): Whether to show this overlay
  • image (string): URL to the UI graphic image (SVG or PNG)
  • position (array): Position with 'bottom' and 'left' values
• overlay_2 (array): Configuration for second UI overlay. Default: null (same structure as overlay_1)
• overlay_3 (array): Configuration for third UI overlay. Default: null (same structure as overlay_1, uses 'right' instead of 'left')

Notes

• Each overlay can be toggled on/off using the 'enabled' parameter
• UI graphics should be provided as SVG or PNG images
• Position values can be adjusted using CSS units (px, %, etc.)
• Overlays are absolutely positioned relative to the image container

Testimonials

Boxed Style (Default)

See Case Study

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

See Case Study

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

See Case Study

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

See Case Study

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

See Case Study

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

See Case Study

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

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.

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.

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.

WYSIWYG

With Rich HTML Content - Full Heading Hierarchy

Image Gallery

Default Gallery

Center mode

Flight Data Tray Examples

Flight Table Examples

Icon Social Examples

Default Style

Light Style

Vertical Layout

Card Document

Default Card

Card Event

Card Pricing

Usage Example

<?php
get_template_part('components/card-pricing', null, [
    'title'       => 'Pricing Plan',
    'description' => 'Lorem ipsum dolor sit amet consectetur.',
    'list_items'  => [
        'List Item',
        'List Item',
        'List Item',
        'List Item',
        'List Item',
    ],
    'button_text' => 'Optional Button Style 1 or 2',
    'button_link' => '#',
    'button_type' => 'primary',
    'button_size' => 'medium',
]);
?>

Parameters

• title (string): The pricing plan title. Default: 'Pricing Plan'
• description (string): The pricing plan description. Default: 'Lorem ipsum dolor sit amet consectetur.'
• list_items (array): Array of list item strings. Default: array with 5 'List Item' entries
• button_text (string): The button text. Default: 'Optional Button Style 1 or 2'
• button_link (string): The button URL. Default: '#'
• button_type (string): Button type: 'primary' or 'secondary'. Default: 'primary'
• button_size (string): Button size: 'small', 'medium', or 'large'. Default: 'medium'

Flyout Trigger

Basic Example

Card Dine Shop Relax

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

Basic Example

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

Tags Deals

Deal tags for displaying promotional information.

Image Thumbnail Slider

A component for displaying a main image with thumbnail navigation.

Basic Image Thumbnail Slider

{
	'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
}