TheMarketHub

Text

Mapped Style	Hex Code
`text-primary`	`#000000`
`text-secondary`	`#333333`
`text-faint`	`#888888`
`text-disabled`	`#adadad`
`text-inverse`	`#ffffff`
`text-accent-1`	`#006ba6`
`text-critical`	`#dc1414`
`text-success`	`#119843`
`text-warning`	`#d4a205`
`text-info`	`#1847cc`
`link-default`	`#006ba6`
`link-hover`	`#006ba6`
`text-sale`	`#dc1414`

Border

Mapped Style	Hex Code
`border-primary`	`#000000`
`border-accent-1`	`#006ba6`
`border-inverse`	`#FFFFFF`
`border-focus`	`#888888`
`border-input-default`	`#cccccc`
`border-input-selected`	`#006ba6`
`border-input-entered`	`#333333`
`border-input-critical`	`#dc1414`
`border-input-success`	`#119843`
`border-input-warning`	`#d4a205`
`border-input-info`	`#1847cc`
`border-critical`	`#dc1414`
`border-success`	`#119843`
`border-warning`	`#d4a205`
`border-info`	`#1847cc`
`border-divider-focus`	`#888888`
`border-divider-inverse`	`#ffffff`
`border-divider-primary`	`#e0e0e0`
`border-divider-sale`	`#ea2121`
`border-sale`	`#ea2121`
`border-input-disabled`	`#cccccc`

Background

Mapped Style	Hex Code
`background-default`	`#ffffff`
`background-lighter`	`#f1f1f1`
`background-light`	`#cccccc`
`background-dark`	`#555555`
`background-inverse`	`#000000`
`background-accent-1`	`#006ba6`
`background-accent-2`	`#42494e`
`background-accent-3`	`#002559`
`background-accent-4`	`#e7c58b`
`background-critical`	`#ffeaea`
`background-success`	`#e0f3e6`
`background-warning`	`#fffce0`
`background-info`	`#ecf4ff`
`background-sale`	`#ea2121`
`background-disabled`	`#f1f1f1`
`background-dark-overlay`	`#00000066`

Icon

Mapped Style	Hex Code
`icon-primary`	`#000000`
`icon-secondary`	`#888888`
`icon-disabled`	`#adadad`
`icon-inverse`	`#ffffff`
`icon-accent-1`	`#006ba6`
`icon-critical`	`#dc1414`
`icon-success`	`#119843`
`icon-warning`	`#d4a205`
`icon-info`	`#1847cc`
`icon-sale`	`#ea2121`

Button

Mapped Style	Hex Code
`btn-fill-default-bg`	`#006ba6`
`btn-fill-default-bg-hover`	`#025d8f`
`btn-fill-inverse-bg`	`#ffffff`
`btn-fill-accent-1-bg`	`#006ba6`
`btn-bg-disabled`	`#f1f1f1`

Typography

Class	Example	Token	Size	Line-height	Weight
`heading-1`	Headline	`text-4xl`	36px	44px	bold
`heading-2`	Headline	`text-3xl`	30px	36px	bold
`heading-3`	Headline	`text-2xl`	24px	32px	bold
`heading-4`	Headline	`text-xl`	20px	28px	normal
`heading-5`	Headline	`text-lg`	18px	24px	semibold
`body-xlarge-emphasis`	Paragraph	`text-lg`	18px	28px	semibold
`body-xlarge`	Paragraph	`text-lg`	18px	28px	normal
`body-large-emphasis`	Paragraph	`text-base`	18px	28px	semibold
`body-large`	Paragraph	`text-base`	18px	28px	normal
`body-core-strong-emphasis`	Paragraph	`text-sm`	14px	22px	semibold
`body-core-emphasis`	Paragraph	`text-sm`	14px	22px	medium
`body-core`	Paragraph	`text-sm`	14px	22px	normal
`body-small`	Paragraph	`text-xs`	12px	20px	normal
`button-core-emphasis`	Button	`text-sm`	14px	20px	semibold
`button-core`	Button	`text-sm`	14px	20px	normal
`link-core`	Paragraph	`text-sm`	14px	22px	normal
`link-core-emphasis`	Paragraph	`text-sm`	14px	22px	medium

Buttons

Default	Disabled	With Loading	Classes
			`button-fill-default` `button-small`
			`button-fill-default` `button-medium`
			`button-fill-accent` `button-large`
			`button-fill-inverse`
			`button-outline-default` `button-small`
			`button-outline-default` `button-medium`
			`button-outline-default` `button-large`
			`button-outline-inverse`
			`button-underline-default`
			`button-underline-inverse`

