Stack

Stack

Description: A stack is a list of text elements. The first element is the heading. The remaining elements can be pure text or text that links to an internal page or external website.

Import

import Stack from 'src/components/Stack.jsx';

Examples

Using Internal Page

Render

Code

() => (
  <Stack color={'light'}>
    <Stack.Heading>Sitemap</Stack.Heading>
    <Stack.InternalPage page={'projects'}>Design Case Studies</Stack.InternalPage>
    <Stack.InternalPage page={'career'}>Work Experience</Stack.InternalPage>
    <Stack.InternalPage page={'visual'}>Visual Portfolio</Stack.InternalPage>
  </Stack>
)

Using External Page

Render

Code

() => (
  <Stack color={'dark'}>
    <Stack.Heading>Tech Used</Stack.Heading>
    <Stack.ExternalLink page={'https://react.dev'}>React</Stack.ExternalLink>
    <Stack.ExternalLink page={'https://vitejs.dev'}>Vite</Stack.ExternalLink>
    <Stack.ExternalLink page={'https://www.cypress.io'}>Cypress</Stack.ExternalLink>     
  </Stack>
)

Props

Stack

Name	Default	Type	Description
color	'light'	string	| 'light' | 'dark' | Color scheme

Stack.Heading

No props

Stack.Text

No props

Stack.InternalPage

Name	Default	Type	Description
page		string	Name of an internal page

Stack.ExternalLink

Name	Default	Type	Description
link		string	Url of an external website