Atoms

Atoms zijn de kleinste bouwstenen van het Tiltshift Design System. Ze vormen de basis voor alle andere componenten en zijn essentieel voor het creëren van een consistente gebruikerservaring.

Logo

Het Tiltshift logo in verschillende groottes. Combineer met utility classes voor positioning.

<div class="a-flex a-gap-4 a-items-center a-p-3 a-bg-off-white a-rounded-md a-flex-wrap">
    <!-- Small Logo (24px) -->
    <img src="https://cdn.tiltshift.nl/assets/logo/logo_cropped.svg" 
     alt="Tiltshift" 
     class="a-logo a-logo--small" style="height: 24px;">

    <!-- Medium Logo (36px) -->
    <img src="https://cdn.tiltshift.nl/assets/logo/logo_cropped.svg" 
     alt="Tiltshift" 
     class="a-logo a-logo--medium" style="height: 36px;">

    <!-- Large Logo (48px) -->
    <img src="https://cdn.tiltshift.nl/assets/logo/logo_cropped.svg" 
     alt="Tiltshift" 
     class="a-logo a-logo--large" style="height: 48px;">

    <!-- Extra Large Logo (140px) -->
    <img src="https://cdn.tiltshift.nl/assets/logo/logo_cropped.svg" 
     alt="Tiltshift" 
     class="a-logo a-logo--xlarge" style="height: 140px;">
</div>

Heading

Herbruikbare heading atom voor h1-h6 elementen. Parameters voor level, size en styling.

Heading Level 1 - Extra Large

Heading Level 2 - Large

Heading Level 3 - Medium

Heading Level 4 - Small

Custom Size XL op H3

<div class="a-space-y-3">
    <!-- Heading Level 1 -->
    <h1 class="a-heading a-text-2">Heading Level 1 - Extra Large</h1>
    
    <!-- Heading Level 2 -->
    <h2 class="a-heading a-text-2">Heading Level 2 - Large</h2>
    
    <!-- Heading Level 3 -->
    <h3 class="a-heading a-text-2">Heading Level 3 - Medium</h3>
    
    <!-- Heading Level 4 -->
    <h4 class="a-heading a-text-2">Heading Level 4 - Small</h4>
    
    <!-- Custom Size -->
    <h3 class="a-heading a-text-xl">Custom Size XL op H3</h3>
</div>

Text

Herbruikbare text atom voor paragraphs en spans. Configureerbare size en kleur.

Dit is een standaard paragraaf met medium grootte. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Kleine tekst voor subtiele informatie

Grote tekst voor nadruk

Primaire kleur tekst

Grijze secundaire tekst

Dit is een inline span element 
<div class="a-space-y-3">
    <!-- Default Paragraph -->
    <p class="a-text a-text-1 a-m-0">Dit is een standaard paragraaf met medium grootte. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    
    <!-- Small Text -->
    <p class="a-text a-text-sm a-m-0">Kleine tekst voor subtiele informatie</p>
    
    <!-- Large Text -->
    <p class="a-text a-text-lg a-m-0">Grote tekst voor nadruk</p>
    
    <!-- Colored Text -->
    <p class="a-text a-text-2 a-text-primary a-m-0">Primaire kleur tekst</p>
    
    <p class="a-text a-text-2 a-text-gray-600 a-m-0">Grijze secundaire tekst</p>
    
    <!-- Span Element -->
    <span class="a-text a-text-3 a-bg-yellow-100">Dit is een inline span element</span>
</div>

Buttons

Basis button element. Gebouwd met a-button + a-clickable + a-hoverable.

Primary Button Secondary Button Small Large Button 
<div class="a-flex a-gap-3 a-flex-wrap a-items-center a-p-3 a-bg-off-white a-rounded-md">
    <!-- Primary Button -->
    <a href="#" 
   class="a-button a-clickable a-hoverable ts-button ts-button--primary">Primary Button</a>

    <!-- Secondary Button -->
    <a href="#" 
   class="a-button a-clickable a-hoverable ts-button ts-button--secondary">Secondary Button</a>

    <!-- Small Button -->
    <a href="#" 
   class="a-button a-clickable a-hoverable ts-button ts-button--primary ts-button--small">Small</a>

    <!-- Large Button -->
    <a href="#" 
   class="a-button a-clickable a-hoverable ts-button ts-button--primary ts-button--large">Large Button</a>
</div>

Button

Individuele button atom met text, href en variant parameters.

Click Me 
<a href="#" 
   class="a-button a-clickable a-hoverable ts-button ts-button--primary">Click Me</a>

