⚠️This version of Waffles Design System is no longer maintained, and was deprecated at the end of 2022. It's main repository is archived. Please migrate your app to the New Waffles.

components

Assets

A collection of DataCamp assets.

Overview

Waffles exposes several assets components:

ALPALoop – A component that can display the ALPA loop graphic. Can highlight a section of the loop (Apply, Assess, Learn, or Practice) by setting the highlight prop.
DatacampLogo – A component that will display the DataCamp logo in the colours specified by the logomarkColor and wordmarkColor props.
Logos – Contains various forms of DataCamp logos, and logos for other DataCamp products.
TechLogo – A component that can display a logo for each technology. Controlled by the technology prop.

Examples

Logomark only

Regular logo

ALPA loop regular

ALPA loop with highlight

Technology logos regular

Raw Assets

These components are available for use in React. However if you are in an environment where this is not useful, there is also a @datacamp/waffles-assets package. This contains all the source svgs that are used to generate these components. Depending on the technology being used there will be a variety of ways to include these assets in your application.

Imports

You can import following components or utilities from this module:

import {
  ALPALoop,
  TechLogo,
  DatacampLogo,
  Logos,
  Technologies,
  ALPA,
} from '@datacamp/waffles-asset-components';