Permalink
Browse files

feat(figcaption): caption examples and styling

  • Loading branch information...
katrin-freihofner committed Apr 19, 2017
1 parent 615cf54 commit eabcc322c5e47549b759b153b73ec3777287125d
View
Binary file not shown.
View
@@ -0,0 +1,44 @@
---
layout: components_icons.hbs
meta:
title: "Caption"
description: "A caption component for Dynatrace styled web entities with css and markup examples."
keywords: "Caption, figcaption, img, image, Dynatrace, groundhog, css component"
---
## Introduction
The Groundhog **caption** component is a styled text element. It can hold `<a>` elements and is typically accompanied by image or illustrations.
## Including the checkbox component
1. To include a caption component into your project, first create the `<img>` and `<p>` or `figcaption` elements:
```html
<img src="/assets/images/test-img.jpg" alt="test-img">
<p>My caption</p>
```
```html
<figure>
<img src="/assets/images/test-img.jpg" alt="test-img">
<figcaption>My caption</figcaption>
<figure>
```
2. To add the visual enhancements of Groundhog, add the necessary classes to the elements class attributes:
```html
<img src="/assets/images/test-img.jpg" alt="test-img">
<p class="caption">My caption</p>
```
```html
<figure class="img-container">
<img src="/assets/images/test-img.jpg" alt="test-img">
<figcaption class="caption">My caption</figcaption>
<figure>
```
## Additional attributes for the checkbox
| attribute name | effect |
|----------------|--------|
| `caption` | Will enable text style like in the examples |
View
@@ -0,0 +1,19 @@
@import "../common/variables";
$img-width: 500px;
.caption {
color: $gray-500;
font-size: 0.9rem;
line-height: 1.6rem;
padding-top: 0.3rem;
}
/*
* image container width can be easily overridden by your personal stylesheet
*/
.img-container {
margin: 0;
padding: 0;
width: $img-width;
}
@@ -0,0 +1,4 @@
<div class="img-container">
<img src="/assets/images/test-img.jpg" alt="test-img">
<p class="caption">This is a test caption. <a href="http://groundhog.dynalabs.io/">groundhog.dynalabs.io</a></p>
</div>
@@ -0,0 +1,4 @@
<figure class="img-container">
<img src="/assets/images/test-img.jpg" alt="test-img">
<figcaption class="caption">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. <a href="http://groundhog.dynalabs.io/">groundhog.dynalabs.io</a></figcaption>
</figure>
View
@@ -34,6 +34,7 @@
@import "slider/slider";
@import "select/select";
@import "loading/loading";
@import "caption/caption";
/** Trumps **/
@import "trumps/hide-mq";

0 comments on commit eabcc32

Please sign in to comment.