# Frame

**Path:** Components/Layout

[Back to Documentation Index](http://rubicblazor.skyconis.com/docs.md)

---

Frame

 RbFrame is a useful and flexible container component to group related content with optional titles, headers, and borders.
 It provides a clean way to organize components without requiring custom CSS.

 Basic Usage

 Simple frame examples with titles and content.

 Show code

 User Information 

 Name: John Doe

 Email: john.doe@example.com

 Role: Administrator

 Borders

 Control frame borders with the Bordered parameter.

 Show code

 Bordered Frame

 Bordered Container 

 This frame has a visible border around it. Borders help visually separate content sections.

 Borderless Frame (Default)

 Borderless Container 

 This frame has no border. Use borderless frames for subtle content grouping.

 Colors

 Apply different color schemes to frames.

 Show code

 Default 
 Primary 
 Secondary 
 Info 
 Warning 
 Danger 
 Success 

 Title 

 Frame Content

 Title 

 Content area uses surface background when UseSurfaceContent is enabled

 Title Alignment

 Control title alignment: Start (Left), Center, or End (Right).

 Show code

 Start 

 Center 

 End 

 Dynamic Title Alignment 

 Change the title alignment using the radio buttons above.

 Header Slots

 Add custom content to header left and right slots.

 Show code

 Header Right Slot

 Document Viewer 

 Frame with a close button in the header right slot.

 Header Left Slot

 Settings Panel 

 Frame with a settings button in the header left slot.

 Both Header Slots

 User Profile 

 Frame with icons on both left and right sides.

 Custom Title Content

 Notifications 

 Frame with custom title content using RbFrameTitle slot.

 Readonly & Disabled

 Control interaction states with Readonly and Disabled parameters.

 Show code

 States

 Normal Frame 

 Click Me (0) 

 Enable option 

 Readonly Frame 

 Click Me (0) 

 Enable option 

 Disabled Frame 

 Click Me (0) 

 Enable option 

 Normal: Clicks: 0, Checked: False

 Readonly: Clicks: 0, Checked: True

 Disabled: Clicks: 0 (should not increment), Checked: True

 RTL Support

 Demonstrate frame content inside an RTL container.

 Show code

 معلومات المستخدم 

 الاسم: أحمد يılmaz

 البريد: ahmed@example.com

 الدور: مدير النظام

 ✕

 Contents