Complete Styling & Component Showcase

test

Typography & Text Styling

This page demonstrates all the typography and styling elements used throughout the BEARS website. Everything from headings to body text follows a carefully designed typographic hierarchy.

Heading Hierarchy

All headings use responsive font sizes that scale with screen size. This ensures readability on both mobile and desktop devices.

Subheading Level 4

This is a level 4 heading, often used for subsections within major content blocks.

Heading Level 5

Level 5 headings work for nested topics.

Heading Level 6

Level 6 headings for deeply nested content.

Body Text & Paragraphs

Body text uses a generous line-height (1.75) for comfortable reading. Paragraphs are spaced with consistent margins to create visual rhythm. The font size adapts: 1.0625rem on mobile, scaling up to 1.125rem on desktop.

This paragraph demonstrates bold text, italic text, and bold italic text. You can also use inline code which appears with a subtle background. Links are styled in the accent color and become underlined on hover.

Lists & Indentation

Bullet points and numbered lists maintain consistent indentation and spacing:

• First item with explanation
• Second item demonstrating list flow
• Nested items can go multiple levels deep:
  • Sub-item one
  • Sub-item two
  • Sub-item three
• Fourth item continues the main list

Numbered lists work too:

1. First step in a process
2. Second step with more details
3. Third step completing the workflow
   1. Sub-step A
   2. Sub-step B
4. Final step

Blockquotes

Blockquotes stand out with a left border in the accent color. They’re perfect for highlighting important quotes, testimonials, or key insights from research.

This is another blockquote demonstrating the styling. Multiple blockquotes maintain consistent formatting throughout the page.

Code Blocks

Inline code like const myVariable = 42; appears with subtle styling. For larger code samples:

// Example JavaScript code block
function demonstrateCode() {
  const greeting = "Hello, BEARS!";
  console.log(greeting);
  return greeting;
}

// Code blocks support syntax highlighting
const result = demonstrateCode();

# Python code example
def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)

# Calculate and print
for i in range(10):
    print(fibonacci(i))

---

Button Components

Buttons come in multiple variants and sizes for different use cases:

---

Image Component

The Img component provides optimized, responsive image display with flexible sizing:

Image Grid

Square

Native

Image Carousel

A carousel can also display images using the Img component:

---

Accordion Component

Accordions organize content into expandable sections:

---

Callout Component

Callouts highlight important information with a glass-morphism card and accent gradient bar:

---

Side-by-Side Layout

The SideBySide component creates responsive two-column layouts that stack on mobile:

---

Marquee Component

The marquee creates a scrolling image gallery that’s perfect for showcasing multiple projects. It handles images with different aspect ratios gracefully:

Reverse Direction Marquee

The marquee also supports scrolling in the opposite direction:

---

YouTube Embed

The YouTube component makes it easy to embed videos. Just pass a video ID or full URL:

Basic Embed

With Start Time

---

Instagram Embed

The Instagram component embeds Instagram posts. Just pass a post URL or shortcode:

---

Combined Layout Example

Here’s a more complex example combining multiple components:

Vertically Centered Content

---

Combined Layout Example

---

Responsive Design Features

The entire design system is built with mobile-first principles:

Breakpoint Strategy

• Mobile (< 640px): Single column layouts, optimized spacing
• Small Tablet (640px - 1023px): Enhanced padding, improved readability
• Desktop (≥ 1024px): Full two-column layouts, optimal line lengths
• Large Desktop (≥ 1280px): Additional padding, maximum content width

Responsive Text Sizing

All text uses clamp() for fluid scaling:

• Titles scale from 2rem → 3.5rem
• Subheadings scale fluidly with viewport
• Body text remains consistently readable
• Line heights maintain readability across sizes

Image Optimization

• Automatic format conversion (WebP with fallbacks)
• Responsive image sizing
• Lazy loading for below-fold images
• Eager loading for cover images
• Adaptive image resolution

---

Color System

The design uses a carefully chosen color palette:

---

Typography Color Examples

This text is bold (uses bold font weight). This text is italic (uses italic styling). Here’s some code with special styling.

This blockquote demonstrates text color on a subtle background. The left border provides visual hierarchy.

---

Content Width & Spacing

All content automatically centers and constrains to optimal reading width:

• Mobile: 100% of viewport (with padding)
• Desktop: Up to 90 characters wide
• Maximum width: Prevents text lines from becoming too long
• Consistent margins around all elements

The responsive max-width ensures readability on any device.

---

Conclusion

This showcase demonstrates the complete design system and component library available for BEARS project pages. Every element is designed with:

• Accessibility in mind
• Responsive behavior across all devices
• Consistent styling throughout
• Performance optimization
• User experience as the priority

Use these components and styling patterns to create engaging, professional project pages that effectively communicate your work and research.