Permalink
Browse files

feat(media component): initial commit

  • Loading branch information...
lara-aigmueller committed Sep 13, 2016
1 parent 5da861a commit 9234fcad8cf0cba91c908ba405847c56631eedce
Showing with 65 additions and 0 deletions.
  1. +1 −0 src/main.scss
  2. +3 −0 src/media/README.md
  3. +31 −0 src/media/media.scss
  4. +16 −0 src/media/samples/00-media.html
  5. +14 −0 src/media/samples/01-media.html
View
@@ -24,6 +24,7 @@
@import "radiobutton/radiobutton";
@import "inputfield/inputfield";
@import "textarea/textarea";
@import "media/media";
/** Trumps **/
View
@@ -0,0 +1,3 @@
---
layout: components_icons.hbs
---
View
@@ -0,0 +1,31 @@
@import "../common/variables";
.media {
background-color: $gray-100;
display: flex;
padding: 1.5rem;
}
.media__item {
margin-bottom: 1.5rem;
}
.media__item > * {
max-width: 100%;
}
.media__text {
}
.media--horizontal {
flex-direction: row;
}
.media--horizontal .media__text {
flex-grow: 2;
}
.media--vertical {
flex-direction: column;
}
@@ -0,0 +1,16 @@
<div class="media media--vertical">
<div class="media__item">
<svg role="img" class="icon icon--blue icon--big">
<use xlink:href="#ruxit"></use>
</svg>
</div>
<div class="media__text">
<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,14 @@
<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__text">
<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 comments on commit 9234fca

Please sign in to comment.