YourOnline UK

Software Services and website builds

Component Demo Page

This page demonstrates components and their Svelte 5 compatibility.

A - E

Accordion Component

Expandable accordion with customizable headers, styles, and content.

Status: ✅ Svelte 5 Ready (Using $props, $state, $effect, and {@render})

Rating: ★★★★☆ 4/5

Accordion Content

This is the expandable content area of the accordion component. You can place any content here including text, images, forms, or other components.

The accordion handles the expand/collapse functionality automatically and is fully accessible with proper ARIA attributes for screen readers.

This example uses the header and openHeader attributes to change the header for the open state.

This second example demonstrates the accordion with different styling options through the headerStyle and variant props.

  • Custom header styles
  • Different variants
  • Fully responsive design

Component Notes:

  • Uses $props for component props
  • Uses $state for tracking open/closed state
  • Uses $effect for dynamic styling
  • Renders children content via {@render children()}
  • Includes accessibility attributes (ARIA)
  • Supports different visual variants

Potential improvements:

  • Add transition animation for smoother open/close
  • Add programmatic control methods (open/close) for parent components

AnimatedScroll Component

Animated down arrow button that smoothly scrolls to the specified section.

Status: ✅ Svelte 5 Ready (Using $props and $state)

Rating: ★★★☆☆ 3/5

Demo Section

Scroll down to see the next section. The animated arrow will fade out as you scroll.

Next Section

This is the target section that the AnimatedScroll component scrolls to.

Component Notes:

  • Uses $props for section ID targeting
  • Uses $state to track scroll position
  • Implements smooth scrolling behavior
  • Fades out after user begins scrolling
  • Browser-safe with $app/environment check
  • Accessible with proper aria-label

Potential improvements:

  • Add customizable animation style options
  • Improve scroll offset calculation for fixed headers
  • Add support for custom icon/content

Band Component

Full-screen background with image or color and content panel.

Status: ⚠️ Needs Update (Currently using export let and slot)

Rating: ★★☆☆☆ 2/5

Example Band Header

Band Component Demo

This component creates a full-width section with background image or color and a semi-transparent panel for content.

Photo credit: Unsplash

Component Notes:

  • Uses dynamic style generation based on props
  • Responsive design with media queries

Required improvements:

  • Update to use $props instead of export let
  • Convert slot to children with {@render}

Potential enhancements:

  • Add more background options (gradients, patterns)
  • Improve responsive behavior on very small screens
  • Add parallax scrolling option

Box Component

Styled container with title and customizable width variants.

Status: ⚠️ Needs Update (Currently using export let and slot)

Rating: ★★☆☆☆ 2/5

Full Width Box

A full-width box with rounded corners.

It can contain any content and will take up the full available width.

Half Width Box

A half-width box with sharp corners.

On smaller screens, it maintains a minimum width for better readability.

Quarter Width Box

This is a quarter-width box.

Component Notes:

  • Currently uses older export syntax (needs update to $props)
  • Uses slot for content (should use children prop with {@render})
  • Direct DOM manipulation should be moved to $effect
  • Supports multiple width variants and color schemes
  • Fully responsive with media queries

Required improvements:

  • Update to use $props
  • Replace direct DOM manipulation with $effect
  • Convert slot to children prop

Potential enhancements:

  • Add more styling variants
  • Improve box shadow/border options
  • Add animation options for entrance/hover

Card Component

Versatile content card with title, image, description and action buttons.

Status: ⚠️ Needs Update (Should use $props and children)

Rating: ★★★☆☆ 3/5

Placeholder image

Basic Card

This is a simple card with just title, image and description.

Cards are useful for displaying content in a concise format.

Placeholder image 2

Card with Button

This card includes a call-to-action button that links to another page.

Custom Styled Card (no image)

This card demonstrates custom styling options.

Component Notes:

  • Needs to be updated to use $props for component properties
  • Should use children prop with {@render} for content
  • Supports custom styling through class props
  • Responsive design for different screen sizes
  • Optional button with customizable text and link