Aspect Ratios

Ratio	Example	Classes
`Auto`	Auto	`aspect-auto`
`2:3 (Taller)`	Taller	`aspect-taller`
`4:5 (Tall)`	Tall	`aspect-tall`
`1:1 (Square)`	Square	`aspect-square`
`4:3 (Social)`	Social	`aspect-social`
`2:1 (Video)`	Video	`aspect-video`
`3:1 (Hero)`	Hero	`aspect-hero`
`4:1 (Banner)`	Banner	`aspect-banner`
`5:4 (Portrait)`	Portrait	`aspect-portrait`
`3:2 (Classic)`	Classic	`aspect-classic`
`3:4 (Portrait Classic)`	Portrait Classic	`aspect-portrait-classic`
`16:9 (Widescreen)`	Widescreen	`aspect-widescreen`
`9:16 (Widescreen Portrait)`	Widescreen Portrait	`aspect-widescreen-portrait`

Form

Element	Default	Error	Disabled	Classes
`Input`	Label	Label Error message...	Disabled	`core-input`
`Textarea`	Textarea	Textarea Error message...	Textarea	`core-textarea`
`Dropdown / Custom Select`	Label	Label Error message...	Label	`core-select`
`Native Select`	Select	Select Error message...	Select	`native-select`
`Radio Button`	Radio 1 Radio 2	Radio 1 Radio 2	Radio 1 Radio 2	`core-radio`
`Checkbox`	Checkbox 1 Checkbox 2	Checkbox 1 Checkbox 2	Checkbox 1 Checkbox 2	`core-checkbox`
`Toggle`	Toggle Toggle	Toggle Toggle	Toggle Toggle	`core-toggle`
`Validation`	Name * Email * Message Category *
`Search Input`	Search Clear Optional message			`core-search-input`

Pagination

Type	Example
`Page Numbers`	You've viewed 1 of 4583 products 1 2 3 4… …
`Load More`	You've viewed 1 of 4583 products Load More Products …

Carousel

Type	Example
`Core Carousel`	Item 1 Item 2 Item 3 Item 4 Item 5 Item 6
`Core Carousel`	Item 1 Item 2 Item 3 Item 4 Item 5 Item 6
`Product Carousel`	Product Carousel SKU# 836876_10 Lilo & Stitch Bright Pencils & Toppers SKU# 836875_10 KPop Demon Hunters Huntrix Stationery Bag SKU# 836874_10 Super Mario Characters Erasable Gel Pen 4-Pack SKU# 836873_10 Lilo & Stitch Plush Pencil Case SKU# 836872_10 Lilo & Stitch Core Blue Mini Stationery Set SKU# 836871_10 Lilo & Stitch Core Blue Filled Pencil Case SKU# 836870_10 Lilo & Stitch Core Blue Pencil Tube SKU# 836868_10 Minecraft Pen & Topper CDU/24

Product Card

Type Example

Type	Example
`Images Carousel` `Images Hover`

Images Carousel

Images Hover

Modal

