Feature - Internal Links - Children

Automatically display child pages as a responsive card grid with thumbnails and descriptions

The Internal Links - Children feature automatically lists all child pages of the current page as a responsive grid of Bootstrap cards. Each card shows the child page's thumbnail, title, and description with a stretched link that makes the entire card clickable.

This feature is ideal for section landing pages where you want to present the available sub-pages visually. It requires no configuration — it discovers child pages automatically from the content tree and renders them using the page's own properties.

The view accesses child pages through UmbracoContext.PublishedRequest.PublishedContent.Children<WebPage>(), which returns strongly-typed child pages. Each child's PageTitle, PageDescription, and PageThumbnail properties are used to populate the card.

SVG thumbnails receive special treatment — instead of rendering as an <img> tag, the SVG file is read from disk and inlined directly into the HTML. This enables dark mode support, since inline SVGs inherit CSS colour properties while <img> tags do not.

Non-SVG images use Umbraco's GetCropUrl() to generate optimised thumbnails at 480px width.

@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<BlockGridItem<FeatureInternalLinksChildren>>
@inject IWebHostEnvironment WebHostEnvironment

@{
    Layout = "_Layout_Features.cshtml";
    var children = UmbracoContext?.PublishedRequest?.PublishedContent?.Children<WebPage>();
}

@if (children != null && children.Any())
{
    <div class="grid">
        @foreach (var childPage in children)
        {
            var thumbnail = childPage.PageThumbnail;
            <div class="g-col-12 g-col-md-6 g-col-lg-4">
                <div class="card h-100 shadow">
                    @if (thumbnail != null)
                    {
                        // SVG: inline for dark mode support
                        // Other: use GetCropUrl for optimised image
                    }
                    <div class="card-body text-center">
                        <h3 class="card-title pb-1">
                            <a class="stretched-link" href="@childPage.Url()">
                                @childPage.PageTitle
                            </a>
                        </h3>
                        <p class="card-text pb-2">@childPage.PageDescription</p>
                    </div>
                </div>
            </div>
        }
    </div>
}

Feature - Internal Links - Children

What It Does^#

How It Works^#

Example: Child Pages^#

Child Page 01

Child Page 02

Child Page 02

Child Page 04

Child Page 05

On this page

In this section^#

Child Page 01

Child Page 02

Child Page 02

Child Page 04

Child Page 05

featureInternalLinksChildren.cshtml^#