Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce venenatis, quam sit amet luctus sollicitudin, leo erat semper lorem, non molestie sem neque in ipsum. Proin sed risus orci. Morbi eget dui risus. Maecenas at scelerisque lorem. Etiam condimentum ut quam sed accumsan. Pellentesque ante orci, tempor vitae dolor vitae, consequat rutrum erat. Praesent volutpat ullamcorper mollis. Integer blandit a quam ac iaculis. Phasellus bibendum dolor ac quam consequat tincidunt. Sed sagittis nunc vel erat auctor, in blandit tortor sodales. Duis convallis elit sed est varius, vel cursus dui semper. Praesent ornare tempor ipsum, vitae gravida sapien molestie sit amet. Maecenas nec orci rutrum, luctus nisl ac, bibendum ligula. Duis lacinia mi risus, ac feugiat sem suscipit a.

Getting started

Adding new sections

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas efficitur purus sem, sit amet mattis tellus luctus eu. Integer sit amet augue egestas, dapibus ante ac, eleifend massa. Morbi euismod congue ex, a placerat ligula molestie a. Duis ac tempor tortor. Praesent vel libero id metus sollicitudin convallis. Proin sit amet arcu ipsum. Pellentesque consectetur tortor et lacus mollis, eget consequat ante accumsan. Vestibulum consectetur lobortis tempor. Mauris luctus libero vel urna egestas lacinia. Vivamus vel laoreet risus. Ut et metus id libero accumsan suscipit.

To show the section on the left side navigation, add it to the navigation config file at src/config.ts.

Example:

export const SIDEBAR = [
    { text: "Core", header: true },
    { text: "Introduction", link: "/core/introduction" },
    { text: "Components", header: true },
    { text: "Buttons", link: "/components/buttons" },
    { text: "New section", header: true },
    { text: "New component", link: "/new-section/new-component.md" },
];

Adding new pages

To add new pages just create an .astro or markdown file in src/pages/[section]/my-page.md. Remember to add it to the navigation config in src/config.ts so it shows up in the left side navigation.

You’re free to organize the pages however you want.

Customizing Core section (colors, typography, shadows…)

If you want to customize the default colors, typography or shadows you can find the configuration file at src/config/design.config.ts.

Feel free to add new pages to the Core section

Customizing the page layout

You can find the css for the pages in src/styles/content.scss.

Adding your components

Astro is great for design systems because it allows you to import components from different frameworks like react, vue or svelte.

To get started check how the MainButton component is used in the src/pages/en/buttons.md file.

You can import your component library or create your own and document it easily.

.component-preview utility

There’s a class called .component-preview that you can use to wrap your component in a grid, and it will look like this:

Have fun!