Type	Example
`Slideout Left`	Slideout Left Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod tincidunt orci, eget consequat mauris feugiat tempus. Curabitur sollicitudin convallis enim, ut condimentum odio porta ac. Nam id dui nec risus sagittis rhoncus. Nullam risus enim, tempor sed justo posuere, fermentum ornare justo. Cras dapibus pellentesque feugiat. Nam eu lectus lacinia, condimentum nisl vel, volutpat tellus. Pellentesque ac faucibus mi, accumsan vehicula lorem. Praesent posuere sodales purus, ut vestibulum nulla congue et. Nullam convallis elementum libero, dignissim interdum arcu aliquet vel. Aliquam vehicula nulla et tincidunt imperdiet. Proin a egestas mi, sit amet ullamcorper sem. Donec vestibulum nisi in magna fermentum, id tristique orci facilisis. Donec gravida elit id ex placerat, a tincidunt lorem elementum. Integer in nunc mollis, rutrum urna et, fringilla mi. Quisque luctus ornare tortor, ut semper odio tincidunt id. Slideout Left Footer
`Slideout Right`	Slideout Right Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod tincidunt orci, eget consequat mauris feugiat tempus. Curabitur sollicitudin convallis enim, ut condimentum odio porta ac. Nam id dui nec risus sagittis rhoncus. Nullam risus enim, tempor sed justo posuere, fermentum ornare justo. Cras dapibus pellentesque feugiat. Nam eu lectus lacinia, condimentum nisl vel, volutpat tellus. Pellentesque ac faucibus mi, accumsan vehicula lorem. Praesent posuere sodales purus, ut vestibulum nulla congue et. Nullam convallis elementum libero, dignissim interdum arcu aliquet vel. Aliquam vehicula nulla et tincidunt imperdiet. Proin a egestas mi, sit amet ullamcorper sem. Donec vestibulum nisi in magna fermentum, id tristique orci facilisis. Donec gravida elit id ex placerat, a tincidunt lorem elementum. Integer in nunc mollis, rutrum urna et, fringilla mi. Quisque luctus ornare tortor, ut semper odio tincidunt id.
`Modal Dialog`	Modal Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod tincidunt orci, eget consequat mauris feugiat tempus. Curabitur sollicitudin convallis enim, ut condimentum odio porta ac. Nam id dui nec risus sagittis rhoncus. Nullam risus enim, tempor sed justo posuere, fermentum ornare justo. Cras dapibus pellentesque feugiat. Nam eu lectus lacinia, condimentum nisl vel, volutpat tellus. Pellentesque ac faucibus mi, accumsan vehicula lorem. Praesent posuere sodales purus, ut vestibulum nulla congue et. Nullam convallis elementum libero, dignissim interdum arcu aliquet vel. Aliquam vehicula nulla et tincidunt imperdiet. Proin a egestas mi, sit amet ullamcorper sem. Donec vestibulum nisi in magna fermentum, id tristique orci facilisis. Donec gravida elit id ex placerat, a tincidunt lorem elementum. Integer in nunc mollis, rutrum urna et, fringilla mi. Quisque luctus ornare tortor, ut semper odio tincidunt id.

Notification

Type	Default	Usage
`Info`	Info Augue pellentesque est diam aliquet. Odio et amet aliquam.	`core-toast`
`Success`	Success Augue pellentesque est diam aliquet. Odio et amet aliquam.	`core-toast`
`Error`	Error Augue pellentesque est diam aliquet. Odio et amet aliquam.	`core-toast`
`Warning`	Warning Augue pellentesque est diam aliquet. Odio et amet aliquam.	`core-toast`
`Info`	Information toast View	`core-toast`
`Success`	Success toast View	`core-toast`
`Error`	Error toast View	`core-toast`
`Warning`	Warning toast View	`core-toast`

Badge

Theme Type	Default	Usage
`Icon`	Badge Badge New	`core-badge`
`Icon`	Badge	`core-badge`
`No Icon`	Badge Badge 22 22	`core-badge`

Breadcrumb

Type	Default	Usage
`Slash`	Home/Styleguide	`breadcrumbs`

Accordion

Single	Multiple
Accordion Item Single This is the content for accordion item Single. It can contain any HTML content including paragraphs, lists, and other elements.	Accordion Item 1 This is the content for accordion item 1. It can contain any HTML content including paragraphs, lists, and other elements. Accordion Item 2 This is the content for accordion item 2. It can contain any HTML content including paragraphs, lists, and other elements. Accordion Item 3 This is the content for accordion item 3. It can contain any HTML content including paragraphs, lists, and other elements. Accordion Item 4 This is the content for accordion item 4. It can contain any HTML content including paragraphs, lists, and other elements.

Single

Multiple

Accordion Item Single

This is the content for accordion item Single. It can contain any HTML content including paragraphs, lists, and other elements.

Accordion Item 1

This is the content for accordion item 1. It can contain any HTML content including paragraphs, lists, and other elements.

Accordion Item 2

This is the content for accordion item 2. It can contain any HTML content including paragraphs, lists, and other elements.

Accordion Item 3

This is the content for accordion item 3. It can contain any HTML content including paragraphs, lists, and other elements.

Accordion Item 4

This is the content for accordion item 4. It can contain any HTML content including paragraphs, lists, and other elements.

Loader

Type	Default	Usage
`Spinner`		`loading-spinner`
`Spinner Dark`		`loading-spinner-dark`

Quantity input

Type	Default	Usage
`Quantity input`		`quantity-input`

Icon Library

Icon \| Token Name
`plus`	`minus`	`search`
`wishlist`	`cart`	`account`
`close`	`chevron-down`	`chevron-left`
`chevron-right`	`star`	`pause`
`play`	`info`	`check-circle`
`x-circle`	`warning`