txone

Welcome to Our Site this is a change

This is a simple hero module built with React + HubL

Learn More

Typography & Elements QA Test

This page demonstrates all HTML elements and typography styles in the boilerplate theme.

🎉 Testing Tailwind Watch Mode!

If you see this purple box with shadow, Tailwind is compiling new classes!

Headings

Heading 1 - 5xl Bold

Heading 2 - 4xl Bold

Heading 3 - 3xl Semibold

Heading 4 - 2xl Semibold

Heading 5 - xl Medium
Heading 6 - lg Medium

Paragraphs & Text Styles

This is a regular paragraph with bold text, italic text, and a link. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porttitor, quam vel dignissim tincidunt, odio libero porta ligula, vitae fermentum lacus libero vel risus.

This is a larger paragraph (text-lg) with gray-700 color.

This is a smaller paragraph (text-sm) with gray-500 color.

This line contains subscript text.

This line contains superscript text.

This line contains inline code.

This line contains small text.

This line contains highlighted text.

Code Block

.example-code {
  background-color: #000;
  color: #fff;
  padding: 1.5rem;
  border-radius: 0.5rem;
}

Lists

Unordered List

  • First unordered list item
  • Second unordered list item
  • Third unordered list item
  • Fourth unordered list item

Ordered List

  1. First ordered list item
  2. Second ordered list item
  3. Third ordered list item
  4. Fourth ordered list item

Blockquote

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porttitor, quam vel dignissim tincidunt, odio libero porta ligula, vitae fermentum lacus libero vel risus. Aenean pulvinar nisl et vestibulum commodo."

Table

Header Column One Header Column Two Header Column Three
Row one column one Row one column two Row one column three
Row two column one Row two column two Row two column three
Row three column one Row three column two Row three column three
Row four column one Row four column two Row four column three
Footer column one Footer column two Footer column three

Color Palette

Primary (Black)

Secondary (White)

Accent (Gray)

Gray 100

Gray 300

Gray 500

Gray 700

Gray 900

Buttons

Brand Settings Test

Favicon Test

Check the browser tab to see if the favicon is rendering. The favicon should be set in Design Manager → Settings → Brand Settings.

Modern API (Used):

brand_settings.favicon.src|escape_url

Value: https://2660917.fs1.hubspotusercontent-na1.net/hubfs/2660917/Demo%20Images/biglytics-square-logo.png

Legacy API (Deprecated):

brand_settings.primaryFavicon.src

Value: https://2660917.fs1.hubspotusercontent-na1.net/hubfs/2660917/Demo%20Images/biglytics-square-logo.png

✅ The modern favicon.src API with |escape_url filter is used in the base template.

Form Elements