Style Guide

This page demonstrates the typography and common components used throughout the Beneric Studio website.

Typography

Headings

Heading 1 (h1) - The quick brown fox jumps over the lazy dog

Heading 2 (h2) - The quick brown fox jumps over the lazy dog

Heading 3 (h3) - The quick brown fox jumps over the lazy dog

Heading 4 (h4) - The quick brown fox jumps over the lazy dog

Heading 5 (h5) - The quick brown fox jumps over the lazy dog

Heading 6 (h6) - The quick brown fox jumps over the lazy dog

Paragraph Text

This is a standard paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This paragraph contains bold text, italic text, and inline code.

This is a blockquote. It's often used for highlighting quotes or important notes. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Buttons

Demonstrating the <BaseButton> component with various props.

Inverted Section Test

Testing how components look within an inverted theme context.

Color Schemes

These are the available color schemes defined in store/global.js. The InvertedSection component and page frontmatter can use these names.

(Note: This is a static representation. Refer to store/global.js for the definitive list and exact values.)