Grids Material
Grids Material
Section titled “Grids Material”Syntax
Section titled “Syntax”| Form | Syntax | Usage |
|---|---|---|
| Cards | <div class="grid cards" markdown> | Grid de cartes. |
| Grid | <div class="grid" markdown> | Grid simple. |
| Carte | - :material-icon: __Title__ | Carte descriptive. |
| Content | lists, buttons, code | Markdown preserved. |
Card grid
Section titled “Card grid”<div class="grid cards" markdown>
- :material-language-html5: __HTML__ for content and structure
- :material-language-javascript: __JavaScript__ for interactivity
- :material-language-css3: __CSS__ for styling
- :octicons-rocket-24: __Deploy__ when the page is ready
</div>JavaScript for interactivity
CSS for styling
Deploy when the page is ready
Complex cards
Section titled “Complex cards”<div class="grid cards" markdown>
- :material-clock-fast:{ .lg .middle } __Set up in 5 minutes__
---
Install the site and get running quickly.
- :material-format-font:{ .lg .middle } __Made to measure__
---
Change colors, fonts, icons and navigation.
</div>Set up in 5 minutes
Install the site and get running quickly.
Made to measure
Change colors, fonts, icons and navigation.
Generic grid
Section titled “Generic grid”<div class="grid" markdown>
=== "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
~~~txt 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
~~~txt 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
~~~
</div>- Sed sagittis eleifend rutrum
- Donec vitae suscipit est
- Nulla tempor lobortis orci
1. Sed sagittis eleifend rutrum
2. Donec vitae suscipit est
3. Nulla tempor lobortis orci
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