Icon

SVG icon atom met voorgedefinieerde icons (phone, email, location, social media, etc).

Contact Icons

Social Media Icons

Navigation Icons

Verschillende groottes

Aangepaste kleuren

<div class="a-space-y-4">
    <!-- Contact Icons -->
    <div>
        <h4 class="a-text-sm a-text-gray-600 a-mb-2">Contact Icons</h4>
        <div class="a-flex a-gap-3 a-items-center">
            <svg class="a-icon" 
     width="1" 
     height="1" 
     viewBox="0 0 24 24" 
     fill="currentColor"><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></svg>
            <svg class="a-icon" 
     width="1" 
     height="1" 
     viewBox="0 0 24 24" 
     fill="currentColor"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>
            <svg class="a-icon" 
     width="1" 
     height="1" 
     viewBox="0 0 24 24" 
     fill="currentColor"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>
        </div>
    </div>
    
    <!-- Social Icons -->
    <div>
        <h4 class="a-text-sm a-text-gray-600 a-mb-2">Social Media Icons</h4>
        <div class="a-flex a-gap-3 a-items-center">
            <svg class="a-icon" 
     width="1" 
     height="1" 
     viewBox="0 0 24 24" 
     fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
            <svg class="a-icon" 
     width="1" 
     height="1" 
     viewBox="0 0 24 24" 
     fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
        </div>
    </div>
    
    <!-- Navigation Icons -->
    <div>
        <h4 class="a-text-sm a-text-gray-600 a-mb-2">Navigation Icons</h4>
        <div class="a-flex a-gap-3 a-items-center">
            <svg class="a-icon" 
     width="1" 
     height="1" 
     viewBox="0 0 24 24" 
     fill="currentColor"><g fill="none" stroke="currentColor" stroke-width="2">
        <line x1="3" y1="6" x2="21" y2="6"></line>
        <line x1="3" y1="12" x2="21" y2="12"></line>
        <line x1="3" y1="18" x2="21" y2="18"></line>
      </g></svg>
        </div>
    </div>
    
    <!-- Different Sizes -->
    <div>
        <h4 class="a-text-sm a-text-gray-600 a-mb-2">Verschillende groottes</h4>
        <div class="a-flex a-gap-3 a-items-center">
            <svg class="a-icon" 
     width="16" 
     height="16" 
     viewBox="0 0 24 24" 
     fill="currentColor"><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></svg>
            <svg class="a-icon" 
     width="24" 
     height="24" 
     viewBox="0 0 24 24" 
     fill="currentColor"><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></svg>
            <svg class="a-icon" 
     width="32" 
     height="32" 
     viewBox="0 0 24 24" 
     fill="currentColor"><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></svg>
            <svg class="a-icon" 
     width="48" 
     height="48" 
     viewBox="0 0 24 24" 
     fill="currentColor"><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></svg>
        </div>
    </div>
    
    <!-- Custom Colors -->
    <div>
        <h4 class="a-text-sm a-text-gray-600 a-mb-2">Aangepaste kleuren</h4>
        <div class="a-flex a-gap-3 a-items-center">
            <svg class="a-icon" 
     width="2" 
     height="2" 
     viewBox="0 0 24 24" 
     fill="#DC2626"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>
            <svg class="a-icon" 
     width="2" 
     height="2" 
     viewBox="0 0 24 24" 
     fill="#059669"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>
            <svg class="a-icon" 
     width="2" 
     height="2" 
     viewBox="0 0 24 24" 
     fill="#2563EB"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>
        </div>
    </div>
</div>

Image

Herbruikbare image atom met parameters voor src, alt en loading strategy.

Basis afbeelding

Johan Groenen - Partner bij Tiltshift

Afbeelding met custom styling

Workshop Crazy Eight Straatnotes

Loading strategies

Default is lazy loading, maar voor belangrijke afbeeldingen kun je eager loading gebruiken

Information Radiator 
<div class="a-space-y-4">
    <!-- Basic Image -->
    <div>
        <h4 class="a-text-sm a-text-gray-600 a-mb-2">Basis afbeelding</h4>
        <div class="a-max-w-sm">
<img src="https://cdn.tiltshift.nl/assets/mensen/Johan-Groenen-Partner-Tiltshift.jpg" alt="Johan Groenen - Partner bij Tiltshift" loading="lazy">
        </div>
    </div>
    
    <!-- Image with custom classes -->
    <div>
        <h4 class="a-text-sm a-text-gray-600 a-mb-2">Afbeelding met custom styling</h4>
        <div class="a-flex a-gap-3">
