Molecules

Molecules zijn samengestelde componenten die zijn opgebouwd uit meerdere atomen. Ze bieden meer functionaliteit en complexiteit dan atomen, terwijl ze nog steeds eenvoudig en herbruikbaar blijven.

Page Intro

Herbruikbare pagina introductie met titel en beschrijving. Gebruikt voor consistente pagina headers.

Gebruikt: heading, text

Welkom bij het Design System

Dit is een voorbeeld van een page-intro molecule. Het wordt gebruikt voor consistente pagina headers door het hele design system.

Alleen een titel

Uitgebreide Introductie

Deze page-intro heeft een langere beschrijving om te laten zien hoe de component omgaat met meer tekst. De component zorgt voor de juiste spacing, typography en responsive gedrag. Perfect voor het introduceren van complexe onderwerpen of secties binnen je applicatie.

<!-- Page Intro Showcase - Standaard variant -->
<div class="m-page-intro o-section__header ">
    <h1 class="a-heading a-text-4 o-section__title">Welkom bij het Design System</h1>
    
        <p class="a-text a-text-2 a-m-0 o-section__description">Dit is een voorbeeld van een page-intro molecule. Het wordt gebruikt voor consistente pagina headers door het hele design system.</p>
    
</div>

<!-- Zonder description -->
<div class="a-mt-6">
<div class="m-page-intro o-section__header ">
    <h1 class="a-heading a-text-4 o-section__title">Alleen een titel</h1>
    
</div>
</div>

<!-- Met lange description -->
<div class="a-mt-6">
<div class="m-page-intro o-section__header ">
    <h1 class="a-heading a-text-4 o-section__title">Uitgebreide Introductie</h1>
    
        <p class="a-text a-text-2 a-m-0 o-section__description">Deze page-intro heeft een langere beschrijving om te laten zien hoe de component omgaat met meer tekst. De component zorgt voor de juiste spacing, typography en responsive gedrag. Perfect voor het introduceren van complexe onderwerpen of secties binnen je applicatie.</p>
    
</div>
</div>

Text Block

Flexibel tekstblok met titel, subtitel, content en optionele lijst. Ondersteunt highlight variant.

Gebruikt: heading, text

Onze aanpak

Gebruikersgericht en data-gedreven

We geloven in co-creatie met eindgebruikers en het gebruik van data voor betere besluitvorming. Onze agile aanpak zorgt voor snelle iteraties en continue verbetering.

  • Design Thinking workshops
  • Prototyping en user testing
  • Agile softwareontwikkeling

Belangrijk bericht

Dit is een gemarkeerd tekstblok voor belangrijke informatie of call-to-actions.

Services

Wij bieden verschillende services aan om uw digitale transformatie te ondersteunen.

<div class="a-space-y-4">
    <!-- Default text block -->

<div class="ts-text-block">
<h3 class="a-heading a-text-3 ts-text-block__title">Onze aanpak</h3>

<p class="a-text a-text-2 a-m-0 ts-text-block__subtitle">Gebruikersgericht en data-gedreven</p>

    <div class="ts-text-block__content">
<p class="a-text a-text-1 a-m-0">We geloven in co-creatie met eindgebruikers en het gebruik van data voor betere besluitvorming. Onze agile aanpak zorgt voor snelle iteraties en continue verbetering.</p>
        
        <ul>
            
            <li><span class="a-text a-text-2">Design Thinking workshops</span></li>
            
            <li><span class="a-text a-text-2">Prototyping en user testing</span></li>
            
            <li><span class="a-text a-text-2">Agile softwareontwikkeling</span></li>
            
        </ul>
        
    </div>
</div>

    <!-- Highlight variant -->
<div class="ts-text-block ts-text-block--highlight">
<h3 class="a-heading a-text-3 ts-text-block__title">Belangrijk bericht</h3>

    <div class="ts-text-block__content">
<p class="a-text a-text-1 a-m-0">Dit is een gemarkeerd tekstblok voor belangrijke informatie of call-to-actions.</p>
        
    </div>
