Components

Marginal component

A marginal component follows the paragraph, with no empty line between paragraph and marginal component.

There are two types of marginal components:

Pull quotes/key statements
Marginal modules

There must be at least three hyphens following/preceding the colon. More hyphens are allowed to increase the readability of the code.

Hint

Collapsing marginals: If the paragraph is less high than the hight of all corresponding marginals, the marginal components collapse and show on hover unless the paragraph is followed by a paragraph without marginal components.

Pull quote

Key statements in the text, so called pull quotes, can be added to the marginals to catch attention and give readers an idea about the adjacent content.

:--- KEYSTATEMENT ---:
pull quote
:---:

Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci consectetur odio maxime ad itaque earum, aliquam hic neque inventore minima ea doloribus. Voluptatibus illo incidunt, est, consequatur quam quae.
:----------- KEYSTATEMENT -----------:
Adipisci consectetur odio maxime ad itaque earum.
:------------------------------------:

Marginal module

Marginal modules are textblocks preceeded by an icon. Markdown syntax and inline components can be used in marginal modules.

:---  marginal module slug  ---:
marginal module content
:---:

The modules receive the CSS class .ms-aside-SLUG. The icons are taken from the Material icon font and are defined by the theme.

The default graphite theme currently supports the following modules:

//  Define icons for marginal modules
//
//  module slug   :  Material icon slug
//  -----------      ------------------
$ms-icons: (
    link          :  earth,
    licence       :  copyright,
    caption       :  information-variant,
    author        :  account,
    twitter       :  twitter,
    linkedin      :  linkedin,
    glossary      :  book-open-variant,
    note          :  star,
    sidenote      :  star,
    download      :  download,
    slidedeck     :  chart-pie,
    reference     :  tooltip-text,
    translate     :  translate,
    generalSource :  format-quote-close,
    institution   :  domain,
    facebook      :  facebook,
    youtube       :  youtube-play,
);

// ...

// Assign icons to classes
@each $ms-type, $ms-icon in $ms-icons {
    .ms-aside-#{$ms-type} p{ @extend .mdi-#{$ms-icon}; }
}

Examples

:--- NOTE ---:
Lorem ipsum dolor sit amet, **consectetur adipiscing** elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
:------------:

