Studio

A Repository of Etch Patterns and Components

  • Popover San Marino

    A purple square with rounded corners and the letters CSS inside in white
    up placeholder
    • Popover
    • Utility

  • Geo Map Genoa

    A purple square with rounded corners and the letters CSS inside in white
    image

    • Section Zuglio

      A purple square with rounded corners and the letters CSS inside in white
      image
      • Section

    • Data Table

      A purple square with rounded corners and the letters CSS inside in white
      Image 24 Scaled 1
      • Data Table

    • Card Bari

      A purple square with rounded corners and the letters CSS inside in white
      Image 23
      • Card

    • Feature Section Capri

      A purple square with rounded corners and the letters CSS inside in white
      Image 22 Scaled 1
      • Card
      • Section

    • Continuous Scroller

      A purple square with rounded corners and the letters CSS inside in white
      up placeholder
      • Slider

    • Team Hover

      A purple square with rounded corners and the letters CSS inside in white
      Image 20 Scaled
      • Section
      • Team Members

    • Open Steet Map

      A purple square with rounded corners and the letters CSS inside in white
      Image 19 Scaled
      • Open Street Maps
      • Utility

    • Multi Map (OSM)

      A purple square with rounded corners and the letters CSS inside in white
      Osm Multi Map
      • Open Street Maps
      • Utility

    • Link Button

      A purple square with rounded corners and the letters CSS inside in white
      up placeholder
      • Button
      • CTA

    • Social Sharing Button

      A purple square with rounded corners and the letters CSS inside in white
      Image 16
      • Button
      • Social Media

    • Print Button

      A purple square with rounded corners and the letters CSS inside in white
      up placeholder

      • Star Divider

        A purple square with rounded corners and the letters CSS inside in white
        up placeholder
        • Divider

      • Feature Slider Padua

        A purple square with rounded corners and the letters CSS inside in white
        image
        • Feature
        • Section
        • Slider

      • Download Callout

        A purple square with rounded corners and the letters CSS inside in white
        up placeholder
        • CTA
        • Utility

      • Content Filter Rimini

        A purple square with rounded corners and the letters CSS inside in white
        image
        • Filters
        • Utility

      • Trick Cards

        A purple square with rounded corners and the letters CSS inside in white
        image
        • Section
        • Slider
        • Special Effects

      • Mission Viewer Alpha

        A purple square with rounded corners and the letters CSS inside in white
        image
        • Slider
        • Special Effects

      • Section Separator Roma

        A purple square with rounded corners and the letters CSS inside in white
        Image 11
        • Section Separator
        • Special Effects
        • Utility

      • Countdown Timer

        A purple square with rounded corners and the letters CSS inside in white
        image
        • Counter
        • Utility

      • Marquee

        A purple square with rounded corners and the letters CSS inside in white
        up placeholder
        • Marquee

      • Unit Counter

        A purple square with rounded corners and the letters CSS inside in white
        counter
        • Counter

      • Hero Taranto

        A purple square with rounded corners and the letters CSS inside in white
        Hero Taranto
        • Hero Section

      • Slider Section Aviano

        A purple square with rounded corners and the letters CSS inside in white
        Section Slider Aviano
        • Multimedia
        • Section
        • Slider

      • The CTA Box

        A purple square with rounded corners and the letters CSS inside in white
        cta box
        • CTA

      • Scroll to Top

        A purple square with rounded corners and the letters CSS inside in white
        scroll
        • Back to Top

      • Info Section Trieste

        A purple square with rounded corners and the letters CSS inside in white
        image
        • Section

      • Kinetic Grid

        A purple square with rounded corners and the letters CSS inside in white
        image
        • Special Effects

      • FW Section Aviano

        A purple square with rounded corners and the letters CSS inside in white
        image
        • Media
        • Section

      • Gallery Milano

        A purple square with rounded corners and the letters CSS inside in white
        image
        • Image Gallery

      • Video Player Mola

        A purple square with rounded corners and the letters CSS inside in white
        player mola
        • Multimedia

      • Section Verona

        A purple square with rounded corners and the letters CSS inside in white
        section verona
        • Section

      • Carousel Alpha Plus

        A purple square with rounded corners and the letters CSS inside in white
        carousel alpha plus
        • Media

      • Feature Card Palermo

        A purple square with rounded corners and the letters CSS inside in white
        feature palermo
        • Feature

      • FW Post Navigator

        A purple square with rounded corners and the letters CSS inside in white
        prev next
        • Navigation
        • Utility

      • Date Time Formatter

        A purple square with rounded corners and the letters CSS inside in white
        date formatter 2
        • Utility

      • FW Counter V2

        A purple square with rounded corners and the letters CSS inside in white
        counter
        • Counter

      • Nested Accordion

        A purple square with rounded corners and the letters CSS inside in white
        accordion
        • Accordion

      • Hero Bari

        A purple square with rounded corners and the letters CSS inside in white
        hero bari
        • Hero Section

      • Hero Ostuni

        A purple square with rounded corners and the letters CSS inside in white
        hero ostuni
        • Hero Section

      • Team Hover Block

        A purple square with rounded corners and the letters CSS inside in white
        team card hover
        • Section
        • Team Members

      • Content Wrapper

        A purple square with rounded corners and the letters CSS inside in white
        content wrapper
        • Section

      • Footer Trulli

        A purple square with rounded corners and the letters CSS inside in white
        footer trulli scaled
        • Footer

      • Hero Caravigno

        A purple square with rounded corners and the letters CSS inside in white
        hero caravigno
        • Hero Section

      • Gallery Venezia

        A purple square with rounded corners and the letters CSS inside in white
        gallery venezia2
        • Image Gallery

      • News Grid San Vito

        A purple square with rounded corners and the letters CSS inside in white
        news grid sanvito
        • Blog Grid

      • Flexi-Container

        A purple square with rounded corners and the letters CSS inside in white
        flex container
        • Container
        • Fundamentals

      • Basic Section Block

        A purple square with rounded corners and the letters CSS inside in white
        up placeholder
        • Fundamentals
        • Section

      • Bordered Avatar

        A purple square with rounded corners and the letters CSS inside in white
        avatar
        • Avatar

      • Headliner Palermo

        A purple square with rounded corners and the letters CSS inside in white
        heading with pics
        • Special Effects

      • i-Brow

        A purple square with rounded corners and the letters CSS inside in white
        I Brow – FW Foundry
        • Fundamentals

      • Image Comparison

        A purple square with rounded corners and the letters CSS inside in white
        Imge Compare Scaled
        • Media

      • Enhanced Figure

        A purple square with rounded corners and the letters CSS inside in white
        Screenshot of the enhanced figure.
        • Figure
        • Fundamentals

      • Gallery Casale

        A purple square with rounded corners and the letters CSS inside in white
        Casale Scaled
        • Image Gallery
        • Section

      • Hero Mesagne

        A purple square with rounded corners and the letters CSS inside in white
        Mesagne Scaled
        • Hero Section

      • CTA Pill Button

        A purple square with rounded corners and the letters CSS inside in white
        Cta Pill
        • Button

      • Simple Accordion

        A purple square with rounded corners and the letters CSS inside in white
        detail summary
        • Accordion

      • Video Player Lecce

        A purple square with rounded corners and the letters CSS inside in white
        up placeholder
        • Multimedia

      • FW Counter – Basic

        A purple square with rounded corners and the letters CSS inside in white
        counter basic
        • Counter

      • QR Code

        A purple square with rounded corners and the letters CSS inside in white
        up placeholder
        • Utility

      • Responsive Accordion

        A purple square with rounded corners and the letters CSS inside in white
        up placeholder
        • Accordion

      UP Studio Goals

      With UplinkPress.Studio, I hope to deliver accessible, Etch-based components and patterns for WordPress, built with modern CSS, design tokens, and clean, developer-friendly architecture. AI will be used to the minimum extent possible (I am not a JS person).

      • Etch-Ready Components

        Prebuilt, accessible UI components made for Etch and ACSS workflows.

      • Accessibility by Default

        Semantic patterns with keyboard support, focus states, and WCAG-minded behavior built in.

      • Token-Driven Styling

        Powered by ACSS and additional variables, modern color models, and flexible design tokens for easier theming.

      • WordPress Native

        Built for real WordPress sites with dynamic data, custom fields, and native content workflows.

      • Performance First

        Lean code and modern CSS help keep interfaces fast, responsive, and low-bloat.

      • Built for Developers

        Clean, reusable code that is easy to extend, maintain, and adapt across projects.