</div>

    <!-- Without subtitle -->
<div class="ts-text-block">
<h3 class="a-heading a-text-3 ts-text-block__title">Services</h3>

    <div class="ts-text-block__content">
<p class="a-text a-text-1 a-m-0">Wij bieden verschillende services aan om uw digitale transformatie te ondersteunen.</p>
        
    </div>
</div>
</div>

Blockquote

Citaat component. Combineert a-max-w-sm, a-mx-auto, en typography atoms.

"Design thinking helpt ons om complexe problemen op te lossen door eerst écht te begrijpen wat gebruikers nodig hebben."

— Steve Jobs, Tiltshift 
<div class="m-blockquote a-max-w-sm a-mx-auto a-p-4 a-border-l-4 a-border-primary " role="blockquote">
<p class="a-text a-text-lg a-text-primary a-m-0 m-blockquote__text a-mb-3">"Design thinking helpt ons om complexe problemen op te lossen door eerst écht te begrijpen wat gebruikers nodig hebben."</p>
    <div class="m-blockquote__author a-block">
<span class="a-text a-text-sm">— Steve Jobs, Tiltshift</span>
    </div>
</div>

Project Card

Card component voor projecten met afbeelding, metadata en tags.

Datalab Innovatie
Meer Info
Gemeente Amsterdam

Datalab Innovatie Omgeving

Opzetten van een fysieke ruimte voor agile samenwerking en transparante project voortgang.

Agile Development Innovation 
<!-- Project card showcase -->
<div class="a-max-w-sm">
    
    <div class="m-project-card a-card ">
    
    
    
    
    
    
    <div class="m-project-card__image a-image-container a-relative">
<img src="https://cdn.tiltshift.nl/assets/img/Information-Radiator-War-Room-Wand-met-Stickies.jpg" alt="Datalab Innovatie" loading="lazy">
        <div class="m-project-card__overlay a-overlay a-flex-center">
            <span class="a-text a-text-lg a-text-white">Meer Info</span>
        </div>
    </div>
    <div class="m-project-card__content a-p-4">
        <div class="m-project-card__meta a-flex a-gap-2 a-mb-2">
            <span class="a-text a-text-sm">Gemeente Amsterdam</span>
        </div>
        <h4 class="a-heading a-text-3 m-project-card__title">Datalab Innovatie Omgeving</h4>
        <p class="a-text a-text-2 a-m-0 m-project-card__description">Opzetten van een fysieke ruimte voor agile samenwerking en transparante project voortgang.</p>
        
        <div class="m-project-card__tags a-flex a-gap-1">
            
                <span class="a-tag a-text a-bg-off-white ts-label">Agile</span>
            
                <span class="a-tag a-text a-bg-off-white ts-label">Development</span>
            
                <span class="a-tag a-text a-bg-off-white ts-label">Innovation</span>
            
        </div>
        
    </div>
</div>
</div>

People Card

Herbruikbare people card voor personen. Combineert a-block, a-image-container, en typography atoms.

Johan Groenen

Johan Groenen

Partner

 
<!-- People card showcase -->
<div class="a-max-w-sm">
    
<a href="#" class="m-people-card a-block a-clickable ts-person-block a-min-w-48 ">

    
    
    
    <div class="a-rounded-md a-overflow-hidden a-mx-auto a-mb-3 ts-person-block__image">
<img src="https://cdn.tiltshift.nl/assets/mensen/Johan-Groenen-Partner-Tiltshift.jpg" alt="Johan Groenen" loading="lazy">
    </div>
    <h4 class="a-heading a-text-3 a-mb-1 ts-person-block__name">Johan Groenen</h4>
    <p class="a-text a-text-sm a-m-0 ts-person-block__type">Partner</p>

</a>

</div>

Organization Card

Herbruikbare organization card voor organisaties. Toont logo, type, naam en beschrijving.

Gemeente

Gemeente Amsterdam

Samen werken aan digitale dienstverlening voor alle Amsterdammers.

