Skip to content
Home

HTML Elements

The @dnb/eufemia contains styling for the most commonly used HTML Elements defined by the UX team at DNB. You may also have a look at Typography for headings and paragraph usage.

Elements

Vanilla HTML

In order to apply a style, you have to define a CSS class, like:

<a href="/" className="dnb-anchor">Text Link</a>
<blockquote className="dnb-blockquote">
  Dis leo ala tractatos ei quo.
</blockquote>

React JSX

For those using JSX with React, you can simply use the wrapper Components. They also inherit to the Skeleton provider.

import { H1, H2, P, Anchor, Link } from '@dnb/eufemia/elements'


render(
  <article>
    <H1>Semantic h1</H1>
    <P>My Paragraph</P>
    <Anchor href="/">Link</Anchor>
    <Link href="/">Link</Link>
  </article>
)

Styled Components

They work seamlessly with Styled Components (emotion) as well:

Styled Link
const StyledLink = styled(Link)`

  color: var(--color-fire-red);

`

render(

  <StyledLink href="/" target="_blank">

    Styled Link

  </StyledLink>

)

Unstyled HTML Elements

In order to use the inherited Skeleton, there are a number of un-styled HTML elements, that do inherit and react to the Skeleton Provider.

import { Span, Div } from '@dnb/eufemia/elements'
  • Span
  • Div

Example usage of span


const Box = styled.div`

  display: grid;

  place-items: center;

  width: 12rem;

  height: 4rem;

  padding: 0 1rem;

  background-color: var(--color-white);

`

const StyledButton = styled.button`

  display: flex;

  justify-content: space-between;

  width: 100%;

  &:hover {

    color: var(--color-fire-red);

  }

  &:active {

    opacity: 0.6;

  }

`



const CustomImage = () => {

  const [state, setState] = React.useState(false)

  return (

    <Skeleton show={state}>

      <Box>

        <StyledButton className="dnb-button dnb-button--reset">

          <Span>Text</Span>

          <IconPrimary icon="chevron_right" />

        </StyledButton>

      </Box>

      <br />

      <Skeleton.Exclude>

        <ToggleButton

          checked={state}

          on_change={({ checked }) => setState(checked)}

          top="large"

        >

          Toggle

        </ToggleButton>

      </Skeleton.Exclude>

    </Skeleton>

  )

}



render(CustomImage)

Missing HTML Elements

Not every commonly used HTML Elements are included yet in the @dnb/eufemia. This decision is made by the DNB UX Team and relies on a principle to make UX design as good as possible, consistent and more thoughtful towards a broader customer target.

  • For the select element, use the Dropdown component.