Shortcodes
This is a sample post intended to test the followings:
- Default hero image.
- Different shortcodes.
Alert
The following alerts are available in this theme.
Success
Code:
{{< alert type="success" >}}
This is sample alert with `type="success"`.
{{< /alert >}}
Result:
type="success"
.Danger
Code:
{{< alert type="danger" >}}
This is sample alert with `type="danger"`.
{{< /alert >}}
Result:
type="danger"
.Warning
Code:
{{< alert type="warning" >}}
This is sample alert with `type="warning"`.
{{< /alert >}}
Result:
type="warning"
.Info
Code:
{{< alert type="info" >}}
This is sample alert with `type="info"`.
{{< /alert >}}
Result:
type="info"
.Image
A sample image without any attribute.
Code:
{{< img src="/posts/shortcodes/boat.jpg" title="A boat at the sea" >}}
Result:
A sample image with height
and width
attributes.
Code:
{{< img src="/posts/shortcodes/boat.jpg" height="400" width="600" title="A boat at the sea" >}}
Result:
A center aligned image with height
and width
attributes.
Code:
{{< img src="/posts/shortcodes/boat.jpg" height="400" width="600" align="center" title="A boat at the sea" >}}
Result:
A image with float
attribute.
Code:
{{< img src="/posts/shortcodes/boat.jpg" height="200" width="500" float="right" title="A boat at the sea" >}}
Result:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras egestas lectus sed leo ultricies ultricies. Praesent tellus risus, eleifend vel efficitur ac, venenatis sit amet sem. Ut ut egestas erat. Fusce ut leo turpis. Morbi consectetur sed lacus vitae vehicula. Cras gravida turpis id eleifend volutpat. Suspendisse nec ipsum eu erat finibus dictum. Morbi volutpat nulla purus, vel maximus ex molestie id. Nullam posuere est urna, at fringilla eros venenatis quis.
Fusce vulputate dolor augue, ut porta sapien fringilla nec. Vivamus commodo erat felis, a sodales lectus finibus nec. In a pulvinar orci. Maecenas suscipit eget lorem non pretium. Nulla aliquam a augue nec blandit. Curabitur ac urna iaculis, ornare ligula nec, placerat nulla. Maecenas aliquam nisi vitae tempus vulputate.
Split
This theme support splitting the page into as many columns as you wish.
Two column split
Code:
{{< split 6 6 >}}
##### Left Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras egestas lectus sed leo ultricies ultricies.
---
##### Right Column
Fusce ut leo turpis. Morbi consectetur sed lacus vitae vehicula. Cras gravida turpis id eleifend volutpat.
{{< /split >}}
Result:
Left Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras egestas lectus sed leo ultricies ultricies.
Right Column
Fusce ut leo turpis. Morbi consectetur sed lacus vitae vehicula. Cras gravida turpis id eleifend volutpat.
Three column split
Code:
{{< split 4 4 4 >}}
##### Left Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras egestas lectus sed leo ultricies ultricies.
---
##### Middle Column
Aenean dignissim dictum ex. Donec a nunc vel nibh placerat interdum.
---
##### Right Column
Fusce ut leo turpis. Morbi consectetur sed lacus vitae vehicula. Cras gravida turpis id eleifend volutpat.
{{< /split >}}
Result:
Left Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras egestas lectus sed leo ultricies ultricies.
Middle Column
Aenean dignissim dictum ex. Donec a nunc vel nibh placerat interdum.
Right Column
Fusce ut leo turpis. Morbi consectetur sed lacus vitae vehicula. Cras gravida turpis id eleifend volutpat.
Vertical Space
Give vertical space between two lines.
Code:
This is line one.
{{< vs 4>}}
This is line two. It should have `4rem` vertical space with previous line.
Result:
This is line one.
This is line two. It should have4rem
vertical space with previous line.Video
Code:
{{< video src="/videos/sample.mp4" >}}
Result:
Video by Rahul Sharma from Pexels.
comments powered by Disqus