SideBySide varianten

Hero achtergrond

Varianten op deze pagina

  • Wit met shapes (rechts, links)
  • Lichtgrijs met polygons (rechts, links)
  • Donker secondary met polygons (rechts, links) + wit ertussen
  • Donker primary met polygons (rechts, links) + wit ertussen
  • Donker gray met polygons (rechts, links) + wit ertussen
  • Sticky content met meerdere beelden of een lang codeblok
  • Sticky content die per beeld of per coderegel wisselt

TECHNIEK 1 • TECHNIEK 2 • TECHNIEK 3

Wit — image links

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed lacus ultrices, blandit elit vitae, imperdiet tortor.

Donec condimentum sit amet magna vel tincidunt. Sed ullamcorper tortor maximus, dignissim urna vulputate, tempor libero.

Lees meer
Laptop

TECHNIEK 1 • TECHNIEK 2 • TECHNIEK 3

Wit — image rechts

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed lacus ultrices, blandit elit vitae, imperdiet tortor.

Donec condimentum sit amet magna vel tincidunt. Sed ullamcorper tortor maximus, dignissim urna vulputate, tempor libero.

Ontdek ons team
Meeting

TECHNIEK 1 • TECHNIEK 2 • TECHNIEK 3

Lichtgrijs — image links

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed lacus ultrices, blandit elit vitae, imperdiet tortor.

Donec condimentum sit amet magna vel tincidunt. Sed ullamcorper tortor maximus, dignissim urna vulputate, tempor libero.

Lees meer
Laptop

TECHNIEK 1 • TECHNIEK 2 • TECHNIEK 3

Lichtgrijs — image rechts

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed lacus ultrices, blandit elit vitae, imperdiet tortor.

Donec condimentum sit amet magna vel tincidunt. Sed ullamcorper tortor maximus, dignissim urna vulputate, tempor libero.

Ontdek ons team
Meeting

TECHNIEK 1 • TECHNIEK 2 • TECHNIEK 3

Donker secondary — image links

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed lacus ultrices, blandit elit vitae, imperdiet tortor.

Donec condimentum sit amet magna vel tincidunt. Sed ullamcorper tortor maximus, dignissim urna vulputate, tempor libero.

Lees meer
Laptop

TECHNIEK 1 • TECHNIEK 2 • TECHNIEK 3

Wit tussenstuk — image rechts

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed lacus ultrices, blandit elit vitae, imperdiet tortor.

Ontdek ons team
Meeting

TECHNIEK 1 • TECHNIEK 2 • TECHNIEK 3

Donker secondary — image rechts

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed lacus ultrices, blandit elit vitae, imperdiet tortor.

Donec condimentum sit amet magna vel tincidunt. Sed ullamcorper tortor maximus, dignissim urna vulputate, tempor libero.

Ontdek ons team
Meeting

TECHNIEK 1 • TECHNIEK 2 • TECHNIEK 3

Wit tussenstuk — image links

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed lacus ultrices, blandit elit vitae, imperdiet tortor.

Lees meer
Laptop

TECHNIEK 1 • TECHNIEK 2 • TECHNIEK 3

Donker primary — image rechts

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed lacus ultrices, blandit elit vitae, imperdiet tortor.

Donec condimentum sit amet magna vel tincidunt. Sed ullamcorper tortor maximus, dignissim urna vulputate, tempor libero.

Ontdek ons team
Meeting

TECHNIEK 1 • TECHNIEK 2 • TECHNIEK 3

Wit tussenstuk — image links

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed lacus ultrices, blandit elit vitae, imperdiet tortor.

Lees meer
Laptop

TECHNIEK 1 • TECHNIEK 2 • TECHNIEK 3

Donker primary — image links

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed lacus ultrices, blandit elit vitae, imperdiet tortor.

Donec condimentum sit amet magna vel tincidunt. Sed ullamcorper tortor maximus, dignissim urna vulputate, tempor libero.

Lees meer
Laptop

TECHNIEK 1 • TECHNIEK 2 • TECHNIEK 3

Wit tussenstuk — image rechts

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed lacus ultrices, blandit elit vitae, imperdiet tortor.

Ontdek ons team
Meeting

TECHNIEK 1 • TECHNIEK 2 • TECHNIEK 3

Donker gray — image links

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed lacus ultrices, blandit elit vitae, imperdiet tortor.