<img src="https://cdn.tiltshift.nl/assets/img/Workshop-Crazy-Eight-Ideation-Warroom.jpg" alt="Workshop Crazy Eight" class="a-rounded-md a-w-48" loading="lazy">
<img src="https://cdn.tiltshift.nl/assets/img/Straatnotes-Straatcoaches-op-Straat-software-jeugdoverlast-terugdringen.jpg" alt="Straatnotes" class="a-rounded-lg a-shadow-md a-w-48" loading="lazy">
        </div>
    </div>
    
    <!-- Different loading strategies -->
    <div>
        <h4 class="a-text-sm a-text-gray-600 a-mb-2">Loading strategies</h4>
        <p class="a-text-xs a-text-gray-500 a-mb-2">Default is lazy loading, maar voor belangrijke afbeeldingen kun je eager loading gebruiken</p>
        <div class="a-max-w-xs">
<img src="https://cdn.tiltshift.nl/assets/img/Information-Radiator-War-Room-Wand-met-Stickies.jpg" alt="Information Radiator" class="a-rounded-md" loading="eager">
        </div>
    </div>
</div>

Image Container

Responsive afbeelding containers. Gebouwd met a-image-container.

Voorbeeld 1
Voorbeeld 2
Voorbeeld 3 
<div class="a-flex a-gap-3 a-mb-3 a-flex-wrap a-justify-center">
    <div class="a-image-container a-h-160 a-rounded-md a-min-w-48">
        <img src="/assets/mensen/Johan-Groenen-Partner-Tiltshift.jpg" alt="Voorbeeld 1">
    </div>
    <div class="a-image-container a-h-160 a-rounded-lg a-shadow-md a-min-w-48">
        <img src="/assets/mensen/Joris-Boeren-Partner-Tiltshift.jpg" alt="Voorbeeld 2">
    </div>
    <div class="a-image-container a-h-160 a-rounded-sm a-min-w-48">
        <img src="/assets/img/Workshop-Crazy-Eight-Ideation-Warroom.jpg" alt="Voorbeeld 3">
    </div>
</div>

Separator

Visuele scheider atom voor breadcrumbs en lijsten. Types zijn slash, pipe, dot, arrow.

Verschillende types

Item / Item | Item • Item → Item

In breadcrumb context

Verschillende groottes

/ / / /

Zonder spacing

Compact / Layout 
<div class="a-space-y-4">
    <!-- Different Types -->
    <div>
        <h4 class="a-text-sm a-text-gray-600 a-mb-2">Verschillende types</h4>
        <div class="a-flex a-gap-2 a-items-center">
            <span class="a-text-sm">Item</span>
            <span class="a-text-1 a-text-grey a-mx-1">/</span>
            <span class="a-text-sm">Item</span>
            <span class="a-text-1 a-text-grey a-mx-1">|</span>
            <span class="a-text-sm">Item</span>
            <span class="a-text-1 a-text-grey a-mx-1">•</span>
            <span class="a-text-sm">Item</span>
            <span class="a-text-1 a-text-grey a-mx-1">→</span>
            <span class="a-text-sm">Item</span>
        </div>
    </div>
    
    <!-- In Breadcrumb Context -->
    <div>
        <h4 class="a-text-sm a-text-gray-600 a-mb-2">In breadcrumb context</h4>
        <nav class="a-flex a-items-center">
            <a href="#" class="a-text-sm a-text-primary-dark a-clickable">Home</a>
            <span class="a-text-0 a-text-grey a-mx-1">/</span>
            <a href="#" class="a-text-sm a-text-primary-dark a-clickable">Producten</a>
            <span class="a-text-0 a-text-grey a-mx-1">/</span>
            <span class="a-text-sm a-text-grey">Detail</span>
        </nav>
    </div>
    
    <!-- Different Sizes -->
    <div>
        <h4 class="a-text-sm a-text-gray-600 a-mb-2">Verschillende groottes</h4>
        <div class="a-flex a-gap-3 a-items-center">
            <span class="a-text-xs a-text-grey a-mx-1">/</span>
            <span class="a-text-sm a-text-grey a-mx-1">/</span>
            <span class="a-text-md a-text-grey a-mx-1">/</span>
            <span class="a-text-lg a-text-grey a-mx-1">/</span>
        </div>
    </div>
    
    <!-- Without Spacing -->
    <div>
        <h4 class="a-text-sm a-text-gray-600 a-mb-2">Zonder spacing</h4>
        <div class="a-flex a-items-center">
            <span class="a-text-sm">Compact</span>
            <span class="a-text-1 a-text-grey a-mx-1">/</span>
            <span class="a-text-sm">Layout</span>
        </div>
    </div>
