Props

heading

This takes in the heading for the title.

white

This will help reverse the color

eg:

Additional Info

• If you spot any edge cases regarding the Heading, let me know.

Props

imageURL

This takes in the relative URL of the image.

alt

The alt description goes here.

customClass

This takes in class that you would want to add to svg.

eg:

Additional Info

• Its best to add it inside a flex child.
• Should not be used in SSR Pages

Props

imageURL

This takes in the relative URL of the image.

alt

The alt description goes here.

customClass

This takes in class that you would want to add to svg.

tangerine

This updates the color of the background element. By default its green.

eg:

Additional Info

• Its best to add it inside a flex child.
• Should not be used in SSR Pages

Props

imageURL

This takes in the relative URL of the image.

alt

The alt description goes here.

customClass

This takes in class that you would want to add to svg.

primary || secondary

This two different styles of background animation.

reverse

This reverses the direction of the background elements.

eg:

Additional Info

• Its best to add it inside a flex child.
• Should not be used in SSR Pages

Props

firstImage

This takes in an object of src & alt. eg: {src:'location of the image', alt:'alt description of the image'}

secondImage

This takes in an object of src & alt. eg: {src:'location of the image', alt:'alt description of the image'}

reverse

This will reverse the order of the html element

top

This will change the vertical alignment of the component

eg:

Additional Info

• Its best to add it inside a flex child.
• Should not be used in SSR Pages

Props

firstImage

This takes in an object of src & alt. eg: {src:'location of the image', alt:'alt description of the image'}

secondImage

This takes in an object of src & alt. eg: {src:'location of the image', alt:'alt description of the image'}

reverse

This will reverse the order of the html element

top

This will change the vertical alignment of the component

eg:

Additional Info

• Its best to add it inside a flex child.
• Should not be used in SSR Pages

Props

firstImage

This takes in an object of src & alt. eg: {src:'location of the image', alt:'alt description of the image'}

secondImage

This takes in an object of src & alt. eg: {src:'location of the image', alt:'alt description of the image'}

thirdImage

This takes in an object of src & alt. eg: {src:'location of the image', alt:'alt description of the image'}

eg:

Additional Info

• Its best to add it inside a flex child.
• Should not be used in SSR Pages

Props

green

This make the bakes green themed. By default its white.

eg:

Additional Info

• The width needs to adjusted through parent, as it is full width.

Props

customClass

This takes in class that you would want to add to svg.

size

This prop is set the height of the size of the element

white, tangerine, green

This is to set the color of the element

eg:

Additional Info

• Normal 'class' wont work
• Do not add color prop if you want transparent element

Props

name

This takes in the name of the tab. If there are multiple abs in a page, make sure this is unique.

headings

This takes in an array of headings. The content inside the component should have "tab-content" with the corresponding heading.

horizontal

This will make the tabs horizontal, only works on desktop

light || dark

This will set the tabs color palette to light || dark.

customClass

This takes in any custom classes, you want to add to the button or a tag.

eg:

Additional Info

• The "tab-content" is a must

Props

heading

This is the heading of the alert component.

info

This is for the green color palette indicating non-threatening content.

alert

This is for the yellow color palette indicating threatening content.

danger

This is for the red color palette indicating dangerous content

customClass

This takes in any custom classes, you want to add to the button or a tag.

eg:

Additional Info

• If none of info || alert || danger is passed through it would create the white color version.

Props

heading

This is the heading of the each accordion item component. Each accordion item must have heading

eg:

Additional Info

• The colors of the contents need to be managed separately.

Props

top || right || left || bottom

This specifies the direction of the tooltip information. Each tooltip item must have a direction

description

This specifies the information of the tooltip. Each tooltip item must have a description

eg:

Additional Info

• Best suited for small elements

Props

main || soft || outline || textonly

One of these will help you define the style of the Modal Button.

id

Modal Button should have 'id' this will help map the modal to the modal button.

light || dark

The sets the color mode of the Modal Button

cta

This helps set the CTA of the modal button.

customClass

This helps add custom class to the modal button

forID

This helps connect the modal button to the modal component.

heading

Heading is required to add a header to the modal component.

eg:

Additional Info

• Anything can be added as children in the modal including forms.

Props

timer

This takes in a number that can be used to set the countdown for the PopUp.

imageURL

this takes in the URL for image.

href

This the click through link for the PopUp.

description

This takes in the description for the aria-label.

eg:

Additional Info

• This component can support multiple popups in a page without conflict.
• Just make sure the timer is different.

Props

timer

This takes in a number that can be used to set the countdown for the PopUp.

description

This takes in the description for the aria-label.

eg:

Additional Info

• This component can support multiple popups in a page without conflict.
• Just make sure the timer is different.

Props

id

Carousel component requires an unique id.

nav

'nav' is boolean value that can turn on / off the navigation coomponent of the carousel.

animation

'animation' is a boolean value can turn on / off the automated animation feature.

animationDelay

This takes in the animation delay in seconds.

mobile

Specifies the number of items to be displayed in 'mobile' device.

tablet

Specifies the number of items to be displayed in 'tablet' device.

desktop

Specifies the number of items to be displayed in 'desktop' device.

eg:

Additional Info

• Seems to be a bit buggy right now. Use carefully.

Props

imageURL

This is for passing in the unique images

title

This is for passing in the Title of the card

description

This is for passing in the description of the card

