Skip to main content

Components Overview

Our component library provides a comprehensive set of pre-built, accessible, and customizable UI elements to help you build your website faster.

Component Categories​

Hero Panels​

Hero components are sections that are exclusive to the top of the page and can feature both static and interactive content.

Content Panels​

Content panels are sections that form the core elements of a website. There are many layout options you can use to best suit the content and objectives of the brand.

Responsive Blocks​

The Responsive block is a highly flexible component, that has been designed to allow for a number of flexible card based layouts.

Sliders​

Slider components share many similarities with the responsive block components, but are structurally different.

Accordions and Tabs​

The Accordion component displays a list of sections that expand to reveal more content. Tabs can be used to switch between different content groupings and are recommended to organise content at a high level.

Building Blocks​

General purpose building blocks like Modal, View Taxonomy filter, etc.

Dynamic content​

Building blocks for dynamic teasers. Teasers can be responsive blocks or sliders and available for page, article and product content type.

General components​

General purpose components like Author information and Firebase Popup.

E-commerce​

Shopping functionality including Cart, Products, and Coupons.

Usage Principle​

All components are designed to be:

  1. Composable: Can be nested and combined to create complex UIs.
  2. Customizable: Styled via props or CSS variables.
  3. Accessible: Built with A11y standards in mind.
  4. Responsive: adapt to any screen size.

Example Usage​

Here's a quick example of how to use a Button component:

import { Button } from '@website-factory/components';

function MyPage() {
  return (
    <div>
      <h1>Welcome</h1>
      <Button variant="primary" size="lg" onClick={() => alert('Clicked!')}>
        Get Started
      </Button>
    </div>
  );
}