TEST PAGE

Experimentings in Web Design

This page is a live testbed showcasing my custom typography, colors, layout utility classes, and interactive button states.

Surface Containers and Components

Lowest Container (.lowest)

This container uses --surface-container-lowest, typically matching the background for elements that should subtly blend in.

Here is an inline button:

Low Container (.low)

This container uses --surface-container-low, offering a slight lift above the lowest surface. Great for standard card backgrounds.

Here is a full-width button:

Button Link Test

Layout Utilities and Lists

Testing the .grid-2col class for a responsive layout. The .span-all class forces this paragraph to span all columns on all screen sizes. This section uses the .dots background pattern.

Abstract image 1

Numbered List Styling

  1. Service A: Structured List Item with custom counter and leading zero.
  2. Service B: The counter styling (color, font-weight) is controlled by the ol > li::before CSS rule.
  3. Service C: Long text testing. This line is much longer than the others to see how the padding and list counter handles text that wraps around to a second line.
  4. Service D: Final item test.

Responsive Card Grid

  • Card Image 1

    Card Title One

    This item uses .surface-container-low for its background and is part of a responsive grid layout using minmax(250px, 1fr).

  • Card Image 2

    Card Title Two

    The card list provides automatic wrapping to ensure a pleasant experience across mobile, tablet, and desktop views.

  • Card Image 3

    Card Title Three

    The images inside the cards have an aspect-ratio: 1 / 1 to ensure uniform sizing.

  • Card Image 4

    Card Title Four

    Final card test to confirm spacing and alignment are correct across the entire row.