Donec condimentum sit amet magna vel tincidunt. Sed ullamcorper tortor maximus, dignissim urna vulputate, tempor libero.

Lees meer
Laptop

TECHNIEK 1 • TECHNIEK 2 • TECHNIEK 3

Wit tussenstuk — image rechts

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed lacus ultrices, blandit elit vitae, imperdiet tortor.

Ontdek ons team
Meeting

TECHNIEK 1 • TECHNIEK 2 • TECHNIEK 3

Donker gray — image rechts

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed lacus ultrices, blandit elit vitae, imperdiet tortor.

Donec condimentum sit amet magna vel tincidunt. Sed ullamcorper tortor maximus, dignissim urna vulputate, tempor libero.

Ontdek ons team
Meeting

MEERDERE BEELDEN

Sticky content — beelden rechts

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed lacus ultrices, blandit elit vitae, imperdiet tortor.

Donec condimentum sit amet magna vel tincidunt. Sed ullamcorper tortor maximus, dignissim urna vulputate, tempor libero. De content en de shapes blijven sticky terwijl de beelden langs scrollen.

Ontdek ons team
LaptopMeetingLaptop

MEERDERE BEELDEN

Sticky content — beelden links

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed lacus ultrices, blandit elit vitae, imperdiet tortor.

Donec condimentum sit amet magna vel tincidunt. Sed ullamcorper tortor maximus, dignissim urna vulputate, tempor libero. De content en de shapes blijven sticky terwijl de beelden langs scrollen.

Lees meer
LaptopMeetingLaptop

STICKY MEDIA

Sticky content — lang codeblok

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed lacus ultrices, blandit elit vitae, imperdiet tortor.

Donec condimentum sit amet magna vel tincidunt. De content en de shapes blijven sticky terwijl je door het lange codeblok scrollt, tot het einde is bereikt.

Lees meer
typescript
import { component$, useSignal, useTask$ } from "@builder.io/qwik";

interface Todo {
  id: number;
  title: string;
  done: boolean;
}

export const TodoList = component$(() => {
  const todos = useSignal<Todo[]>([]);
  const filter = useSignal<"all" | "open" | "done">("all");

  useTask$(({ track }) => {
    track(() => filter.value);
    console.log("Filter gewijzigd naar", filter.value);
  });

  const addTodo = (title: string) => {
    todos.value = [...todos.value, { id: Date.now(), title, done: false }];
  };

  const toggle = (id: number) => {
    todos.value = todos.value.map((todo) =>
      todo.id === id ? { ...todo, done: !todo.done } : todo,
    );
  };

  const visible = todos.value.filter((todo) => {
    if (filter.value === "open") return !todo.done;
    if (filter.value === "done") return todo.done;
    return true;
  });

  return (
    <section>
      <h2>Taken ({visible.length})</h2>
      <ul>
        {visible.map((todo) => (
          <li key={todo.id} onClick$={() => toggle(todo.id)}>
            {todo.done ? "✓" : "○"} {todo.title}
          </li>
        ))}
      </ul>
    </section>
  );
});

STICKY MEDIA

Sticky content — codeblok links

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed lacus ultrices, blandit elit vitae, imperdiet tortor.

Donec condimentum sit amet magna vel tincidunt. Sed ullamcorper tortor maximus, dignissim urna vulputate, tempor libero.

Lees meer
typescript
export type Result<T, E = Error> =
  | { ok: true; value: T }
  | { ok: false; error: E };

export async function fetchJson<T>(url: string): Promise<Result<T>> {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      return { ok: false, error: new Error(`HTTP ${response.status}`) };
    }
    const value = (await response.json()) as T;
    return { ok: true, value };
  } catch (error) {
    return {
      ok: false,
      error: error instanceof Error ? error : new Error("Onbekende fout"),
    };
  }
}

export function unwrap<T>(result: Result<T>): T {
  if (result.ok) return result.value;
  throw result.error;
}

STAP 1 — INVENTARISEREN

Wisselende content — beelden rechts

Zolang het eerste beeld bovenaan de kolom staat, blijft deze tekst staan. Het anker verwijst naar het pad van de afbeelding.

Lees meer
Overleg

STAP 2 — ONTWERPEN

Tweede beeld, tweede verhaal