dark

This is for enabling dark mode. To enable be used for dark backgrounds.

eg:

Additional Info

• ormal 'class' wont work
• Should be wrapped in a grid

Props

itemId

This takes in an unique ID, to create the strikethrough on the text when checked.

eg:

Additional Info

• if you want to recreate the checkbox use these classes: block m-1 w-6 h-6 focus:ring-PineGreen-900 text-AtomicTangerine-900 rounded-full peer

Props

main || soft || outline || textonly

Has to speciy any one of these styles.

light || dark

Has to speciy any one of these color mode.

customClass

This takes in any custom classes, you want to add to the button or a tag.

button

This toggles the button tag. By default it is a tag

rounded

This toggles the rounded-full class when enabled.

large || medium || small

Has to specify any one of these three sizes.

eg:

Additional Info

• Additional properties like onClick and href can be passed through normally.

Props

xxxx

xxxx

eg:

Additional Info

• xxxx

Props

badgeTitle

This will be the text inside the badge.

white

This will makes the border and text color of the badge to white

customClass

This takes in any custom classes.

eg:

Additional Info

• xxxx

Props

white

This will makes the color combination of the strip green and white

eg:

Additional Info

• xxxx

Props

bullets

This will be list content.

customClass

This takes in any custom classes.

eg:

Additional Info

• xxxx

Props

images

This shows all the images, we will pass the images as objects with src, alt and class if required

eg:

Additional Info

• xxxx

Props

white

This will change the color to white

reverse

This will reverse the line

customClass

This takes in any custom classes.

eg:

Additional Info

• xxxx

Props

dark

This will change the colors for the dark background.

cta

This will be the cta.

link

This will be the link

eg:

Additional Info

• xxxx

Props

xxx

xxx

eg:

Additional Info

• xxxx

Props

details

xxx

dark

xxx

eg:

Additional Info

• xxxx

Props

name

xxx

location

xxx

time

xxx

date

xxx

link

xxx

description

xxx

eg:

Additional Info

• xxxx

Props

imageURL

xxx

alt

xxx

title

xxx

link

xxx

eg:

Additional Info

• xxxx

Props

heading

xxx

description

xxx

subHeading

xxx

subDescription

xxx

eg:

Additional Info

• xxxx

Props

latestNewsCards

xxx

eg:

Additional Info

• xxxx

Props

list

xxx

eg:

Additional Info

• xxxx

Props

heading

xxx

description

xxx

list

xxx

eg:

Additional Info

• xxxx

Props

newsBoxes

xxxx

eg:

Additional Info

• xxxx

Props

imageURL

xxxx

title

xxxx

description

xxxx

alt

xxxx

link

xxxx

eg:

Additional Info

• xxxx

Props

numberCards

xxxx

eg:

Additional Info

• xxxx

Props

cardTitle

xxxx

cardDescription

xxxx

eg:

Additional Info

• xxxx

Props

imageURL

xxxx

reverse

xxxx

alt

xxxx

secondary

xxxx

primary

xxxx

customClass

xxxx

eg:

Additional Info

• xxxx

Props

lightTangerine

xxxx

eg:

Additional Info

• xxxx

Props

prefix

xxxx

number

xxxx

description

xxxx

eg:

Additional Info

• xxxx

Props

code

xxxx

course

xxxx

tagline

xxxx

training

xxxx

link

xxxx

eg:

Additional Info

• xxxx

Props

xxxxx

xxxx

eg:

Additional Info

• xxxx

Props

paths

xxxx

eg:

Additional Info

• xxxx

Props

id

xxxx

customClass

xxxx

onclick

xxxx

eg:

Additional Info

• xxxx

Props

link

xxxx

customClass

xxxx

white

xxxx

id

xxxx

eg:

Additional Info

• xxxx

Props

link

xxxx

cta

xxxx

heading

xxxx

description

xxxx

eg:

Additional Info

• xxxx

Props

name

xxxx

headings

xxxx

horizontal

xxxx

dark

xxxx

customClass

xxxx

eg:

Additional Info

• xxxx

Props

imageURL

xxxx

name

xxxx

description

xxxx

link

xxxx

eg:

Additional Info

• xxxx

Props

heading

xxxx

subtitle

xxxx

eg:

Additional Info

• xxxx

Props

heading

xxxx

subtitle

xxxx

arrowLink

xxxx

description

xxxx

eg:

Additional Info

• xxxx

Props

name

xxxx

designation

xxxx

imageURL

xxxx

DisableImage

xxxx

email

xxxx

customClass

xxxx

eg:

Additional Info

• xxxx

Props

heading

xxxx

buttonName

xxxx

description

xxxx

imgUrl

xxxx

alt

xxxx

link

xxxx

eg:

Additional Info

• xxxx

Props

place

xxxx

address

xxxx

phone

xxxx

mail

xxxx

contactLink

xxxx

mailLink

xxxx

eg:

Additional Info

• xxxx

Props

imageURL

xxxx

alt

xxxx

heading

xxxx

cta

xxxx

link

xxxx

reverse

xxxx

eg:

Additional Info

• xxxx

Props

firstImage

xxxx

secondImage

xxxx

eg:

Additional Info

• xxxx

Props

heading

xxxx

content

xxxx

eg:

Additional Info

• xxxx

Props

pathways

xxxx

eg:

Additional Info

• xxxx