Portal docs

Playground to test the stressful layouts

This page demoonstrates various unusual layouts combinations to check if visual style looks good.

Follow the steps to change the logo of the site.

  1. Go to "src/components/navigation/topnav.tsx"

  2. Update Logo component

    const Logo = ({ className }: { className: string }) => (
   <svg className={className} xmlns="http://www.w3.org/2000/svg">...</svg>
);

  3. Hello there

  4. I don't know anything

  5. I know only MDX

  6. I am a developer

  7. I am a designer

    1. Child list Item

    2. Child list Item

    3. Child list Item with a lot of text. Generally, it is a good idea to keep the text short and concise. But sometimes, you need to write a lot of text to explain the concept.

      1. Child list Item
      2. Child list Item
      3. Child list Item
      4. Child list Item

  8. I am a tester

  9. I am a manager

  10. I am a product owner

  11. I am a product manager

  • Bullet point owne
  • Bullet point two
  • Bullet point three
    • Bullet point three child
    • Bullet point three child
    • Bullet point three child
      • Bullet point three child
      • Bullet point three child
  • Bullet point four
  • Bullet point five
  • Bullet point six

Next title

   const Logo = ({ className }: { className: string }) => (
      <svg className={className} xmlns="http://www.w3.org/2000/svg">...</svg>
   );
  1. Hello
  2. Broken layout 
    const Logo = ({ className }: { className: string }) => (
   <svg className={className} xmlns="http://www.w3.org/2000/svg">...</svg>
);

  • Item outline

  • Item outline Bold

    const Logo = ({ className }: { className: string }) => (
   <svg className={className} xmlns="http://www.w3.org/2000/svg">...</svg>
);

  • Item outline Italic

  • Item outline Code

    Zeba zebra zebra

  • Item outline Link

    1. Item outline Inline code

    2. Item outline Inline code Bold

      TablesAreCool
      PastaIsTasty
      ItalyIsHello

    3. Item outline Inline code Italic

Complex scenarios

Callout can contain other elements too:

  1. Lists
  2. Tables
  3. And more

Heading element

TablesAreCool
PastaIsTasty
ItalyIsHello
ZebrasAreNeat
HTML syntax
<pre>
  <code>**By the way, I'm not sure if `type` property name is the best choice. Historically, it has been used to determinte different input variable types.**</code>
</pre>

By the way, I'm not sure if type property name is the best choice. Historically, it has been used to determinte different input variable types.

HTML syntax
  <pre>
    <code>**By the way, I'm not sure if `type` property name is the best choice. Historically, it has been used to determinte different input variable types.**</code>
  </pre>
© Copyright 2024.
Discord