From b328651d6c63e5c1e43f0d1ae367a9b4848348b9 Mon Sep 17 00:00:00 2001 From: RafiBomb Date: Sun, 14 May 2017 22:23:45 -0700 Subject: [PATCH] adds media object links and vid times --- docs/pages/media-object.md | 22 +++++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/docs/pages/media-object.md b/docs/pages/media-object.md index 87f348ef8..2dd3e35a7 100644 --- a/docs/pages/media-object.md +++ b/docs/pages/media-object.md @@ -8,7 +8,13 @@ flex: true ## Basics -A media object is a container with the class `.media-object`, and two or three sections with the class `.media-object-section`. +Foundation's Media Object will help you create this common repeatable pattern and can be used several different ways. A media object is a container with the class `.media-object`, and two or three sections with the class `.media-object-section`. + +
+ Watch this part in video + + edit on codepen button +
```html_example
@@ -48,6 +54,12 @@ A media object is a container with the class `.media-object`, and two or three s Each section aligns to the top by default, but individual sections can also be middle- or bottom-aligned with the `.middle` and `.bottom` classes. +
+ Watch this part in video + + edit on codepen button +
+ ```html_example
@@ -96,6 +108,12 @@ In flexbox mode, you can use the flexbox h By adding the `.stack-for-small` class, you can make your media object responsive. Images will get a width of 100%, but this can be changed. +
+ Watch this part in video + + edit on codepen button +
+ ```html_example
@@ -116,6 +134,8 @@ By adding the `.stack-for-small` class, you can make your media object responsiv By nesting a media object into the media-object-section section, you can easily indent it. This is great for comment strings. +edit on codepen button + ```html_example
-- 2.47.2