<!-- Organization card met echte organisatie -->
<div class="a-max-w-sm">
    
<div class="m-organization-card a-block ts-organization-block ">

    
    
    
    
    
    <div class="m-organization-card__logo a-mb-3">
<img src="https://cdn.tiltshift.nl/assets/opdrachtgevers/gemeente-amsterdam.png" alt="Gemeente Amsterdam" class="a-max-h-16" loading="lazy">
    </div>
    <p class="a-text a-text-sm a-text-gray-600 a-m-0 m-organization-card__type a-mb-1">Gemeente</p>
    <h4 class="a-heading a-text-3 m-organization-card__name a-mb-2">Gemeente Amsterdam</h4>
    <p class="a-text a-text-sm a-m-0 m-organization-card__description">Samen werken aan digitale dienstverlening voor alle Amsterdammers.</p>

</div>

</div>

Subject Card

Herbruikbare subject card voor onderwerpen en diensten. Toont categorie, titel, beschrijving, duur en tags.

Workshop

Design Thinking workshops

Samen met teams ontdekken we kansen en creëren we innovatieve oplossingen voor complexe uitdagingen.

1-3 dagen

Innovatie Co-creatie Strategie 
<!-- Subject card met alle parameters -->
<div class="a-max-w-sm">
    
    
<div class="m-subject-card a-card ">

    
    
    
    
    
    <div class="m-subject-card__content a-p-4">
        <div class="m-subject-card__header a-mb-3">
            
                    <p class="a-text a-text-xs a-text-primary a-m-0 m-subject-card__category a-uppercase a-tracking-wide a-mb-1">Workshop</p>
                    <h4 class="a-heading a-text-3 m-subject-card__title">Design Thinking workshops</h4>
            
        </div>
        
        <p class="a-text a-text-2 a-m-0 m-subject-card__description a-mb-3">Samen met teams ontdekken we kansen en creëren we innovatieve oplossingen voor complexe uitdagingen.</p>
        
        
        <div class="m-subject-card__meta a-flex a-items-center a-gap-2 a-mb-3">
            <p class="a-text a-text-sm a-text-gray-600 a-m-0">1-3 dagen</p>
        </div>
        
        
        
        <div class="m-subject-card__tags a-flex a-gap-1 a-flex-wrap">
            
                <span class="a-tag a-text a-bg-off-white ts-label">Innovatie</span>
            
                <span class="a-tag a-text a-bg-off-white ts-label">Co-creatie</span>
            
                <span class="a-tag a-text a-bg-off-white ts-label">Strategie</span>
            
        </div>
        
    </div>

</div>

</div>

Call-to-Action

Contact CTA component met afbeelding, tekst en contactgegevens.

Neem contact op

Johan Groenen

Tijdens een vrijblijvend intake- en adviesgesprek bespreken we jouw situatie en hoe we daarbij kunnen helpen.

<!-- CTA showcase -->
<div class="ts-cta">
    <h3 class="a-heading a-text-3 ts-cta__title">Neem contact op</h3>
    <div class="ts-cta__body">
        <div class="ts-cta__image">
<img src="https://cdn.tiltshift.nl/assets/mensen/Johan-Groenen-Partner-Tiltshift.jpg" alt="Johan Groenen" loading="lazy">
        </div>
        <div class="ts-cta__right">
            <div class="ts-cta__text">
                <p class="a-text a-text-1 a-m-0">Tijdens een vrijblijvend intake- en adviesgesprek bespreken we jouw situatie en hoe we daarbij kunnen helpen.</p>
            </div>
            <div>
                <div class="a-mb-1">
                    <a href="+31207220207" 
   class="a-clickable a-text-2 a-text-primary-dark">020 722 02 07</a>
                </div>
                <div>
                    <a href="mailto:johan@tiltshift.nl" 
   class="a-clickable a-text-2 a-text-primary-dark">johan@tiltshift.nl</a>
                </div>
            </div>
        </div>
    </div>
</div>

Contact Info

Contact informatie component met iconen en links.

