Bacon ipsum dolor amet beef burgdoggen shoulder, meatball prosciutto kevin brisket chicken turkey. Kevin rump pancetta short loin capicola brisket landjaeger fatback picanha pork belly ribeye. Strip steak chuck turducken kevin t-bone ribeye cupim capicola alcatra rump. Venison pork chop biltong cupim pig rump meatloaf sausage pork. Strip steak kevin tongue brisket ball tip, venison turducken flank frankfurter corned beef pancetta fatback drumstick ham. Drumstick pastrami leberkas meatball flank tongue turkey ground round pork belly doner frankfurter porchetta jowl.
Components
On this page are all standard components of Hadron listed that can be used. These components can usually be used most of the time independently of the page type.
This page contains descriptions, syntax, and examples for the components to facilitate their use. Some components require additional plugins, which are already included in the Hadron Skeleton.
Comment
Default Component
Comments can be inserted in Markdown to hide text that should not be displayed on the page, but is visible to other authors.
The comment is still visible in the page source, so it should not be used for confidential information.
<!--
This comment will not be displayed on the page, but is visible in the source code.
-->Headings
Default Component
Headings are used to structure and organize the text. Headings can have levels from H1 to H6, with H1 being the highest level and H6 the lowest.
H1 Heading
H2 Heading
H3 Heading
H4 Heading
H5 Heading
H6 Heading
# H1 Heading
## H2 Heading
### H3 Heading
#### H4 Heading
##### H5 Heading
###### H6 HeadingParagraphs
Default Component
Paragraphs are sections of text that are separated by a blank line. Line breaks within a paragraph are ignored unless they are marked with two spaces at the end of the line.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus.
Etiam euismod ornare consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus.
Etiam euismod ornare consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.Markdown elements
Default Component
Markdown elements are special text formats that can be used in Markdown. These can also be used in other Markdown editors.
Bold **Bold**
Italic _Italic_
Strikethrough ~~Strikethrough~~
Inline Code `Inline Code`
Blockquote
> Blockquote
Link [Link](https://example.com)
Link with Title [Link with Title](https://example.com "Title of the Links")
Horizontal Line: ---
HTML text elements
Default Component
HTML elements can be used in Markdown to add special text formatting that is not supported in Markdown, but is generally used on websites.
I18N <abbr>
Blockquote <cite>
Ctrl + S <kbd>
TextSuperscripted <sup>
TextSubscripted <sub>
x = y + 2 <var>
Media
Default Component
Media is inserted in Markdown similar to links, but with an exclamation mark (!) before the link.
Supported media include images, videos, and audio files.
More information about media can be found in the official Grav documentation
Images
Syntax: 
Image with Link
An image that also works as a link.
Syntax: [](Link)
[](https://example.com)Image with Options
Syntax: 
Options:
lightbox- opens the image in a lightbox when clickedresize=200- resizes the image to a width of 200 pixels
Videos
Syntax: 
autoplay[=1|0]- 1: starts the video automatically (default: 0)loop[=1|0]- 1: repeats the video (default: 0)controls[=1|0]- 1: shows the controls (default: 1)muted[=1|0]- 1: mutes the video (default: 0)
Audio
Syntax: 
autoplay[=1|0]- 1: starts the audio automatically (default: 0)loop[=1|0]- 1: repeats the audio (default: 0)controls[=1|0]- 1: shows the controls (default: 1)muted[=1|0]- 1: mutes the audio (default: 0)
YouTube (Variant 1)
depends on YouTube Plugin
Syntax: [plugin:youtube](Video-path)
[\plugin:youtube](https://www.youtube.com/watch?v=K4TOrB7at0Y)YouTube (Variant 2)
depends on YouTube Plugin
Syntax: [\youtube OPTIONS] https://www.youtube.com/watch?v=VIDEO-PATH [/youtube]
autoplay[=1|0]- 1: starts the video automatically (default: 0)controls[=1|0]- 1: shows the controls (default: 1)loop[=1|0]- 1: repeats the video (default: 0)
[youtube autoplay=1 controls=0 loop=1]
https://www.youtube.com/watch?v=K4TOrB7at0Y
[/youtube]_see Crabston Tutorials > Plugins > Shortcode Media_
Dokumente
_see Crabston Tutorials > Plugins > Shortcode Media_
Code
Default Component
Code blocks can be inserted in Markdown to display code or scripts. These can also be highlighted with syntax highlighting by specifying the language of the code.
// Code
const foo = 'bar';
function bar() {
return foo;
}
console.log(bar());\```js
// Code
const foo = 'bar';
function bar() {
return foo;
}
console.log(bar());
\```Blockquote
Default Component
Blockquotes are elements that can be used in Markdown to highlight text. They can also be combined with other elements.
The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life.
- Bill Gates
> The advance of technology is based on making it fit in so that you don't really even notice it,
> so it's part of everyday life.
>
> <cite>- Bill Gates</cite>Lists
Default Component
Lists can be used in Markdown to display items in an ordered or unordered manner. Lists can also be nested.
unordered lists
- List Item 1
- List Item 2
- List Item 2.1
- List Item 2.2
- List Item 2.2.1
- List Item 3
- List Item 1
- List Item 2
- List Item 2.1
- List Item 2.2
- List Item 2.2.1
- List Item 3ordered lists
- List Item 1
- List Item 2
- List Item 2.1
- List Item 2.2
- List Item 2.2.1
- List Item 3
1. List Item 1
2. List Item 2
1. List Item 2.1
2. List Item 2.2
1. List Item 2.2.1
3. List Item 3Tables
Default Component
Tables can be created in Markdown to display data in a tabular format.
To do this, it should be noted that the alignment of the columns is defined in the second row:
:---: left-aligned:---:: centered---:: right-aligned
Another feature of tables is that they are displayed correctly even if the formatting with spaces is not correct.
| Name | Genre | Published |
|---|---|---|
| The Shawshank Redemption | Crime, Drama | 14. Oktober 1994 |
| The Godfather | Crime, Drama | 24. März 1972 |
| Schindler's List | Biography, Drama, History | 4. Februar 1994 |
| No Genre | 7. Mai 1990 | |
| Se7en | Crime, Drama, Mystery | 22. September 1995 |
| Name | Genre | Published |
|:-------------------------|:-------------------------:|-------------------:|
| The Shawshank Redemption | Crime, Drama | 14. Oktober 1994 |
| The Godfather | Crime, Drama | 24. März 1972 |
| Schindler's List | Biography, Drama, History | 4. Februar 1994 |
| No Genre | | 7. Mai 1990 |
| Se7en | Crime, Drama, Mystery | 22. September 1995 |mobile-friendly tables
depends on Hadron Theme
With a special feature of the Hadron theme, tables are also displayed well on mobile devices (mainly necessary for wide tables). The table is then displayed as follows:
[div class="table-responsive"]
| Name | Genre | Published |
|:-------------------------|:-------------------------:|-------------------:|
| The Shawshank Redemption | Crime, Drama | 14. Oktober 1994 |
| The Godfather | Crime, Drama | 24. März 1972 |
| Schindler's List | Biography, Drama, History | 4. Februar 1994 |
| No Genre | | 7. Mai 1990 |
| Se7en | Crime, Drama, Mystery | 22. September 1995 |
[/div]Shortcode elements
depends on Shortcode Core Plugin
Shortcodes are special tags that can be used in Markdown to add special functions or components. These are written in square brackets [] and require the Shortcode Plugin.
This is a sample text with this highlighted part and Markdown syntax and the rest is normal.
This is an underlined text.
This is a sample text [mark]with this **highlighted** part and _Markdown_ syntax[/mark] and the rest is normal.
This is an [u]underlined text[/u].Alignment
depends on Shortcode Core Plugin
With alignment, texts can be aligned to the left, centered, or right.
This text is left aligned.
This text is centered.
This text is right aligned.
[left]
This text is left aligned.
[/left]
[center]
This text is centered.
[/center]
[right]
This text is right aligned.
[/right]Columns
depends on Shortcode Core Plugin
Columns are used to split text into multiple columns.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
[columns count=2]
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
[/columns]Details
depends on Shortcode Core Plugin
Details are a good way to hide content that is not important for the main flow of the document. These can be displayed by clicking on the button.
Click here to show more information
Here are additional details that can be revealed by clicking the button.
[details="Click here to show more information"]
Here are additional details that can be revealed by clicking the button.
[/details]Notices
depends on Markdown Notices Plugin
Notices can be used to highlight important information.
Warning
Error
Info
Success
! Warning
!! Error
!!! Info
!!!! SuccessAccordion
depends on Shortcode UI Plugin
Accordions are used to divide content into sections that can be opened or closed as needed.
Short loin swine shankle flank picanha andouille burgdoggen landjaeger hamburger drumstick. Beef ham tail, tri-tip flank ham hock meatball picanha corned beef t-bone shank turkey ball tip shoulder. Flank corned beef chicken, meatloaf venison ball tip ham hock tail salami jowl short ribs pork belly drumstick. Meatball chicken hamburger beef filet mignon doner pork picanha pork chop fatback rump ham tri-tip ball tip landjaeger. Sausage leberkas shoulder tongue short loin shankle. Prosciutto tri-tip frankfurter shoulder drumstick capicola. Pork loin shank strip steak pork belly tongue cow.
Bacon ipsum dolor amet beef burgdoggen shoulder, meatball prosciutto kevin brisket chicken turkey. Kevin rump pancetta short loin capicola brisket landjaeger fatback picanha pork belly ribeye. Strip steak chuck turducken kevin t-bone ribeye cupim capicola alcatra rump. Venison pork chop biltong cupim pig rump meatloaf sausage pork. Strip steak kevin tongue brisket ball tip, venison turducken flank frankfurter corned beef pancetta fatback drumstick ham. Drumstick pastrami leberkas meatball flank tongue turkey ground round pork belly doner frankfurter porchetta jowl.
[ui-accordion independent=false open=1]
[ui-accordion-item title="Section 1"]
Bacon ipsum dolor amet beef burgdoggen shoulder, meatball prosciutto kevin brisket chicken turkey. Kevin rump pancetta short loin capicola brisket landjaeger fatback picanha pork belly ribeye. Strip steak chuck turducken kevin t-bone ribeye cupim capicola alcatra rump. Venison pork chop biltong cupim pig rump meatloaf sausage pork. Strip steak kevin tongue brisket ball tip, venison turducken flank frankfurter corned beef pancetta fatback drumstick ham. Drumstick pastrami leberkas meatball flank tongue turkey ground round pork belly doner frankfurter porchetta jowl.
[/ui-accordion-item]
[ui-accordion-item title="Section 2"]
Short loin swine shankle flank picanha andouille burgdoggen landjaeger hamburger drumstick. Beef ham tail, tri-tip flank ham hock meatball picanha corned beef t-bone shank turkey ball tip shoulder. Flank corned beef chicken, meatloaf venison ball tip ham hock tail salami jowl short ribs pork belly drumstick. Meatball chicken hamburger beef filet mignon doner pork picanha pork chop fatback rump ham tri-tip ball tip landjaeger. Sausage leberkas shoulder tongue short loin shankle. Prosciutto tri-tip frankfurter shoulder drumstick capicola. Pork loin shank strip steak pork belly tongue cow.
[/ui-accordion-item]
[ui-accordion-item title="Section 3"]
Bacon ipsum dolor amet beef burgdoggen shoulder, meatball prosciutto kevin brisket chicken turkey. Kevin rump pancetta short loin capicola brisket landjaeger fatback picanha pork belly ribeye. Strip steak chuck turducken kevin t-bone ribeye cupim capicola alcatra rump. Venison pork chop biltong cupim pig rump meatloaf sausage pork. Strip steak kevin tongue brisket ball tip, venison turducken flank frankfurter corned beef pancetta fatback drumstick ham. Drumstick pastrami leberkas meatball flank tongue turkey ground round pork belly doner frankfurter porchetta jowl.
[/ui-accordion-item]
[/ui-accordion]Tabs
depends on Shortcode UI Plugin
Tabs can be used to display content in different tabs.
In tempor sed sapien eu porttitor. Aliquam cursus facilisis ante. Etiam neque nunc, blandit vel lacus et, faucibus accumsan lacus. Proin posuere varius purus quis faucibus. Quisque et enim vitae orci placerat tincidunt id ac eros. Fusce et gravida libero.
Phasellus cursus odio ex, in mattis lorem tincidunt vel. Donec nibh odio, dapibus non ligula a, semper ornare massa. Nulla consectetur eu nunc sed ultrices. Integer at turpis dolor.
[ui-tabs position=top-left active=0 theme=lite]
[ui-tab title="First Tab"]
In tempor sed sapien eu porttitor. Aliquam cursus facilisis ante. Etiam neque nunc, blandit vel lacus et, faucibus accumsan lacus. Proin posuere varius purus quis faucibus. Quisque et enim vitae orci [placerat tincidunt](#) id ac eros. Fusce et gravida libero.
Phasellus cursus odio ex, in **mattis lorem tincidunt** vel. Donec nibh odio, dapibus non ligula a, semper ornare massa. Nulla consectetur eu nunc sed ultrices. Integer at turpis dolor.
[/ui-tab]
[ui-tab title="Second Tab"]
In tempor sed sapien **eu porttitor**. Aliquam cursus facilisis ante. Etiam neque nunc, blandit vel lacus et, faucibus accumsan lacus. Proin posuere varius purus quis faucibus. [Quisque et enim](#) vitae orci placerat tincidunt id ac eros. Fusce et gravida libero.
Phasellus cursus odio ex, in mattis lorem tincidunt vel. [Donec nibh odio](#), dapibus non ligula a, semper ornare massa. Nulla consectetur eu nunc sed ultrices. Integer at turpis dolor.
[/ui-tab]
[/ui-tabs]Gallery
depends on Shortcode Gallery Plugin
Galleries can be used to display multiple images in a gallery.
Options:
lastRow=justify- Justify the last rowcaptions=false- Hide captions
[gallery lastRow=justify]
[/gallery]Owl Carousel
depends on Shortcode Owl Carousel Plugin
Owl Carousel is a plugin that is used to display images in a carousel.
Options:
items=1- Number of items to displaymargin=10- Margin between itemsloop=true- Infinite loopnav=true- Show navigationstagePadding=200- Padding to the edge
[owl-carousel items=1 margin=10 loop=true nav=true stagePadding=200]
[/owl-carousel]