[11.x] document "index" class components (#9985)

* document "index" class components

laravel/framework#52669

* formatting

---------

Co-authored-by: Taylor Otwell <taylor@laravel.com>

blade.md

@@ -18,6 +18,7 @@
     - [Comments](#comments)
 - [Components](#components)
     - [Rendering Components](#rendering-components)
+    - [Index Components](#index-components)
     - [Passing Data to Components](#passing-data-to-components)
     - [Component Attributes](#component-attributes)
     - [Reserved Keywords](#reserved-keywords)
@@ -756,6 +757,26 @@ If you would like to conditionally render your component, you may define a `shou
         return Str::length($this->message) > 0;
     }
 
+<a name="index-components"></a>
+### Index Components
+
+Sometimes components are part of a component group and you may wish to group the related components within a single directory. For example, imagine a "card" component with the following class structure:
+
+```none
+App\Views\Components\Card\Card
+App\Views\Components\Card\Header
+App\Views\Components\Card\Body
+```
+
+Since the root `Card` component is nested within a `Card` directory, you might expect that you would need to render the component via `<x-card.card>`. However, when a component's file name matches the name of the component's directory, Laravel automatically assumes that component is the "root" component and allows you to render the component without repeating the directory name:
+
+```blade
+<x-card>
+    <x-card.header>...</x-card.header>
+    <x-card.body>...</x-card.body>
+</x-card>
+```
+
 <a name="passing-data-to-components"></a>
 ### Passing Data to Components