{
    "componentChunkName": "component---src-layouts-rails-component-layout-tsx",
    "path": "/components/layout/rails/alpha",
    "result": {"data":{"primerRailsVersion":{"version":"0.24.1"},"sitePage":{"path":"/components/layout","context":{"frontmatter":{"title":"Layout","description":"Layout provides foundational patterns for responsive pages.","reactId":null,"railsIds":["Primer::Alpha::Layout","Primer::LayoutComponent"],"figmaId":null,"cssId":null}}},"allRailsComponent":{"nodes":[{"railsId":"Primer::Alpha::ActionBar","status":"alpha"},{"railsId":"Primer::Alpha::ActionList","status":"alpha"},{"railsId":"Primer::Alpha::ActionMenu","status":"alpha"},{"railsId":"Primer::Alpha::AutoComplete","status":"deprecated"},{"railsId":"Primer::Alpha::Banner","status":"alpha"},{"railsId":"Primer::Alpha::ButtonMarketing","status":"alpha"},{"railsId":"Primer::Alpha::CheckBox","status":"alpha"},{"railsId":"Primer::Alpha::CheckBoxGroup","status":"alpha"},{"railsId":"Primer::Alpha::Dialog","status":"alpha"},{"railsId":"Primer::Alpha::Dropdown","status":"alpha"},{"railsId":"Primer::Alpha::FormButton","status":"alpha"},{"railsId":"Primer::Alpha::FormControl","status":"alpha"},{"railsId":"Primer::Alpha::HellipButton","status":"alpha"},{"railsId":"Primer::Alpha::HiddenTextExpander","status":"alpha"},{"railsId":"Primer::Alpha::Image","status":"alpha"},{"railsId":"Primer::Alpha::ImageCrop","status":"alpha"},{"railsId":"Primer::Alpha::Layout","status":"alpha"},{"railsId":"Primer::Alpha::Menu","status":"alpha"},{"railsId":"Primer::Alpha::MultiInput","status":"alpha"},{"railsId":"Primer::Alpha::NavList","status":"deprecated"},{"railsId":"Primer::Alpha::Navigation::Tab","status":"alpha"},{"railsId":"Primer::Alpha::OcticonSymbols","status":"alpha"},{"railsId":"Primer::Alpha::Overlay","status":"alpha"},{"railsId":"Primer::Alpha::RadioButton","status":"alpha"},{"railsId":"Primer::Alpha::RadioButtonGroup","status":"alpha"},{"railsId":"Primer::Alpha::SegmentedControl","status":"alpha"},{"railsId":"Primer::Alpha::Select","status":"alpha"},{"railsId":"Primer::Alpha::SubmitButton","status":"alpha"},{"railsId":"Primer::Alpha::TabContainer","status":"alpha"},{"railsId":"Primer::Alpha::TabNav","status":"alpha"},{"railsId":"Primer::Alpha::TabPanels","status":"alpha"},{"railsId":"Primer::Alpha::TextArea","status":"alpha"},{"railsId":"Primer::Alpha::TextField","status":"alpha"},{"railsId":"Primer::Alpha::ToggleSwitch","status":"alpha"},{"railsId":"Primer::Alpha::Tooltip","status":"alpha"},{"railsId":"Primer::Alpha::UnderlineNav","status":"alpha"},{"railsId":"Primer::Alpha::UnderlinePanels","status":"alpha"},{"railsId":"Primer::Beta::AutoComplete","status":"beta"},{"railsId":"Primer::Beta::Avatar","status":"beta"},{"railsId":"Primer::Beta::AvatarStack","status":"beta"},{"railsId":"Primer::Beta::BaseButton","status":"beta"},{"railsId":"Primer::Beta::Blankslate","status":"beta"},{"railsId":"Primer::Beta::BorderBox","status":"beta"},{"railsId":"Primer::Beta::Breadcrumbs","status":"beta"},{"railsId":"Primer::Beta::Button","status":"beta"},{"railsId":"Primer::Beta::ButtonGroup","status":"beta"},{"railsId":"Primer::Beta::ClipboardCopy","status":"beta"},{"railsId":"Primer::Beta::ClipboardCopyBaseButton","status":"beta"},{"railsId":"Primer::Beta::ClipboardCopyButton","status":"beta"},{"railsId":"Primer::Beta::CloseButton","status":"beta"},{"railsId":"Primer::Beta::Counter","status":"beta"},{"railsId":"Primer::Beta::Details","status":"beta"},{"railsId":"Primer::Beta::Flash","status":"deprecated"},{"railsId":"Primer::Beta::Heading","status":"beta"},{"railsId":"Primer::Beta::IconButton","status":"beta"},{"railsId":"Primer::Beta::Label","status":"beta"},{"railsId":"Primer::Beta::Link","status":"beta"},{"railsId":"Primer::Beta::Markdown","status":"beta"},{"railsId":"Primer::Beta::NavList","status":"beta"},{"railsId":"Primer::Beta::Octicon","status":"beta"},{"railsId":"Primer::Beta::Popover","status":"beta"},{"railsId":"Primer::Beta::ProgressBar","status":"beta"},{"railsId":"Primer::Beta::RelativeTime","status":"beta"},{"railsId":"Primer::Beta::Spinner","status":"beta"},{"railsId":"Primer::Beta::State","status":"beta"},{"railsId":"Primer::Beta::Subhead","status":"beta"},{"railsId":"Primer::Beta::Text","status":"beta"},{"railsId":"Primer::Beta::TimelineItem","status":"beta"},{"railsId":"Primer::Beta::Truncate","status":"beta"},{"railsId":"Primer::BlankslateComponent","status":"deprecated"},{"railsId":"Primer::Box","status":"stable"},{"railsId":"Primer::ButtonComponent","status":"deprecated"},{"railsId":"Primer::ConditionalWrapper","status":"alpha"},{"railsId":"Primer::Content","status":"stable"},{"railsId":"Primer::IconButton","status":"deprecated"},{"railsId":"Primer::LayoutComponent","status":"deprecated"},{"railsId":"Primer::Navigation::TabComponent","status":"deprecated"},{"railsId":"Primer::Tooltip","status":"deprecated"},{"railsId":"Primer::Truncate","status":"deprecated"},{"railsId":"Primer::BaseComponent","status":null}]},"railsComponent":{"name":"Layout","railsId":"Primer::Alpha::Layout","description":"`Layout` provides foundational patterns for responsive pages.\n`Layout` can be used for simple two-column pages, or it can be nested to provide flexible 3-column experiences.\n On smaller screens, `Layout` uses vertically stacked rows to display content.\n\n`Layout` flows as both column, when there's enough horizontal space to render both `Main` and `Sidebar`side-by-side (on a desktop of tablet device, per instance);\nor it flows as a row, when `Main` and `Sidebar` are stacked vertically (e.g. on a mobile device).\n`Layout` should always work in any screen size.","status":"alpha","a11y_reviewed":false,"short_name":"Layout","is_form_component":false,"accessibility_docs":"Keyboard navigation follows the markup order. Decide carefully how the focus order should be be by deciding whether\n`main` or `sidebar` comes first in code. The code order won’t affect the visual position.","props":[{"name":"stacking_breakpoint","type":"Symbol","description":"When the `Layout` should change from rows into columns. One of `:lg`, `:md`, or `:sm`.","default":"`:md`"},{"name":"first_in_source","type":"Symbol","description":"Which element to render first in the HTML. This will change the keyboard navigation order. One of `:main` or `:sidebar`.","default":"`:sidebar`"},{"name":"gutter","type":"Symbol","description":"The amount of space between the main section and the sidebar. One of `:condensed`, `:default`, `:none`, or `:spacious`.","default":"`:default`"},{"name":"system_arguments","type":"Hash","description":"{{link_to_system_arguments_docs}}","default":"N/A"}],"slots":[{"description":"The layout's main content.","name":"main","parameters":[{"default":"N/A","description":"One of `:full`, `:lg`, `:md`, or `:xl`.","name":"width","type":"Symbol"},{"default":"N/A","description":"{{link_to_system_arguments_docs}}","name":"system_arguments","type":"Hash"}]},{"description":"The layout's sidebar.","name":"sidebar","parameters":[{"default":"N/A","description":"One of `:default`, `:narrow`, or `:wide`.","name":"width","type":"Symbol"},{"default":"N/A","description":"Sidebar placement when `Layout` is in column modes. One of `:end` or `:start`.","name":"col_placement","type":"Symbol"},{"default":"N/A","description":"Sidebar placement when `Layout` is in row mode. One of `:end`, `:none`, or `:start`.","name":"row_placement","type":"Symbol"},{"default":"N/A","description":"{{link_to_system_arguments_docs}}","name":"system_arguments","type":"Hash"}]}],"methods":[],"previews":[{"name":"playground","preview_path":"primer/alpha/layout/playground"},{"name":"default","preview_path":"primer/alpha/layout/default"},{"name":"gutter_none","preview_path":"primer/alpha/layout/gutter_none"},{"name":"gutter_condensed","preview_path":"primer/alpha/layout/gutter_condensed"},{"name":"gutter_default","preview_path":"primer/alpha/layout/gutter_default"},{"name":"gutter_spacious","preview_path":"primer/alpha/layout/gutter_spacious"},{"name":"main_width_md","preview_path":"primer/alpha/layout/main_width_md"},{"name":"main_width_lg","preview_path":"primer/alpha/layout/main_width_lg"},{"name":"main_width_xl","preview_path":"primer/alpha/layout/main_width_xl"},{"name":"main_width_full","preview_path":"primer/alpha/layout/main_width_full"},{"name":"sidebar_width_narrow","preview_path":"primer/alpha/layout/sidebar_width_narrow"},{"name":"sidebar_width_default","preview_path":"primer/alpha/layout/sidebar_width_default"},{"name":"sidebar_width_wide","preview_path":"primer/alpha/layout/sidebar_width_wide"},{"name":"sidebar_col_placement_start","preview_path":"primer/alpha/layout/sidebar_col_placement_start"},{"name":"sidebar_col_placement_end","preview_path":"primer/alpha/layout/sidebar_col_placement_end"},{"name":"sidebar_row_placement_start","preview_path":"primer/alpha/layout/sidebar_row_placement_start"},{"name":"sidebar_row_placement_end","preview_path":"primer/alpha/layout/sidebar_row_placement_end"},{"name":"sidebar_row_placement_none","preview_path":"primer/alpha/layout/sidebar_row_placement_none"},{"name":"stacking_breakpoint_sm","preview_path":"primer/alpha/layout/stacking_breakpoint_sm"},{"name":"stacking_breakpoint_md","preview_path":"primer/alpha/layout/stacking_breakpoint_md"},{"name":"stacking_breakpoint_lg","preview_path":"primer/alpha/layout/stacking_breakpoint_lg"}],"subcomponents":[{"name":"Layout::Sidebar","railsId":"Primer::Alpha::Layout::Sidebar","description":"The layout's sidebar content.","status":"alpha","a11y_reviewed":false,"short_name":"LayoutSidebar","accessibility_docs":null,"props":[],"slots":[],"methods":[]},{"name":"Layout::Main","railsId":"Primer::Alpha::Layout::Main","description":"The layout's main content.","status":"alpha","a11y_reviewed":false,"short_name":"LayoutMain","accessibility_docs":null,"props":[{"name":"width","type":"Symbol","description":"One of `:full`, `:lg`, `:md`, or `:xl`.","default":"`:full`"},{"name":"system_arguments","type":"Hash","description":"{{link_to_system_arguments_docs}}","default":"N/A"}],"slots":[],"methods":[]}]}},"pageContext":{"componentId":"Primer::Alpha::Layout","parentPath":"/components/layout"}},
    "staticQueryHashes": ["1056354862","2102389209","2745756513","2790671566","2939673985","3235046957","3907230164"]}