Breakpoints

Current Breakpoint

Resize your browser window to see the breakpoint change in real-time. The system detects viewport size and cascades the current breakpoint state to all child components.

Current Breakpoint

Unknown

x px

razor

@code {
    [CascadingParameter] private BreakpointState? _state { get; set; }
}

FOD Design System Breakpoints

The breakpoint values match the FOD Design System breakpoints. Each breakpoint defines a minimum width threshold for responsive design.

Breakpoint	Min Width	Range
Xs	0px	0-575px
Sm	576px	576-767px
Md	768px	768-991px
Lg	992px	992-1279px
Xl	1280px	1280-1439px
Xxl	1440px	1440px+

csharp

public enum Breakpoint
{
    Xs = 1,  // 0-575px
    Sm = 2,  // 576-767px
    Md = 3,  // 768-991px
    Lg = 4,  // 992-1279px
    Xl = 5,  // 1280-1439px
    Xxl = 6  // 1440px+
}

FodHidden

Conditionally hide content based on breakpoint conditions. Resize your browser to see the content appear and disappear based on the current viewport size.

Hide on Small Screens (SmDown)

✓ Visible on Md and larger (hidden on Sm and Xs)

ⓘ Hidden on Md and larger (visible on Sm and Xs)

Hide on Large Screens (LgUp)

ⓘ Mobile/Tablet View (hidden on Lg and larger)

✓ Desktop View (hidden on Md and smaller)

Show Only at Specific Breakpoint

✗ Hidden only at Md breakpoint (768-991px)

This content disappears only when the viewport is at the Md breakpoint.

razor

<FodHidden SmDown="true">
    <p>Visible on Md and larger</p>
</FodHidden>

<FodHidden LgUp="true">
    <p>Hidden on Lg and larger</p>
</FodHidden>

<FodHidden Only="new[] { Breakpoint.Md }">
    <p>Hidden only at Md</p>
</FodHidden>

Rendering Strategies

FodHidden supports two strategies: DoNotRender (default, removes from DOM) and CssHide (keeps in DOM with display:none). Choose based on your performance and SEO requirements.

DoNotRender (Default)

Content is completely removed from the DOM. Best for performance when content is not needed for SEO or accessibility.

✓ DoNotRender: This is NOT in the DOM when hidden

CssHide

Content remains in DOM with display:none. Use for SEO-critical content or screen reader accessibility.

ⓘ CssHide: This IS in the DOM when hidden (but invisible)

razor

<!-- DoNotRender: Element removed from DOM (default) -->
<FodHidden SmDown="true" Strategy="HiddenStrategy.DoNotRender">
    <p>Performance-optimized hiding</p>
</FodHidden>

<!-- CssHide: Element stays in DOM with display:none -->
<FodHidden SmDown="true" Strategy="HiddenStrategy.CssHide">
    <p>SEO and accessibility-friendly hiding</p>
</FodHidden>

Best Practices

Guidelines for effective responsive design with the breakpoint system.

Mobile-First Approach

Design for mobile first, then progressively enhance for larger screens. Use SmUp, MdUp, LgUp for showing content as screens get larger.

<FodHidden
                        MdDown="true">Desktop features</FodHidden>

Show advanced features only on desktop

Performance Optimization

Use DoNotRender (default) for content that doesn't need to be in the DOM. Reserve CssHide for SEO-critical content.

Strategy="HiddenStrategy.DoNotRender"

Default behavior, best for performance

Accessibility Considerations

Use CssHide when content should remain accessible to screen readers. Avoid hiding critical navigation or form labels.

Strategy="HiddenStrategy.CssHide"

Keeps content accessible to assistive technologies

Cascading State Pattern

BreakpointState is provided via cascading parameter. Access it in any component without prop drilling.

[CascadingParameter] private BreakpointState? _state

razor

@* Mobile-first: Show on larger screens *@
<FodHidden MdDown="true">
    <AdvancedFeatures />
</FodHidden>

@* Performance: Remove from DOM *@
<FodHidden SmDown="true" Strategy="HiddenStrategy.DoNotRender">
    <HeavyComponent />
</FodHidden>

@* Accessibility: Keep in DOM for screen readers *@
<FodHidden LgUp="true" Strategy="HiddenStrategy.CssHide">
    <NavigationMenu />
</FodHidden>

API Reference

Complete list of FodHidden component parameters and their usage.

No properties defined.