Required improvements:

  • Update to use $props
  • Convert slot to children prop

Potential enhancements:

  • Add hover effects/animations
  • Support for multiple buttons/actions
  • Add card variants (horizontal, featured)
  • Support for badges/tags
F - P

Feature Component

This component is designed to showcase a feature with a heading, left side, right side, and footer.

Status: ✅ Svelte 5 Ready (Using snippet syntax and $derived)

Rating: ★★★★★ 5/5

Demo Heading

Placeholder

Feature Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget felis vel augue venenatis fringilla. Proin hendrerit magna in nisl malesuada, vel mollis ante facilisis.

  • Feature point one
  • Feature point two
  • Feature point three

Footer information goes here

Component Notes:

  • Already uses Svelte 5 snippet syntax
  • Uses $derived for reactive styling
  • Renders content via {@render} statements

Potential enhancements:

  • Add more layout variants (e.g., centered, zigzag)
  • Add animation options for section entrance
  • Improve tablet-specific layouts

Footer Component

Site footer with navigation links, theme selection, and social media icons.

Status: ✅ Updated to Svelte 5 (Using $state and $effect)

Rating: ★★★★☆ 4/5

Component Notes:

  • Uses $state for theme and dark mode tracking
  • Uses $effect to update DOM when state changes
  • Theme switching works as before but with reactive state

Potential enhancements:

  • Make footer columns customizable via props
  • Add newsletter signup option
  • Support more theme variants
  • Add language selector integration

Header Component

Page header with navigation, mobile responsive menu, and theme toggle.

Status: ✅ Svelte 5 Ready (Using $state, {@render} and snippet)

Rating: ★★★★☆ 4/5

YourOnline.App

Your business, in perfect rhythm

Component Notes:

  • Uses $state for reactive state management
  • Implements children as a snippet
  • Uses {@render} to display child content
  • Mobile responsive with toggle menu
  • Includes dark mode toggle functionality

Potential enhancements:

  • Add sticky header option with scroll behavior
  • Support for mega menu dropdown
  • Add search integration option
  • Improve mobile menu animations

Icon Component

Reusable icon component that renders SVG icons with customizable styles.

Status: ✅ Svelte 5 Ready (Using $props)

Rating: ★★★☆☆ 4/5

home
user
settings
check
notification
warning
Information info

Component Notes:

  • Uses $props for component properties
  • To be implemented
  • Renders SVG icons from a predefined set
  • Supports custom colors and sizes
  • Accessible with proper ARIA attributes
  • Extensible with ability to add new icons

Potential enhancements:

  • Add more icon variants to the library
  • Support for custom icon imports
  • Add animation options (spin, pulse, etc.)
  • Add icon groups/composition

Image Component

Enhanced image component with lazy loading, responsive sizing, and optional caption.

Status: ⚠️ Needs Update (Should use $props)

Rating: ★★★☆☆ 3/5

Basic Image

Office workers collaborating

Image with Caption

Team meeting with technology
Team members collaborating on a new project

Responsive Image

Responsive design across devices

Component Notes:

  • Implement lazy loading for better performance
  • Supports responsive sizing with aspect ratio preservation
  • Optional caption
  • Accessible with proper alt text and loading attributes
  • Uses picture element for various target resolutions

Required improvements:

  • Update to use $props
  • Refactor image loading logic

Potential enhancements:

  • Add loading placeholder/skeleton
  • Add lightbox/zoom functionality
  • Support for image galleries
  • Add blur-up effect for progressive loading

Input Component

Enhanced form input with validation, styling options, and accessibility features.

Rating: ★★★☆☆ 3/5

Text Input

Email Input with Validation

Password Input

Must be at least 8 characters

Input with Icon and Help Text

Enter keywords to search our knowledge base

Component Notes:

  • Should use $state for input value and validation state
  • Could implement $derived for validation logic
  • Supports various input types (text, email, password, etc)
  • Includes built-in validation options
  • Accessible with proper labels and ARIA attributes
  • Supports icons, help text and error messages

