Skip to content
Home

Section

Info
Demos
Properties

Demos

Default Section without spacing

Visual DNB Section: default

Default Section with large spacing

Visual DNB Section: default with spacing

White Section

Visual DNB Section: white

Divider Section

Visual DNB Section: divider

Mint-Green Section

Visual DNB Section: mint-green

Sea-Green Section

Visual DNB Section: sea-green

Emerald-Green Section

Visual DNB Section: emerald-green

Lavender Section

Visual DNB Section: lavender

<Section spacing="small" style_type="lavender">

  <P space={0}>

    Visual DNB Section: <Anchor href="#">lavender</Anchor>

  </P>

</Section>

Grey Section

Visual DNB Section: black-3

<Section spacing style_type="black-3">

  <P space={0}>

    Visual DNB Section: <Anchor href="#">black-3</Anchor>

  </P>

</Section>

Sand-Yellow Section

Visual DNB Section: sand-yellow

<Section spacing style_type="sand-yellow">

  <P space={0}>

    Visual DNB Section: <Anchor href="#">sand-yellow</Anchor>

  </P>

</Section>

Pistachio Section

Visual DNB Section: pistachio

<Section spacing style_type="pistachio">

  <P space={0}>

    Visual DNB Section: <Anchor href="#">pistachio</Anchor>

  </P>

</Section>

Fire-Red Section

Visual DNB Section: fire-red

<Section spacing style_type="fire-red">

  <P space={0}>

    Visual DNB Section: <Anchor href="#">fire-red</Anchor>

  </P>

</Section>

Fire-Red-8 Section

Visual DNB Section: fire-red-8

<Section spacing style_type="fire-red-8">

  <P space={0}>

    Visual DNB Section: <Anchor href="#">fire-red-8</Anchor>

  </P>

</Section>

Info Section

Generic info section: info

<Section spacing variant="info">

  <P space={0}>

    Generic info section: <Anchor href="#">info</Anchor>

  </P>

</Section>

Error Section

Error section: error

<Section spacing variant="error">

  <P space={0}>

    Error section: <Anchor href="#">error</Anchor>

  </P>

</Section>

Warning Section

Warning section: warning

<Section spacing variant="warning">

  <P space={0}>

    Warning section: <Anchor href="#">warning</Anchor>

  </P>

</Section>

Success Section

Success section: success

<Section spacing variant="success">

  <P space={0}>

    Success section: <Anchor href="#">success</Anchor>

  </P>

</Section>