OsirionContactInfoSection

OsirionContactInfoSection shows contact details: a title, a short message, an address, and phone numbers, email addresses and websites as tel:, mailto: and web links, each with a label and an icon. Use it in a footer, on a contact page, or next to the contact form, which renders it for its own contact details.

Package Osirion.Blazor.Core, namespace Osirion.Blazor.Components. Source on GitHub.

@using Osirion.Blazor.Components
@using Osirion.Blazor.Core.Models

@* Sample details, not a real address or number *@
<OsirionContactInfoSection ContactInfo="contact" />

@code {
    private static readonly ContactInformation contact = new()
    {
        Address = "1 Sample Street, Sample City",
        Phone = "+00 000 000 0000",
        Website = "https://github.com/demonjic/Osirion.Blazor",
        Message = "Sample contact details."
    };
}

Usage

Pass a ContactInformation from Osirion.Blazor.Core.Models. Only the fields you fill are shown:

@using Osirion.Blazor.Core.Models

<OsirionContactInfoSection ContactInfo="@contact" />

@code {
    private readonly ContactInformation contact = new()
    {
        Address = "Belgrade, Serbia",
        Email = "[email protected]"
    };
}

Phone, email and website take several values separated by commas. Labels can be translated:

<OsirionContactInfoSection Title="Kontakt"
                           AddressLabel="Adresa:"
                           PhoneLabel="Telefon:"
                           EmailLabel="E-pošta:"
                           WebsiteLabel="Sajt:"
                           ContactInfo="@contact" />

@code {
    private readonly ContactInformation contact = new()
    {
        Phone = "+381 11 123 4567, +381 64 123 4567",
        Email = "[email protected], [email protected]",
        Website = "example.org",
        Message = "We answer within one working day."
    };
}

Parameters

Unmatched attributes are written to the root <div>.

ContactInformation has five string properties, all empty by default:

Behavior

• The component renders plain HTML and needs no script.
• Phone numbers, email addresses and website text are HTML-encoded (since 4.0).
• Title, Message and Address may contain simple inline markup, such as a <br> between address lines. They go through the registered HTML sanitizer, so script and event handlers are removed.
• Websites are validated: https:// and http:// addresses are linked, an address without a scheme such as example.org is linked as https://example.org/, and anything else, such as a javascript: URL, is left out.
• A website on the current site's host is linked by its path in the same tab. Other websites open in a new tab with rel="noopener noreferrer".
• The icons are inline SVG with aria-hidden="true"; the visible labels name each group.

Styling

The root has osirion-contact-info-section. Inside are osirion-contact-info-title, osirion-contact-info-description, osirion-contact-info-list, and per group osirion-contact-info-item, osirion-contact-info-icon, osirion-contact-info-label and osirion-contact-info-value; the links also have osirion-contact-link.

The section reads five custom properties, which you can set through Style:

<OsirionContactInfoSection ContactInfo="@contact"
                           Style="--osirion-contact-bg: var(--osirion-background-secondary); --osirion-contact-spacing: 1.5rem;" />

With prefers-contrast: high, the accent color becomes pure blue.

Related

• Contact form
• Footer
• Core section components