Sections

Every page is a list of sections in its front matter: sections: in index.md, works.md, notes.md and contact.md. Each item is one section, shown in the order you list them.

The quickest way to start is the /blocks/ catalogue. It shows every section and variant live, with a Copy snippet button. Paste the snippet under sections: and change the words. The same page is in your copy at /blocks/ when you run the site.

---
layout: page
title: "About"
description: "One sentence for search engines."
sections:
  - type: page-header
    badge: About
    heading: Hi, I'm Daniel
    text: I design and code beautifully simple things.
  - type: services
    variant: grid
    tone: band
    heading: What I do
    items:
      - title: Design
        text: Digital products with unique ideas
        icon: pen
---

Use layout: home or layout: page for a page made of sections. They work the same. Add permalink: to give the page its address. Anything you write below the front matter appears after the sections.

YAML is fussy about two things. Keep the indentation exactly as in the examples (spaces, never tabs). If a line of text contains a colon followed by a space, wrap it in quotes: text: "Note: I'm away in August.".

Settings every section has

Field	What it does
type	Which section: hero, page-header, services, logos, works, testimonials, awards, notes or contact.
variant	Which look, where a type has more than one. Each type has a default.
id	The section’s address on the page (#services). Defaults to its type. Set it if you use a type twice on one page.
tone	The background: default, band (a slightly different shade) or mint (a bright mint call to action, always dark text).
hidden	true switches the section off without deleting it.

Bands. Set tone: band on every other section for the alternating background down the page. Sections without tone use default. The footer is always a band.

Hiding. hidden: true keeps the section in your file but leaves it out of the page. Remove the line or set it to false to bring the section back.

Most sections with a heading also accept these:

Field	What it does
eyebrow	A tiny word above the heading.
heading	The heading. Inline Markdown works (**bold**, *italic*, links).
note	A short line beside the heading.
intro	A paragraph under the heading. Markdown works.

Where a section uses these differently, it says so below.

hero

The opening screen. Use it once, first. It never fades in, so the heading and portrait appear straight away.

• Variants: portrait (the default: words on the left, your cut-out portrait on a soft disc on the right, with floating chips) and text (words only, with the stats under the action).
• Fields: badge, heading, text (Markdown), action (label, url), stats (a list of value and label), and for portrait: image and chips.
• heading is plain text. A new line in a | block becomes a line break.
• Each chip is a small round badge: image (a path to a file, shown at 64 × 64), alt, at (left, top or right, where it floats) and size (s, m or l).
• image takes src, widths, width, height and alt. See Pictures.
• With variant: text, image and chips are ignored.

  - type: hero
    variant: portrait
    badge: Front-End Developer
    heading: |
      Talk is cheap.
      Show me the code
    text: I design and code beautifully simple things.
    action:
      label: Let's chat!
      url: /contact/
    stats:
      - value: "12"
        label: Years experience
    image:
      src: /assets/img/hero/developer
      widths: [380, 560, 754]
      width: 754
      height: 764
      alt: Daniel in a grey hoodie
    chips:
      - image: /assets/img/hero/logo-node.webp
        alt: Node.js
        at: right
        size: l

page-header

The opening of an inner page (Works, Notes, Contact). It’s the page’s one h1.

• Variant: simple.
• Fields: badge, heading (defaults to the page’s title), text (Markdown) and stats (like the hero’s). It has no eyebrow, note or intro.

  - type: page-header
    badge: Selected work
    heading: Works
    text: A few of the sites and apps I've designed and built.

services

What you do, as cards.

• Variants:
  • intro (the default): stacked cards on one side, a short hello on the other. Looks best with tone: band.
  • grid: a heading on top, then the cards in rows of three, wrapping on smaller screens.
• Fields: eyebrow, heading, items. For intro also lead (an italic line) and text (Markdown). For grid also note and intro.
• Each item: title, text, icon (pen, code or target, or any file name in _includes/icons/), count (small text such as “20 projects”), url (the whole card becomes a link) and highlight (true sets the title in mint; the demo does it on the first card).

  - type: services
    variant: intro
    tone: band
    eyebrow: Introduce
    heading: Hello! I'm Daniel Stephan
    lead: Every great design begins with an even better story
    text: |
      I've done remote work for agencies and startups.
    items:
      - title: Design
        text: Create digital products and unique ideas
        icon: pen
        count: 20 projects
        highlight: true

logos

The clients you’ve worked with.

• Variant: grid (centred rows of up to five logos on desktop, three on tablets, two on phones).
• Fields: heading, hide_heading and items. If there’s no heading, or hide_heading: true, the heading stays for screen readers only. With no heading at all it reads “Clients” (change it in _data/strings.yml).
• Each item: name (the picture’s alt text), image, width, height and url (optional link).
• Use a white logo on a transparent background, as SVG, PNG or WebP. Izar darkens it in light mode. width and height are the file’s own size (for an SVG, its viewBox).

  - type: logos
    variant: grid
    tone: band
    heading: Clients I have worked with
    hide_heading: true
    items:
      - { name: Northwind Labs, image: /assets/img/clients/northwind.svg, width: 133, height: 48 }
      - { name: Kiko, image: /assets/img/clients/kiko.svg, width: 100, height: 44, url: "https://kiko.example" }

works

Your projects as cards. It reads the files in _projects/, not inline items. See Works.

• Variants:
  • staggered (the default): two columns on wide screens, with the heading, first card and link on the left and the other cards offset on the right.
  • grid: the heading on top and the cards in a tidy grid, three across on wide screens when there are more than four.
• Fields: heading, note, eyebrow, intro, limit, show, items, link, footnote and hidden_heading.
• Which projects show:
  • By default, the projects with featured: true, sorted by order.
  • show: all lists every project by order.
  • items hand-picks and orders the cards by file name without .md ([lewis, finaco]).
• limit is how many cards show. The default is 3 for staggered and 4 for grid, and it applies to items too. If you hand-pick more than that, set limit as well. With show: all the limit is 100 unless you set one.
• link is the “All projects” link (label, url). footnote is small print under it (Markdown).
• With no heading, a hidden one (“Projects”) keeps the page outline right for screen readers. Change its words with hidden_heading.

  - type: works
    variant: staggered
    heading: Latest Works
    note: Perfect solutions for digital experience
    limit: 3
    link:
      label: All projects
      url: /works/
    footnote: '\* Some projects aren''t public. [Contact me](/contact/) to see more.'

On works.md, the demo uses variant: grid with show: all and no heading.

testimonials

What clients say.

• Variants:
  • tabs (the default): one quote card at a time. The people underneath are tabs, with a mint bar that slides between them. Arrow keys, Home and End move between them. Without JavaScript, every quote shows as its own card.
  • grid: every quote in its own card, in one, two or three columns by screen width. Best for six quotes or more.
• Fields: eyebrow, heading, note, intro and items.
• Each item: quote, name, role, company, company_url (links the company name in the quote card), rating (1 to 5, optional) and avatar (src, width, height; widths works too).
• The avatar’s alt text is empty on purpose, because the name sits beside it.

  - type: testimonials
    variant: tabs
    tone: band
    heading: Testimonials
    note: What clients say about me
    items:
      - quote: Daniel was a real pleasure to work with.
        name: Benjamin Bryant
        role: VP & Co-Founder
        company: Wiser
        company_url: "https://wiser.example"
        rating: 5
        avatar: { src: /assets/img/people/benjamin-73.webp, width: 73, height: 73 }

awards

Recognition, grouped by year.

• Variant: list (the year in small mint text on the left, each award as two lines on the right).
• Fields: eyebrow, heading, note, intro and years.
• Each year: year and items. Each award: org (who gave it), award (its title), project (what won) and url (optional, links the project name). The little word between the award and the project (“for”) comes from _data/strings.yml.

  - type: awards
    variant: list
    heading: Awards
    years:
      - year: "2017"
        items:
          - org: Awwwards
            award: Site of the Year
            project: Lewis
            url: "https://lewis.example"

notes

Your latest notes (blog posts). It reads the files in _posts/, newest first, not inline items. See Notes.

• Variants:
  • list (the default): rows between hairlines with the date and reading time, title, description and topics. For the Notes page.
  • cards: three raised cards across, with a “Read” hint. For the home page.
  • tags: every topic as its own group, with its notes under it. For the Topics page.
• Fields: eyebrow, heading, note, intro, limit, tag, link, topics_link and hidden_heading.
• limit is how many notes show. The default is all for list and 3 for cards. tags ignores it.
• tag shows only the notes with that topic. tags ignores it.
• link (label, url) is a link under the list, such as “All notes”.
• topics_link (url, optional label) adds a small “All topics” link above the list. url defaults to /notes/tags/.
• With no heading, a hidden one (“All notes”) keeps the page outline right for screen readers. Change its words with hidden_heading.

  - type: notes
    variant: cards
    tone: band
    heading: From the Notes
    note: What I'm learning as I build
    limit: 3
    link:
      label: All notes
      url: /notes/

contact

How to reach you, with a message form beside it.

• Variant: form (your details on the left, the form in a raised card on the right; it stacks on phones).
• Fields: eyebrow, heading, intro, availability, budgets, topics and note.
• availability is a status line with a mint dot, such as “Booking projects from January”.
• budgets adds an optional “Budget” menu with the options you list. topics adds an optional “What’s it about?” menu. Leave a list out and its menu doesn’t appear.
• note is small text under the Send button. Unlike other sections, it doesn’t go beside the heading.
• Your email, address and profiles come from _config.yml. The form is set up under izar.form. See Contact form.

  - type: contact
    variant: form
    eyebrow: Contact
    heading: Let's build something
    intro: Tell me a little about your idea.
    availability: Booking projects from January
    budgets:
      - Under $3,000
      - $3,000 to $10,000
    topics:
      - A new website
      - A redesign
    note: I reply within two working days.

Using a section twice

Give each copy its own id, such as id: work-recent and id: work-archive, so the menu links and anchors don’t clash.