diff --git a/docs/examples/index.md b/docs/examples/index.md index 7b9cf5f..ab2d064 100644 --- a/docs/examples/index.md +++ b/docs/examples/index.md @@ -263,4 +263,105 @@ tags on separate lines and adding new lines between the tags and the content. ### Adding keyboard keys -++ctrl+alt+del++ \ No newline at end of file +++ctrl+alt+del++ + +## Grids + +### Card grid + +
+ +- :fontawesome-brands-html5: __HTML__ for content and structure +- :fontawesome-brands-js: __JavaScript__ for interactivity +- :fontawesome-brands-css3: __CSS__ for text running out of boxes +- :fontawesome-brands-internet-explorer: __Internet Explorer__ ... huh? + +
+ +### Card grid, complex example + +
+ +- :material-clock-fast:{ .lg .middle } __Set up in 5 minutes__ + + --- + + Install [`mkdocs-material`](#) with [`pip`](#) and get up + and running in minutes + + [:octicons-arrow-right-24: Getting started](#) + +- :fontawesome-brands-markdown:{ .lg .middle } __It's just Markdown__ + + --- + + Focus on your content and generate a responsive and searchable static site + + [:octicons-arrow-right-24: Reference](#) + +- :material-format-font:{ .lg .middle } __Made to measure__ + + --- + + Change the colors, fonts, language, icons, logo and more with a few lines + + [:octicons-arrow-right-24: Customization](#) + +- :material-scale-balance:{ .lg .middle } __Open Source, MIT__ + + --- + + Material for MkDocs is licensed under MIT and available on [GitHub] + + [:octicons-arrow-right-24: License](#) + +
+ +### Card grid, blocks + +
+ +:fontawesome-brands-html5: __HTML__ for content and structure +{ .card } + +:fontawesome-brands-js: __JavaScript__ for interactivity +{ .card } + +:fontawesome-brands-css3: __CSS__ for text running out of boxes +{ .card } + +> :fontawesome-brands-internet-explorer: __Internet Explorer__ ... huh? + +
+ +### Generic grid + +
+ +=== "Unordered list" + + * Sed sagittis eleifend rutrum + * Donec vitae suscipit est + * Nulla tempor lobortis orci + +=== "Ordered list" + + 1. Sed sagittis eleifend rutrum + 2. Donec vitae suscipit est + 3. Nulla tempor lobortis orci + +``` title="Content tabs" +=== "Unordered list" + + * Sed sagittis eleifend rutrum + * Donec vitae suscipit est + * Nulla tempor lobortis orci + +=== "Ordered list" + + 1. Sed sagittis eleifend rutrum + 2. Donec vitae suscipit est + 3. Nulla tempor lobortis orci +``` + +
\ No newline at end of file