# Components

Fernando Cesar

# Getting Started

# Creating a folder

Create a folder on the directory of your project. Inside the folder, you need to create a index.yml file, this file is what defines a folder as a folder.

# Creating a page

First you must create a .md file

All you need to create a new page is:

---
label: name
---

Don't forget to add the --- before and after the label

# Setting the author

Here is how you can sign who have made the page.

---
author:
    name: {name}
    avatar: {../path-to-image}
---

Don't forget to add the --- before and after the label

# Icons

Similar to the Emoji :shortcode: syntax, you can add icons using :icon-shortcode:, where the shortcode is an Octicon icon name.

You can also add it to a folder by referencing it in the index.yml file:

icon: {icon-name}

Don't forget to add the --- before and after the label

# Alert

Here is how to create a alert component

This is an alert

Code to create an alert:

!!!
{message}
!!!

# Button

The button is basically a link to a file or site. To set the link you have to use () after the [!button {name}] e.g: Welcome Landing page

[!button Welcome](../../welcome.md)

[!button Landing page](https://dna.mci.today)

Demo	Source
Normal link	`[Normal link] (documentation.md)`
Button	`[!button Button] (documentation.md)`

# Variants

Demo	Source
	`[!button variant="primary" text="Primary"]`
	`[!button variant="secondary" text="secondary"]`
	`[!button variant="success" text="success"]`
	`[!button variant="danger" text="danger"]`
	`[!button variant="warning" text="warning"]`
	`[!button variant="info" text="info"]`
	`[!button variant="light" text="light"]`
	`[!button variant="dark" text="dark"]`
	`[!button variant="ghost" text="ghost"]`
	`[!button variant="contrast" text="contrast"]`

# Corners

Demon	Source
	`[!button text="Default"]`
	`[!button corners="square" text="Square"]`
	`[!button corners="pill" text="Button Pill"]`

# Target

Sets the target attribute of the badge and specifies which window or tab to open the link into.

Retype

[!button target="blank" text="Retype"]

# Octicons

Octicons can be used as an icon by settiing the icon property with the name of the Octicon.

[!button variant="info" icon="person" text="User"]

[!button variant="primary" icon="paper-airplane" iconAlign="right" text="Send"]

# Emoji

Emoji :shortcodes: can be used for the icon.

[!button variant="light" icon=":heart:" text="Like"]

[!button variant="info" icon=":rocket:" iconAlign="right" text="Rocket"]

# Badge

Similar to a Button, the Badge component uses the same syntax as the button, but is prefixed with a !badge identifier. The parameters you pass to a badge is the same as a button.

# Adding image

The image component embeds an image in your document. You can point to image files stored within the project, or an external URL.

![This is an optional caption](../static/devops.png "This is an optinal title (hold your mouse over)")

# Table

Tables are an easy way to pass information and in this doc we use them in 'Infraestrucre Changelog'.

e.g:

Name	Value
Item 1	Blue
Item 2	Green

Here is how you create one.

Name   | Value
---    | ---
Item 1 | Blue
Item 2 | Green

# Tab

This is a section for organizing and displaying related content. Used on retype install to set which installer you want to use (npm, yarn, dotnet).

First tab

Second tab

Third Tab

+++ Tab 1
First tab
+++ Tab 2
Second tab
+++ Tab 3
Third Tab
+++

# Panel

A panel for managing and interacting with content or settings. Used on 'Release Changelogs'

This is a Panel. Expanded by default.

=== My Panel
This is a Panel. Expanded by default.
===

To change the expanded by default option you just need to replace the first === to ==-

This is a Panel. Not expanded by default

==- My Panel
This is a Panel. Not expanded by default
===

You don't need to change the last ===

docs