Permalink
Browse files

feat(media component): improved/extended media component

  • Loading branch information...
lara-aigmueller committed Sep 14, 2016
1 parent 9234fca commit 264b3cc34eb84ab3af5654ab544daafe031a2f4c
View
@@ -1,3 +1,68 @@
---
layout: components_icons.hbs
meta:
title: "Media"
description: "The media component is a combination of any type of media (img, video, audio,...) and some text."
keywords: "media, Dynatrace, groundhog, css, component"
---
## Introduction
The Groundhog **media component** is a combination of any type of media (img, video, audio, svg, ...) and some content. The content can be text or again a media component.
## Including a media component
1. To include a media component create a wrapping `div` with a `.media` class and the desired alignment-class (horiontal or vertical, [see below][mediaClass]).
```html
<div class="media media--vertical">
...
</div>
```
2. The media element is put in a `div` with a `.media__item` class, the content in a `div` with a `.media__content` class.
```html
<div class="media media--vertical">
<div class="media__item">
...
</div>
<div class="media__content">
...
</div>
</div>
```
3. The order of the inner `div` elements can be reversed.
```html
<div class="media media--vertical">
<div class="media__content">
...
</div>
<div class="media__item">
...
</div>
</div>
```
4. Media components can be nested.
```html
<div class="media media--vertical">
<div class="media__item">
...
</div>
<div class="media__content">
<div class="media media--vertical">
<div class="media__item">
...
</div>
<div class="media__content">
...
</div>
</div>
</div>
</div>
```
## Available classes for media
| class name | effect |
| ---------- | ------ |
| .media--vertical | The media item and the media content are aligned vertically. |
| .media--horizontal | The media item and the media content are aligned horizontally. |
[mediaClass]: #available-classes-for-media
View
@@ -3,29 +3,37 @@
.media {
background-color: $gray-100;
display: flex;
flex-direction: column;
padding: 1.5rem;
}
.media__item {
margin-bottom: 1.5rem;
margin: 0 0 1.5rem;
}
.media__item > * {
max-width: 100%;
}
.media__text {
.media--horizontal .media__content {
flex-grow: 2;
}
.media--horizontal {
flex-direction: row;
}
@media (min-width: $screen-sm) {
.media--horizontal .media__text {
flex-grow: 2;
}
.media--horizontal {
flex-direction: row;
}
.media--vertical {
flex-direction: column;
.media--horizontal .media__item {
margin: 0 1.5rem 0 0;
}
.media__item--right {
flex-direction: row-reverse;
}
.media__item--right .media__item {
margin: 0 0 0 1.5rem;
}
}
@@ -4,7 +4,7 @@
<use xlink:href="#ruxit"></use>
</svg>
</div>
<div class="media__text">
<div class="media__content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
<ul>
@@ -2,7 +2,7 @@
<div class="media__item">
<img src="https://www.dynatrace.com/assets/gfx/icons/tech/smartscape.svg" alt="image placeholder">
</div>
<div class="media__text">
<div class="media__content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
<ul>
@@ -0,0 +1,14 @@
<div class="media media--horizontal media__item--right">
<div class="media__item">
<img src="https://www.dynatrace.com/assets/gfx/icons/tech/smartscape.svg" alt="image placeholder">
</div>
<div class="media__content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
<ul>
<li>Full stack monitoring</li>
<li>Single transaction analysis</li>
<li>Broadest technology coverage</li>
</ul>
</div>
</div>
@@ -0,0 +1,21 @@
<div class="media media--horizontal">
<div class="media__item">
<img src="https://www.dynatrace.com/assets/gfx/icons/tech/smartscape.svg" alt="image placeholder">
</div>
<div class="media__content">
<div class="media media--vertical">
<div class="media__item">
<img src="https://www.dynatrace.com/assets/gfx/icons/tech/smartscape.svg" alt="image placeholder">
</div>
<div class="media__content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
<ul>
<li>Full stack monitoring</li>
<li>Single transaction analysis</li>
<li>Broadest technology coverage</li>
</ul>
</div>
</div>
</div>
</div>

0 comments on commit 264b3cc

Please sign in to comment.