Slide: Author

The "Author" slide lets you introduce the author of the presentation.

Table of contents

Layout

slot="title"

0%0/0

Installation

This template could be added to your presentation using the following methods.

If you are using our Starter Kit this template is included. You don't need to install it so therefore you should skip the "Installation" chapter.

From a CDN

It's recommended to use unpkg if you want to use this template from a CDN. To do so, add the following include script in the main HTML file of your project:

<script type="module" src="https://unpkg.com/@deckdeckgo/slide-author@latest/dist/deckdeckgo-slide-author/deckdeckgo-slide-author.esm.js"></script> <script nomodule="" src="https://unpkg.com/@deckdeckgo/slide-author@latest/dist/deckdeckgo-slide-author/deckdeckgo-slide-author.js"></script>

From NPM

To install this template in your project from npm run the following command:

npm install @deckdeckgo/slide-author

Framework integration

The Stencil documentation provide examples of framework integration for Angular, React, Vue and Ember.

That being said, commonly, you might either import or load it:

Import

import '@deckdeckgo/slide-author';

Loader

import { defineCustomElements as deckDeckGoSlideElement } from '@deckdeckgo/slide-author/dist/loader'; deckDeckGoSlideElement();

Social component

This templates relies on the @deckdeckgo/social component without any explicit dependency. Therefore it should also be installed, see its related installation guide.

Usage

The "Author" slide's Web Component could be integrated using the tag <deckgo-slide-author/>.

<deckgo-deck> <deckgo-slide-author img-src="/assets/author.jpeg" img-alt="My self"> <h1 slot="title">Author</h1> <div slot="author"> <h2>David</h2> <p>Something about me</p> </div> <div slot="social-link"><deckgo-social twitter="daviddalbusco"></deckgo-social></div> </deckgo-slide-author> </deckgo-deck>

Slots

Slots for title, author and social-link are optional. It is recommended that the slot author be filled as to improve the appearance of the slide.

Notes:

  • The slot title is hidden. If you use the DeckDeckGo starter, it will be used for the navigation model.

  • You could provide up to six social-link slots. Each of these could be your custom code or you could use the component <deckgo-social/> to easily provide a link to an external URI.

Notes

Optionally a slot notes could be used to add some notes regarding the particular slide. These will be automatically displayed in the remote control.

If you are using the DeckDeckGo starter kit and wish to make your notes accessible to anyone, you will need to mark them with the attribute show.

Social components

The details of the component <deckgo-social/> is described in the components documentation.

Attributes

This component offers the following options which could be set using attributes:

AttributeTypeDefaultDescription
img-srcstringAn image URI, for example a picture of the author. Note: this image will be displayed as a circle.
img-altstringAn optional accessibility alt for the image.
mode"circle" | "cover" | "none"'cover'The design to be applied to the image. cover fits the image to the start pane, circle displays it in a circle and none in case you would not like to display an image
custom-backgroundbooleanfalseIf you will provide a background for the all deck and a specific one for this slide, set this option to true
custom-actionsbooleanfalseIf you will provide actions for the all deck and a specific one for this slide, set this option to true

Example

<deckgo-deck> <deckgo-slide-author img-src="/assets/author.jpeg"> <div slot="author"> <h2>David</h2> <p>Something about me</p> </div> <div slot="social-link"><deckgo-social twitter="daviddalbusco"></deckgo-social></div> <div slot="social-link"><deckgo-social linkedin="david-dal-busco"></deckgo-social></div> <div slot="social-link"><deckgo-social medium="david.dalbusco"></deckgo-social></div> </deckgo-slide-author> </deckgo-deck>

Theming

The following theming options will affect this component if set on its host or parent.

CSS4 variableDefaultNote
--background
--color
--slide-author-background-startLeft pane background
--slide-author-color-startLeft pane color
--slide-author-background-endRight pane background
--slide-author-color-endRight pane color
--slide-author-padding-top16pxPadding top of a slide
--slide-author-padding-end32pxPadding right of a slide
--slide-author-padding-bottom16pxPadding bottom of a slide
--slide-author-padding-start32pxPadding left of a slide
--slide-padding-start32pxModify slotted ul and ol padding-inline-start
--slide-author-aligninheritModify for example to center if you want to align the content in the middle
--slide-author-text-aligninheritModify for example to center if you want to align the text in the middle
--slide-author-img-size80%The size of the image of the left pane
--slide-author-img-borderThe border of the image of the left pane (only apply if circle mode is specified)
--slide-author-social-padding-top32pxThe spacing between the author description and the social links
--zIndex1The z-index of the slide
--slide-author-social-link-padding8pxPadding for the social links