Zodra het tweede beeld de bovenkant van de kolom raakt, neemt deze slide over. Elke slide heeft zijn eigen overline, titel en actie.

Ontdek ons team
Overleg

STAP 3 — BOUWEN

Alleen de bestandsnaam

Een anker mag ook alleen de bestandsnaam zijn, zolang die binnen het blok uniek is.

Laptop

STAP 4 — OPLEVEREN

Afsluiten bij het laatste beeld

Na de laatste slide scrollt de pagina gewoon verder.

  • Anker het beeld dat de wissel triggert

  • Slides mogen bullets in plaats van paragrafen gebruiken

Laptop
OverlegOverlegLaptopLaptop

STAP 1 — INVENTARISEREN

Wisselende content — beelden links

De beeldkolom staat links en de wisselende content rechts. De ankers werken hetzelfde.

Laptop

STAP 2 — ONTWERPEN

Tweede beeld, tweede verhaal

Donec condimentum sit amet magna vel tincidunt. Sed ullamcorper tortor maximus, dignissim urna vulputate.

Overleg

STAP 3 — BOUWEN

Derde beeld, derde verhaal

Elk beeld in de kolom heeft hier zijn eigen contentblok, zodat de wissels één op één te volgen zijn.

Laptop

STAP 4 — OPLEVEREN

Afsluiten bij het laatste beeld

Na de laatste slide scrollt de pagina gewoon verder.

Lees meer
Overleg
LaptopOverlegLaptopOverleg

REGEL 1 — OPZET

Wisselende content — ankers in de code

Bij een codeblok verwijst het anker naar een regel code. De content wisselt zodra die regel bovenaan de kolom staat.

typescript
import { component$, useSignal, useTask$ } from "@builder.io/qwik";

interface CartLine {
  sku: string;
  quantity: number;
  price: number;
}

export const Cart = component$(() => {
  const lines = useSignal<CartLine[]>([]);
  const coupon = useSignal("");

REGEL 13 — REAGEREN

Een task die de kortingscode volgt

Een anker mag de tekst van een coderegel zijn; voorloopspaties doen niet mee.

typescript
useTask$(({ track }) => {
    track(() => coupon.value);
    console.log("Kortingscode gewijzigd", coupon.value);
  });

  const addLine = (line: CartLine) => {
    lines.value = [...lines.value, line];
  };

  const removeLine = (sku: string) => {
    lines.value = lines.value.filter((line) => line.sku !== sku);
  };

REGEL 26 — REKENEN

Het subtotaal afleiden

Staat dezelfde regel meerdere keren in het blok? Voeg dan occurrence="2" toe om de tweede te kiezen.

typescript
const subtotal = lines.value.reduce(
    (total, line) => total + line.quantity * line.price,
    0,
  );

REGEL 31 — RENDEREN

Afsluiten in de render

Een anker mag ook een regelnummer zijn, handig bij regels die niet uniek zijn.

Lees meer
typescript
return (
    <section>
      <h2>Winkelwagen ({lines.value.length})</h2>
      <p>Subtotaal: {subtotal.toFixed(2)}</p>
      <button type="button" onClick$={() => removeLine("sku-1")}>
        Laatste regel verwijderen
      </button>
    </section>
  );
});
typescript
import { component$, useSignal, useTask$ } from "@builder.io/qwik";

interface CartLine {
  sku: string;
  quantity: number;
  price: number;
}

export const Cart = component$(() => {
  const lines = useSignal<CartLine[]>([]);
  const coupon = useSignal("");

  useTask$(({ track }) => {
    track(() => coupon.value);
    console.log("Kortingscode gewijzigd", coupon.value);
  });

  const addLine = (line: CartLine) => {
    lines.value = [...lines.value, line];
  };

  const removeLine = (sku: string) => {
    lines.value = lines.value.filter((line) => line.sku !== sku);
  };

  const subtotal = lines.value.reduce(
    (total, line) => total + line.quantity * line.price,
    0,
  );

  return (
    <section>
      <h2>Winkelwagen ({lines.value.length})</h2>
      <p>Subtotaal: {subtotal.toFixed(2)}</p>
      <button type="button" onClick$={() => removeLine("sku-1")}>
        Laatste regel verwijderen
      </button>
    </section>
  );
});

CONTACT

Neem contact met ons op

Heb je een vraag of wil je sparren over je software? Laat je gegevens achter, dan nemen we snel contact met je op.