title: "Step 3 — Components" active_step: 3

# Step 3 — Components

HTML files in `components/` become custom tags.

## How components work

Any `.html` file in your `components/` directory becomes a usable custom tag. The filename maps to the tag name with a `what-` prefix.

File
components/info-box.html
components/stat-card.html
components/user-profile.html
Tag
<what-info-box>
<what-stat-card>
<what-user-profile>

## Props and defaults

The `<what>` block inside a component declares its props and default values. Props become template variables inside the component.

    <!-- components/info-box.html -->
    <what>
    props = "type, title"
    defaults.type = "info"
    </what>
    <div class="info-box-#type#">
      <strong>#title#</strong>
      <slot/>
    </div>

`<slot/>` is where child content goes when you use the component.

## Live example — the info-box component

This project includes a `components/info-box.html` component. Here it is in use with three different `type` prop values:

This is an informational message. The `type="info"` prop gives it a blue style. This uses `type="warning"`. The component switches its color based on this prop. And `type="success"` for green. One component, three looks — driven by props.

    <what-info-box type="info" title="Information">
      This is an informational message.
    </what-info-box>

    <what-info-box type="warning" title="Watch out">
      This uses type="warning".
    </what-info-box>

    <what-info-box type="success" title="All good">
      And type="success" for green.
    </what-info-box>

## Stat card — a second component

This project also includes a `components/stat-card.html` component with `label`, `value`, and `color` props. Here are four live instances:

    <!-- components/stat-card.html -->
    <what>
    props = "label, value, color"
    defaults.color = "indigo"
    </what>
    <div style="border-left: 3px solid #color#; ...">
      <div class="stat-value">#value#</div>
      <div class="stat-label">#label#</div>
    </div>

    <!-- Usage -->
    <what-stat-card label="Users" value="1,024"></what-stat-card>
    <what-stat-card label="Revenue" value="$42k" color="green"></what-stat-card>

## Components with conditionals

Components can use `<if>` inside their template to conditionally render parts based on prop values. The stat-card uses this to pick a border color. The info-box uses it for its background.

    <!-- Inside a component: conditionals on props -->
    <if color == green>
      <!-- Green styling -->
    </if>
    <if color == red>
      <!-- Red styling -->
    </if>

## This page uses a component too

The sidebar navigation you're looking at right now is `components/tutorial-layout.html`. It receives an `active_step` prop from each page, highlights the correct nav item, and renders the prev/next footer. The layout is assigned via `site/tutorial/application.what`.

    <!-- site/tutorial/application.what -->
    layout = "components/tutorial-layout.html"

    <!-- site/tutorial/3.html -->
    <what>
    active_step: 3
    title: "Step 3 — Components"
    </what>

What you learned

- `components/name.html` becomes `<what-name>`
- Props are declared in the `<what>` block with `props = "a, b"`
- Default values: `defaults.type = "info"`
- `<slot/>` is where child HTML goes inside a component
- Components can use conditionals to vary output based on props
- Components can receive variables as props, not just strings