Contact

020 722 02 07
info@tiltshift.nl
Europalaan 2 B
3526 KS Utrecht

Hoofdkantoor

020 722 02 07
info@tiltshift.nl 
<!-- Contact info showcase -->
<div class="a-flex a-gap-4 a-flex-wrap">
    <!-- Default variant -->
    <div class="ts-contact-info">
        <h4 class="a-heading a-text-3 ts-contact-info__title">Contact</h4>
        <div class="ts-contact-info__item">
            <svg class="a-icon ts-contact-info__icon" 
     width="2" 
     height="2" 
     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>
            <a href="+31207220207" 
   class="a-clickable a-text-3 a-text-primary-dark ts-contact-info__link">020 722 02 07</a>
        </div>
        <div class="ts-contact-info__item">
            <svg class="a-icon ts-contact-info__icon" 
     width="2" 
     height="2" 
     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>
            
            <a href="mailto:info@tiltshift.nl" 
   class="a-clickable a-text-3 a-text-primary-dark ts-contact-info__link">info@tiltshift.nl</a>
        </div>
        <div class="ts-contact-info__item">
            <svg class="a-icon ts-contact-info__icon" 
     width="2" 
     height="2" 
     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 class="ts-contact-info__address">
                <div class="a-text a-text-2">Europalaan 2 B</div>
                
                <div class="a-text a-text-2">3526 KS Utrecht</div>
            </div>
        </div>
    </div>
    
    <!-- Card variant -->
    <div class="ts-contact-info ts-contact-info--card">
        <h4 class="a-heading a-text-3 ts-contact-info__title">Hoofdkantoor</h4>
        <div class="ts-contact-info__item">
            <svg class="a-icon ts-contact-info__icon" 
     width="2" 
     height="2" 
     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>
            <a href="+31207220207" 
   class="a-clickable a-text-3 a-text-primary-dark ts-contact-info__link">020 722 02 07</a>
        </div>
        <div class="ts-contact-info__item">
            <svg class="a-icon ts-contact-info__icon" 
     width="2" 
     height="2" 
     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>
            
            <a href="mailto:info@tiltshift.nl" 
   class="a-clickable a-text-3 a-text-primary-dark ts-contact-info__link">info@tiltshift.nl</a>
        </div>
    </div>
</div>

Map

Embedded map component voor locatie weergave.

<!-- Map showcase -->
<div class="a-max-w-2xl">
    <!-- Default size -->
<div class="ts-map">
    <iframe 
        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2435.665057088619!2d4.896489876871946!3d52.37906087203604!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47c609ba8ad6b1ab%3A0x84ce855c49e6c813!2sDanzigerbocht%2045F%2C%201013%20AM%20Amsterdam!5e0!3m2!1sen!2snl!4v1707475553761!5m2!1sen!2snl" 
        loading="lazy" 
        referrerpolicy="no-referrer-when-downgrade">
    </iframe>
</div>

<!-- Small variant -->
<div class="ts-map ts-map--small a-mt-4">
    <iframe 
        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2435.665057088619!2d4.896489876871946!3d52.37906087203604!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47c609ba8ad6b1ab%3A0x84ce855c49e6c813!2sDanzigerbocht%2045F%2C%201013%20AM%20Amsterdam!5e0!3m2!1sen!2snl!4v1707475553761!5m2!1sen!2snl" 
        loading="lazy" 
        referrerpolicy="no-referrer-when-downgrade">
    </iframe>
</div>

<!-- Large variant -->
<div class="ts-map ts-map--large a-mt-4">
    <iframe 
        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2435.665057088619!2d4.896489876871946!3d52.37906087203604!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47c609ba8ad6b1ab%3A0x84ce855c49e6c813!2sDanzigerbocht%2045F%2C%201013%20AM%20Amsterdam!5e0!3m2!1sen!2snl!4v1707475553761!5m2!1sen!2snl" 
        loading="lazy" 
        referrerpolicy="no-referrer-when-downgrade">
    </iframe>
</div>
</div>