Components

Pass data in with parameters and accept nested markup with RenderFragment.

Parameters

Mark public properties with [Parameter] to receive values from a parent.

<div class="badge @Color">@Text</div>

@code {
    [Parameter] public string Text { get; set; } = "";
    [Parameter] public string Color { get; set; } = "blue";
}

Use it: <Badge Text="New" Color="green" />

Child content

A RenderFragment named ChildContent captures the markup between the component tags.

<div class="card">@ChildContent</div>

@code {
    [Parameter] public RenderFragment? ChildContent { get; set; }
}