Creating a New Component

This guide will help you understand how to create reusable components like tabs, accordions, and cards in your 11ty project. These components are stored in the _includes/components folder and can be easily included in any page or template.

Step 1: Create a Component

Navigate to the Components Directory: Go to the _includes/components folder in your project.

Create a New File: For your new component, create a .njk file. For example, myComponent.njk.

Define Your Component: Open the newly created file and write your HTML markup. Here's an example structure for a simple component:

<div class="my-component">
    <h2>My Heading</h2>
    <p>This is my component content.</p>
</div>

Step 2: Use the Component in a Page

Open the Target Page or Template: Go to the page or template where you want to include the component.

Include the Component: Use the {% include %} tag to insert your component. For example:

{% include "components/myComponent.njk" %}

Tips for Component Creation

Naming Conventions: Use clear and descriptive names for your component files.

Modularity: Design components to be reusable and independent.

Comments: Add comments to your components for clarity and documentation.