</div>

Labels & Tags

Kleine informatieve labels/tags voor categorisering. Gebouwd met a-tag + kleur utilities.

Default Primary Dark Secondary 
<div class="a-flex a-gap-2 a-flex-wrap">
    <span class="a-tag a-text a-bg-off-white ts-label">Default</span>
    
    <span class="a-tag a-text a-bg-primary a-text-white ts-label ts-label--primary">Primary</span>
    
    <span class="a-tag a-text a-bg-black a-text-white ts-label ts-label--dark">Dark</span>
    
    <span class="a-tag a-text ts-label ts-label--secondary">Secondary</span>
</div>

Tag

Individuele tag atom met text en variant parameters.

Example Tag 
<span class="a-tag a-text a-bg-primary a-text-white ts-label ts-label--primary">Example Tag</span>

Color Swatch

Kleur weergave atom met automatische tekst contrast. Toont kleurnaam, hex code en beschrijving.

Primary Red
#E64544
Energie & Actie
Primary Blue
#1E59A6
Vertrouwen & Stabiliteit
Black
#1D1621
Kracht & Professionaliteit
White
#FFFFFF
Helderheid & Eenvoud 
<div class="a-grid-auto a-gap-3">
    <div class="a-color-swatch a-rounded-md a-overflow-hidden a-min-h-24 " 
     style="background-color: #E64544; color: #FFFFFF;">
    <div class="a-p-4">
        <div class="a-font-bold a-mb-1" style="color: #FFFFFF;">
            Primary Red
        </div>
        <code class="a-font-mono a-text-sm a-font-bold" style="color: #FFFFFF; background: none;">#E64544</code>
        
            <div class="a-text-sm a-mt-2" style="color: #FFFFFF; opacity: 0.85;">
                Energie & Actie
            </div>
        
    </div>
</div>
    
    <div class="a-color-swatch a-rounded-md a-overflow-hidden a-min-h-24 " 
     style="background-color: #1E59A6; color: #FFFFFF;">
    <div class="a-p-4">
        <div class="a-font-bold a-mb-1" style="color: #FFFFFF;">
            Primary Blue
        </div>
        <code class="a-font-mono a-text-sm a-font-bold" style="color: #FFFFFF; background: none;">#1E59A6</code>
        
            <div class="a-text-sm a-mt-2" style="color: #FFFFFF; opacity: 0.85;">
                Vertrouwen & Stabiliteit
            </div>
        
    </div>
</div>
    
    <div class="a-color-swatch a-rounded-md a-overflow-hidden a-min-h-24 " 
     style="background-color: #1D1621; color: #FFFFFF;">
    <div class="a-p-4">
        <div class="a-font-bold a-mb-1" style="color: #FFFFFF;">
            Black
        </div>
        <code class="a-font-mono a-text-sm a-font-bold" style="color: #FFFFFF; background: none;">#1D1621</code>
        
            <div class="a-text-sm a-mt-2" style="color: #FFFFFF; opacity: 0.85;">
                Kracht & Professionaliteit
            </div>
        
    </div>
</div>
    
    <div class="a-color-swatch a-rounded-md a-overflow-hidden a-min-h-24 a-border" 
     style="background-color: #FFFFFF; color: #1D1621;">
    <div class="a-p-4">
        <div class="a-font-bold a-mb-1" style="color: #1D1621;">
            White
        </div>
        <code class="a-font-mono a-text-sm a-font-bold" style="color: #1D1621; background: none;">#FFFFFF</code>
        
            <div class="a-text-sm a-mt-2" style="color: #1D1621; opacity: 0.85;">
                Helderheid & Eenvoud
            </div>
        
    </div>
</div>
</div>

Atomic Utility Classes

Naast componenten bieden we ook utility classes voor snelle styling. Alle volgen het ABEM pattern met a- prefix.

Layout

  • a-block, a-inline-block
  • a-flex, a-inline-flex
  • a-grid, a-grid-auto
  • a-relative, a-absolute, a-fixed

Spacing

  • a-p-{0-5} - padding
  • a-m-{0-5} - margin
  • a-gap-{1-5} - gap

Typography

  • a-text-{xs,sm,md,lg,xl,2xl}
  • a-font-{normal,semibold,bold}
  • a-text-{color}

Colors & Effects

  • a-bg-{color}
  • a-border
  • a-rounded-{sm,md,lg}
  • a-shadow-{sm,md,lg}