Skip to content

custom.md

Latest commit

 

History

History
191 lines (132 loc) · 4.12 KB

custom.md

File metadata and controls

191 lines (132 loc) · 4.12 KB

Custom Components

FloatImage

A responsive image component with optional linking and custom styling capabilities.

Import:

import FloatImage from "@site/src/components/commons/FloatImage";

Usage:

<FloatImage 
  url="/img/example.png" 
  alt="Example image"
  width="300px"
  link="https://example.com"
/>

Props:

  • url (string, required) - Path to the image file (relative to static folder)
  • alt (string, required) - Alternative text for the image
  • link (string, optional) - URL to wrap the image in a clickable link
  • ...props (any CSS properties) - Any additional props are applied as inline styles (e.g., width, float, margin)

Default Styling:

The component has the following default styling:

  • width: min(120px, 50%) - Responsive width with 120px maximum
  • float: right - Floats to the right by default
  • margin: 0px 20px 0px 20px - 20px left and right margin

Any of these can be overriden by passing props:

<FloatImage 
  url="/img/chart.png" 
  alt="Data visualization"
  width="400px"
  float="left"
  margin="1em 0"
/>

LbeChip

A clickable chip component that links to the Lead by Example datasets page filtered by a specific subdiscipline.

Import:

import LbeChip from "@site/src/components/commons/LbeChip";

Usage:

<LbeChip title="organic chemistry" />

Props:

  • title (string, required) - The subdiscipline name used for filtering datasets

FeatureButton

A clickable button component that displays an image with text, designed for feature navigation.

Import:

import FeatureButton from "@site/src/components/features/FeatureButton";

Usage:

<FeatureButton 
  url="/docs/example"
  imgUrl="/img/icon.svg"
  text="Feature Name"
  width="150px"
  alt="Feature icon"
/>

Props:

  • url (string, required) - The link destination URL
  • imgUrl (string, required) - Path to the image/icon (relative to static folder)
  • text (string, required) - Button text displayed below the image
  • width (string, optional) - Width of the image (default: "120px")
  • alt (string, optional) - Alternative text for the image (defaults to text if not provided)
  • index (boolean, optional) - If true, applies primary button styling; otherwise uses secondary styling
  • classes (string, optional) - Additional CSS classes to apply to the button

Features

Renders a responsive array of FeatureButton components.

Import:

import Features from "@site/src/components/features/Features";

Usage:

const features = [
  { url: "/docs/overview", imgUrl: "/img/overview.svg", text: "Overview" },
  { url: "/docs/start", imgUrl: "/img/start.svg", text: "Get Started" },
];

<Features featureList={features} index width="140px" />

Props:

  • featureList (array, required) - List of feature objects with url, imgUrl, text, and optional alt
  • index (boolean, optional) - If true, all buttons use primary styling; otherwise secondary styling
  • ...props (any, optional) - Passed to each FeatureButton (e.g., width, classes)

BulletBox

A styled box component designed to display content in a responsive card-like button format.

Import:

import { BulletBox } from "@site/src/components/commons/BulletBox";

Usage:

<BulletBox secondary>
  <h3>Feature Title</h3>
  <p>Feature description goes here.</p>
</BulletBox>

Props:

  • children (ReactNode, required) - Content to display inside the box
  • secondary (boolean, optional) - If true, applies secondary button styling; otherwise uses primary styling

BulletContainer

A wrapper component that arranges multiple BulletBox components in a responsive grid layout.

Import:

import { BulletContainer } from "@site/src/components/commons/BulletBox";

Usage:

<BulletContainer>
  <BulletBox>
    <h3>Feature 1</h3>
    <p>Description 1</p>
  </BulletBox>
  <BulletBox secondary>
    <h3>Feature 2</h3>
    <p>Description 2</p>
  </BulletBox>
</BulletContainer>

Props:

  • children (ReactNode, required) - Typically contains multiple BulletBox components