Required improvements:

  • Update to use $props and $state
  • Improve validation with $derived

Potential enhancements:

  • Add more input types (datepicker, autocomplete)
  • Add character count for text fields
  • Support for custom validation rules
  • Add input masks for formatted fields

Pricing Components

Pricing display components including PricingCard and PricingGrid.

Status: ⚠️ Needs Update (Should use $props and children)

Rating: ★★★☆☆ 3/5

Pricing Options

Basic

Learn more
Specialist Contract: £49 /per month

Professional

Learn more
Specialist Contract: £99 /per month

Enterprise

Learn more
Specialist Contract: £199 /per month

Feature Comparison

Pricing Plans

Choose the plan that fits your needs. Prices for weekly/monthly are fixed cost alternatives to hourly rate charging. New clients pay a refundable commencement fee of 50% up-front, then invoiced weekly/monthly after 14 days. Specialist is a solo developer. Team is a supervised team of remote developers. We recommend teams for larger projects, and specialist for urgent and short term projects.

Prices subject to monthly review (depending upon demand). Book now at the stated price for a renewable contract for up to six months.

Learn more
Specialist Contract: £49 /month

Learn more
Specialist Contract: £99 /month

Learn more
Specialist Contract: £199 /month

Simple terms

UK clients may be billed in UK£. VAT is not included in the price. Clients outside the UK may be billed in US$ in advance.

Initial contract invoiced in advance on agreed payment terms. We provide a shared timesheet for hourly rate contract. FREE Website is published on a YourOnline.uk subdomain. Updates are published for your approval and updates can be reverted. Terms and Conditions.

Development and staging include hosting for the duration of the project. Domains and hosting of live sites is not included.

Component Notes:

  • Should use children prop with {@render} for feature lists
  • PricingCard supports highlighting for featured plans
  • PricingGrid provides tabular feature comparison
  • Responsive design adapts to different screen sizes
  • Could implement $derived for price calculations (monthly vs annual)

Required improvements:

  • Update to use $props
  • Refactor to use children with {@render}

Potential enhancements:

  • Add toggle for monthly/annual pricing
  • Add currency formatting options
  • Improve mobile layout for feature comparison
  • Add animation for highlighted plans
Q - Z

SpecialOffer Component

Eye-catching promotional component with time-sensitive offers and pricing details.

Status: ⚠️ Needs Update (Should use $props instead of export)

Rating: ★★★☆☆ 3/5

Special Offer

Website Launch Offer

No special offer

We are not running a special offer at this time. As we start with a free site, what more do you need? We will only do this until we have a full schedule, so start today if you know what you want.

If you are unsure, let's chat.

Component Notes:

  • Should use $props instead of export let for Svelte 5
  • Uses gradient background for visual impact
  • Displays original and discounted prices
  • Includes expiration date for urgency
  • Features an eye-catching offer badge
  • Implements hover effects on call-to-action button
  • Could use $derived for calculating savings amount

Required improvements:

  • Update to use $props
  • Use $derived for savings calculation

Potential enhancements:

  • Add countdown timer option
  • Support for promotional codes
  • Add more design variants
  • Improve responsive behavior on small screens

Testimonial Components

Customer testimonial display components including TestimonialCard and TestimonialGrid.

Status: ⚠️ Needs Update (Should use $props and children)

Rating: ★★★☆☆ 3/5

What Our Customers Say

What Our Customers Say

Discover how Cadence CRM helps businesses find their rhythm

Component Notes:

  • Should use $props for component properties
  • Should use children prop with {@render} for testimonial content
  • TestimonialCard supports star ratings and featured highlighting
  • TestimonialGrid provides responsive layout for multiple testimonials
  • Includes accessible image alt text generation from name and company
  • Supports optional customer photos with fallback avatars

Required improvements:

  • Update to use $props
  • Convert slots to children prop

Potential enhancements:

  • Add carousel/slider option for multiple testimonials
  • Add animation for featured testimonials
  • Support for video testimonials
  • Improve star rating visualization