diff options
| author | Joe Hutchinson <HutchinsonJoseph@JohnDeere.com> | 2019-01-16 19:03:38 +0300 |
|---|---|---|
| committer | Joe Hutchinson <HutchinsonJoseph@JohnDeere.com> | 2019-01-16 19:03:38 +0300 |
| commit | 604fd542551489c4a9f60bccad6daae067f2ea2e (patch) | |
| tree | df2a6121b7e428477454ad09f6a75964901b77d3 /exampleSite | |
| parent | 54fa7c849a60af1445ab5ae5dd4dee97c300e31b (diff) | |
Add smallimg shortcode example to the example site
Diffstat (limited to 'exampleSite')
| -rw-r--r-- | exampleSite/content/post/aether-features.md | 10 |
1 files changed, 10 insertions, 0 deletions
diff --git a/exampleSite/content/post/aether-features.md b/exampleSite/content/post/aether-features.md index 4b33258..02345ed 100644 --- a/exampleSite/content/post/aether-features.md +++ b/exampleSite/content/post/aether-features.md @@ -114,6 +114,16 @@ Here is `var s = "Hello World"` inline code  +## Small Images + +```md +{{</* smallimg src="/img/nyc.jpg" alt="NYC Skyline" smartfloat="left" width="250px" */>}} +``` + +{{<smallimg src="/img/nyc.jpg" alt="NYC Skyline" smartfloat="left" width="250px">}} + +This image floats to the left of this paragraph and is 250px wide. Its aspect ratio is maintained so it will not stretch. The picture shows the New York skyline. You can see how the design is responsive and how the cards intelligently fit to the display. With flexbox and css grid, heavy frameworks such as bootstrap aren't necessary to create beautiful responsive designs. The cards in aether use flexbox to change the image from the right side on desktops to the top on mobile. + ## Links ```md |