Flowbite based Nodoku components

Currently, the set of Nodoku components based on Flowbite include the following elements:

Flowbite Nav Header

Nav-Header is a component presenting a navigation header of a page or a site

This component consumes exactly one content block, and this content block is supposed to have the following attributes

• the H1 title element of the content block should have the predefined value " {Brand} "
• an image, designating the company logo
• one paragraph having the following form: {companyName} Company name
• one list of menu items, potentially having sub lists

The Nav-Header also can accept two client side components:

• language-switcher
  • a client side component representing a button to change the language of the page
• user-account
  • a client side component representing a button, clicking on which a user may login/logout, or have access to a personal profile

Flowbite Carousel

Flowbite Carousel is an element that presents the content as changing slides.

It supports the following sliding directions:

• horizontal
  • animationType: slide-x
• vertical
  • animationType: slide-y
• fading
  • animationType: fade-in-fade-out

This component can consume any number of content blocks, each content block defining a single slide.

You can customize the appearance of each slide, including background color and background image using the themes customization option, as follows:

  - row:
      components:
        - flowbite/carousel:
            themes:
              - bgColorStyle:
                  decoration: text-center dark:bg-red-700 bg-red-300 p-5
              - bgColorStyle:
                  decoration: text-center dark:bg-orange-700 bg-orange-300 p-5
              - bgColorStyle:
                  decoration: text-center dark:bg-cyan-700 bg-cyan-300 p-5
            selector:
              attributes:
                sectionName: components-flowbite-carousel-showcase

  - row:
      components:
        - flowbite/carousel:
            themes:
              - bgColorStyle:
                  decoration: text-center dark:bg-red-700 bg-red-300 p-5
              - bgColorStyle:
                  decoration: text-center dark:bg-orange-700 bg-orange-300 p-5
              - bgColorStyle:
                  decoration: text-center dark:bg-cyan-700 bg-cyan-300 p-5
            selector:
              attributes:
                sectionName: components-flowbite-carousel-showcase

Flowbite Jumbotron

Flowbite Card

Each card represents exactly one content block.

The content block must have one image included, as this is the image that is used to display on the card.

If the image provider, supplied to the RenderingPage, supports displaying icons, instead of an image one can specify an icon, encoded as follows:

![card-1](icon:nd-react-icons/hi:HiOutlineEmojiHappy )

![card-1](icon:nd-react-icons/hi:HiOutlineEmojiHappy )

Flowbite Horizontal Card

Each card represents exactly one content block.

The content block must have one image included, as this is the image that is used to display on the card.

If the image provider, supplied to the RenderingPage, supports displaying icons, instead of an image one can specify an icon, encoded as follows:

![card-1](icon:nd-react-icons/hi:HiOutlineEmojiHappy )

![card-1](icon:nd-react-icons/hi:HiOutlineEmojiHappy )