:--- LINK ---:
[NetzDG ( Art. 2)](https://www.gesetze-im-internet.de/netzdg/BJNR335210017.html)
:------------:

Inline component

Reference

The inline reference to a source in the text consists of a slug to the full reference and the text displayed.

[: REFERENCE | reference slug | reference caption :]

Example

This is text [: REFERENCE | AuthorCoauthor2020 | Author, F., Coauthor, S. 2016 :] that goes on.

Which will link to the item in the reference list pages/references.yaml with the according slug.

AuthorCoauthor2020:
    short: "Author, F., Coauthor, S. (2016). Some fancy title, 7(1)."
    long: "Author, F., Coauthor, S. (2016). Some fancy title, 7(1). 2053951719897945."
    url: "http://someurl.com"

Tip

To display reference icons only, simply leave the element after the second | blank.

Sidenote

Marginal notes can refer to a particular element in the text by referencing the sidenote within the text.

[: SIDENOTE | term :]

Followed by the Marginal module:

:--------- SIDENOTE | term ---------:
Explanation
:---------------------------------------------------------------------------:

Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci consectetur odio maxime ad itaque earum [: SIDENOTE | molestias :], aliquam hic neque inventore minima ea doloribus. Voluptatibus illo incidunt, est, consequatur quam quae.
:--- SIDENOTE | molestias ---:
See [Some link](https://#): Lorem ipsum dolor sit amet, consectetur adipisicing elit.
:------------:

Glossary item

Glossary items can be added to the text. The explanation will show in the marginal column. The term preceeding the first colon will be wrapped in a <strong> tag.

[: GLOSSARY | glossary slug | glossary caption :]

Followed by the marginal component:

:--------- GLOSSARY | glossary slug ---------:
Term: Explanation
:---------------------------------------------------------------------------:

Example:

Alongside human reviewers called content moderators, platforms use automation and AI to identify and respond to problematic content and behaviour. The benefit of [: GLOSSARY | ACM | algorithmic content moderation (ACM) :] is that it is a fast and globally scalable way to prevent offensive content being uploaded and travelling across the globe within seconds.
:--- GLOSSARY | ACM ---:
ACM: Platforms use human reviewers, known as _content moderators_, to screen posts and accounts for abuse. Because of the large amount of activity that happens on platforms everyday, content moderation is too large a task for human content moderators alone. Platforms therefore use technical automation to identify and sanction violating posts and accounts. ACM refers to "systems that classify user-generated content based on either matching or prediction, leading to a decision and governance outcome (e.g. removal, geoblocking, account takedown)"[: REFERENCE | GorwaKatzenbach2020 | :]. This could be as simple as a bot that deletes posts with a certain keyword in them. However, large platforms routinely and increasingly use complex, advanced technologies, such as machine learning (ML), to undertake tasks in content moderation.
:---------------------:

Hint

Inline components such as a Reference can be used in the marginal of inline components.

Container component

A container component streches over all columns. The marginal column contains descriptive information as well as share, full screen and download buttons.

The component must be wraped by empty lines with at least three hyphens following/preceding the colon. More hyphens are allowed to increase the readability of the code. YAML syntax is used within the component.

Figure

A figure will show as full-column element. Add alternative information to increase accessability if images are not displayed. Description, author and licence information are not mandatory.

:--- FIGURE ---:
file: path to file
alt: alt attribute for image
caption: title of figure
description: description/further information
author: author/rights holder
licence: copyright licence
:---:

Example:

:------------------------------- FIGURE --------------------------:
file: images/studienelemente.svg
author: Impact Distillery
licence: CC BY SA 3.0
alt: Die Abbildungs zeigt die Visualisierung der Studienelemente, bestehend aus X, Y und Z.
caption: Studienelemente
description: Der Aufbau der Studie im Überblick
:-----------------------------------------------------------------:

Video

The video component allows embedding of YouTube videos.

:--- FIGURE ---:
url: url of YouTube vide in the format https://www.youtube.com/embed/VIDEOID
caption: title of video
description: description/further information
authorDescription: author information
linkedinName: LinkedIn profile handle (w/o url)
twitterName: Twitter profile handle (w/o url)
:---:

Example:

:------------------------- VIDEO --------------------------:
url: https://www.youtube.com/embed/-qCtxCHBBhw
caption: "Gespräch  mit Moritz Kreppel"
authorDescription: Urban Sports Club
linkedinName: moritzkreppel
twitterName: MoritzKreppel
description: "1. Welche Erfahrungen haben Sie in der Zusammenarbeit mit etablierten Unternehmen gemacht?<br>
2. Wie verläuft die Identifikation und Ansprache interessanter Unternehmen?<br>
3. Welche Faktoren haben die Zusammenarbeit positiv beeinflusst?<br>
4. Warum könnte eine Zusammenarbeit mit etablierten Unternehmen, einer Kooperation mit Großkonzernen vorgezogen werden?"
:----------------------------------------------------------:

Blockquote

A blockquote shows as full column element. Orginal quotes can be added when translated, author details and social media links are not mandatory.

:--- QUOTE ---:
quote: quote
quoteOriginal: quote in original language
author: quotee
authorDescription: quotee details, affiliation or short bio
linkedinName: LinkedIn profile handle (w/o url)
twitterName: Twitter profile handle (w/o url)
:---:

Example:

:------------------------- QUOTE --------------------------:
quote: "Wenn du als Startup nicht kooperierst hast du keine Chance."
quoteOriginal: "As a small company, you don’t have a chance without collaborating."
author: "Gilad Amitai"
authorDescription: "Ubimo"
linkedinName: giladamitai
twitterName: gamitai
:----------------------------------------------------------:

Table

Simple Markdown tables are rendered within the text, more complex tables should be visualised with the table component. Header rows and columns are possible, a download button links to the data file.

:--- CSV ---:
file: path to csv file
caption: caption of table
description: description/further information
header-row: true or false
header-column: true or false
:---:

Example:

:-------------- CSV ------------------:
file: assets/tables/table.csv
caption: Lorem ipsum dolor sit amet
description: Amet dictum sit amet justo donec enim et leo duis ut diam
header-row: true
header-column: true
:-------------------------------------:

Author

An author component presenting authors, editors or other persona relevant for the publication.

:--- AUTHOR ---:
file: path to csv file
name: author name
institution: author affiliation or position
website: link to company or personal website
linkedinName: LinkedIn profile handle (w/o url)
twitterName: Twitter profile handle (w/o url)
description: Short bio or person details
:---:

:---------------------- AUTHOR ----------------------:
file: assets/images/authors/image-of-author.png
name: Martha Mustermann
institution: Brand Inc.
website: https://www.impactdistillery.de/graphite
linkedinName: sample
description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
:----------------------------------------------------:

Carousel

Multiple container components can be shown as carousel. Slides are seperated by three hypens, component details need to be intended.

:--- SLIDES ---:

container component slug :

... container component yaml content

---

container component slug :

... container component yaml content

:---:

Example:

:------------------------- SLIDES --------------------------:
quote:
    quote: "Der Mittelstand ist unglaublich spannend. Viele schauen immer auf die DAX-Konzerne, aber der Mittelstand bietet unglaublich viel Potenzial für Startups und er öffnet sich ihnen gegenüber mehr und mehr. Es gibt ein paar erste treibende Kräfte und die Tendenz, dass viele mittelständische Unternehmen mittlerweile die Wichtigkeit des Themas erkannt haben. Darüber hinaus ist das Thema Digitalisierung nicht mehr nur ein Gespenst, sondern Realität."
    author: "Roman Neumann"
    authorDescription: "VR Leasing AG"
    linkedinName: roman-neumann-b2a13a33
---
quote:
    quote: "In 2017 sehen wir immer häufiger, dass sich viele Leute immer besser mit Startups auskennen und es mittlerweile eine gemeinsame Sprache gibt. Die Erfahrungen und das Wissen, wie man mit Startups kommuniziert und umgeht, nehmen kontinuierlich zu."
    quoteOriginal: "I think in 2017 we’re starting to see that people are much more familiar with startups and that there’s common language. There’s tribal knowledge in knowing how to talk or deal with the startups."
    author: "Angelia Müller"
    authorDescription: "Techstars"
    linkedinName: angiemuller
    twitterName: mullermilk
---
quote:
    quote: "Wenn du als Startup nicht kooperierst hast du keine Chance."
    quoteOriginal: "As a small company, you don’t have a chance without collaborating."
    author: "Gilad Amitai"
    authorDescription: "Ubimo"
    linkedinName: giladamitai
    twitterName: gamitai
:----------------------------------------------------------:

Full-width component

Full with components span the full with of the page.

Chapter header

Full width chapter headers with headline, subheadline and background image.

:--- CHAPTER_HEADER ---:
image: url to background image
authors: chapter authors
title: chapter headline
subtitle: chapter subheadline
thumbnail: url to graphic/icon left of content
:---:

Example:

:-------------------- CHAPTER_HEADER --------------------:
image: "path/to/background-image.jpg"
authors: "Joan London & Jack Middleton"
thumbnail: "path/to/trailing-icon.png"
title: Introduction
subtitle: Bibendum ut tristique et egestas quis ipsum suspendisse ultrices
:---------------------------------------------------------:

Infobox

Collapsable section for case studies, excursus or similar.

:--- INFOBOX ---:
title: title of infobox
description: description of infobox
note: key learnings or quick summary
link: list of links
---
infobox component content (md)
:---:

Example:

:---------------------- INFOBOX ---------------------------:
title: Lorem ipsum dolor sit amet
description: Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
note: "<strong>Key-Learnings:</strong><br>
Duis aute irure dolor in reprehen derit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
link:
- http://www.loopline-systems.com
- http://www.allfoye.net
---
## Headline for the excursus
Augue mauris augue neque gravida in fermentum et sollicitudin ac. Scelerisque fermentum dui faucibus in ornare quam. Malesuada fames ac turpis egestas sed. Nisi porta lorem mollis aliquam ut porttitor. Tortor dignissim convallis aenean et tortor at risus viverra. Purus sit amet luctus venenatis lectus magna fringilla. Nulla at volutpat diam ut venenatis tellus in metus.

Amet commodo nulla [: REFERENCE | Lorem2020 | facilisi :] nullam vehicula. Id velit ut tortor pretium viverra suspendisse potenti. Sed nisi lacus sed viverra. Mi quis hendrerit dolor magna eget est. A diam sollicitudin tempor id eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames. At erat pellentesque adipiscing commodo elit at imperdiet.
:----------------------------------------------------------:

Full-width figure

Component to display figures spaning the full width of the page.

:--- FULL_FIGURE ---:
file: path to file
alt: alt attribute for image
caption: title of figure
description: description/further information
author: author/rights holder
licence: copyright licence
:---:

Example:

:------------ FULL_FIGURE ------------:
file: assets/images/figures/some-figure-de.svg
alt: Figure visualising something.
caption: Duis aute irure dolor in reprehen   derit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
:-------------------------------------:

Additional plugins

List of references

Prints the list of references defined in pages/references.yaml.

:--- LISTOFREFERENCES ---:
title: Title above list
:---:

List of figures

Prints a list of figures.

:--- LISTOFFIGURES ---:
title: Title above list
:---:

Components

Marginal component

Pull quote

Marginal module

Inline component

Reference

Sidenote

Glossary item

Container component

Figure

Video

Blockquote

Table

Author

Carousel

Full-width component

Chapter header

Infobox

Full-width figure

Additional plugins

List of references

List of figures

HTML Plugin

Default Plugin

YAML Plugin

JSON Plugin

YamlMd Plugin

Variable Plugin