Rijkswaterstaat.nl stijlgids

# Widgets

# Hinderwidget Landing Content

Widget waarmee er gezocht kan worden naar hinder op rwsverkeersinfo.nl (opens new window).

https://rijkswaterstaat.eightmedia.nl/components/hinderwidget.html

# 16:9 Embed Landing Content

Een iframe-embed die altijd de juiste verhouding aanhoudt voor externe 16:9 video's. Kan gebruikt worden voor livestreams.

https://rijkswaterstaat.eightmedia.nl/components/169-embed.html

# X (voorheen Twitter) Content

Op basis van de schermnaam kan er een X-timeline getoond worden:

https://rijkswaterstaat.eightmedia.nl/components/twitter-timeline.html

Het is ook mogelijk om één enkele Tweet te tonen, op basis van het id:

https://rijkswaterstaat.eightmedia.nl/components/twitter-tweet.html

# Flow - Schade & Compensatie widget Content

Flexibel in te zetten widget voor het aanbieden van een set aan keuzes om een aantal specifieke uitkomsten te laten zien. In gebruik als Schade & Compensatie widget. Naast de html is voor deze widget ook een Javascript variable nodig met daarin de JSON data voor de flow.

Voorbeeld voor Schade & Compensatie:

<head>
  <!-- andere head content -->
  
  <script type="application/javascript">
    var flowData = {
      steps: [
        {
          type: 'text',
          id: 'start',
          title: 'Komt u in aanmerking voor een schadevergoeding?',
          text: '<p>tekst</p>',
          next: {
            label: 'Start de check',
            id: 'vraag_waar_schade'
          }
        },
        {
          type: 'buttons',
          id: 'vraag_waar_schade',
          title: 'Waar kreeg u schade?',
          options: [
            {
              label: 'Op de weg',
              id: 'resultaat',
              icon: '<svg>...</svg>'
            },
            {
              label: 'Op het water',
              id: 'resultaat',
              icon: '<svg>...</svg>'
            }
          ]
        },
        {
          type: 'text',
          id: 'resultaat',
          title: 'Resultaat',
          text: '<p>tekst</p>',
          options: [
            {
              label: 'Online indienen',
              url: '#'
            },
            {
              label: 'Per post indienen',
              url: '#'
            },
          ]
        }
      ]
    };
  </script>
</head>

Data structuur:

  • Er kunnen oneindig veel stappen in een flow aan elkaar gekoppeld worden
  • Een stap kan een text stap of een buttons stap zijn

Elke stap in de steps array heeft de volgende structuur:

Text stap:

  • type: 'text'
  • id: Unieke identifier voor deze stap
  • title: Titel van de stap
  • text: HTML content van de stap
  • next (optioneel): Object met label en id voor een volgende knop
  • options (optioneel): Array met exit links. Bij meerdere opties wordt de eerste automatisch een button. Elk object bevat:
    • label: Tekst van de optie
    • url: URL waar naartoe navigeerd wordt

Buttons stap:

  • type: 'buttons'
  • id: Unieke identifier voor deze stap
  • title: Titel van de vraag
  • options: Array met opties, elk object bevat:
    • label: Tekst van de optie
    • id: ID van de volgende stap waar naartoe genavigeerd wordt
    • icon (optioneel): SVG icon als string
https://rijkswaterstaat.eightmedia.nl/components/flow-start.html

# Roadfeed widget Content

Roadfeed widget waarmee er gezocht kan worden naar hinder op rwsverkeersinfo.nl (opens new window).

https://rijkswaterstaat.eightmedia.nl/components/roadfeed-a2.html

← Zakelijk →