import { Title } from '@luis/react';

function Example() {
  return (
    <>
      <Title>Extra Large Title (h1)</Title>
      <Title size="l">Large Title (h2)</Title>
      <Title size="m">Medium Title (h3)</Title>
      <Title size="s">Small Title (h4)</Title>
    </>
  );
}

<h1 class="luis-title-xl">Extra Large Title (h1)</h1>
<h2 class="luis-title-l">Large Title (h2)</h2>
<h3 class="luis-title-m">Medium Title (h3)</h3>
<h4 class="luis-title-s">Small Title (h4)</h4>

import { Title } from '@luis/react';

function Example() {
  return (
    <>
      {/* Visual h1 but semantic h2 */}
      <Title as="h2">Main Section</Title>

      {/* Visual h3 but semantic h1 (rare case) */}
      <Title as="h1" size="m">Compact Page Title</Title>
    </>
  );
}

<!-- Visual h1 style but semantic h2 -->
<h2 class="luis-title-xl">Main Section</h2>

<!-- Visual h3 style but semantic h1 -->
<h1 class="luis-title-m">Compact Page Title</h1>

import { Paragraph } from '@luis/react';

function Example() {
  return (
    <>
      <Paragraph size="l">
        Large paragraph for emphasized or introductory text that
        needs to stand out from regular body content.
      </Paragraph>

      <Paragraph>
        Medium paragraph (default) for standard body text. This size
        is optimized for readability in most contexts.
      </Paragraph>

      <Paragraph size="s">
        Small paragraph for secondary information, disclaimers,
        or fine print that shouldn't dominate the layout.
      </Paragraph>
    </>
  );
}

<p class="luis-paragraph-l">
  Large paragraph for emphasized or introductory text that
  needs to stand out from regular body content.
</p>

<p class="luis-paragraph-m">
  Medium paragraph (default) for standard body text. This size
  is optimized for readability in most contexts.
</p>

<p class="luis-paragraph-s">
  Small paragraph for secondary information, disclaimers,
  or fine print that shouldn't dominate the layout.
</p>

import { Title, Paragraph } from '@luis/react';

function Article() {
  return (
    <article>
      <Title>The Future of Web Development</Title>

      <Paragraph size="l">
        Modern web development continues to evolve at a rapid pace,
        with new frameworks and tools emerging regularly.
      </Paragraph>

      <Title size="l">Introduction</Title>
      <Paragraph>
        In this article, we'll explore the latest trends shaping
        the future of web development, from component-based
        architectures to edge computing.
      </Paragraph>

      <Title size="m">Component Systems</Title>
      <Paragraph>
        Component-based development has become the standard approach
        for building scalable user interfaces. This methodology
        promotes reusability and maintainability.
      </Paragraph>

      <Paragraph size="s">
        Published on January 15, 2024 by the LUIS Team
      </Paragraph>
    </article>
  );
}

<article>
  <h1 class="luis-title-xl">The Future of Web Development</h1>

  <p class="luis-paragraph-l">
    Modern web development continues to evolve at a rapid pace,
    with new frameworks and tools emerging regularly.
  </p>

  <h2 class="luis-title-l">Introduction</h2>
  <p class="luis-paragraph-m">
    In this article, we'll explore the latest trends shaping
    the future of web development, from component-based
    architectures to edge computing.
  </p>

  <h3 class="luis-title-m">Component Systems</h3>
  <p class="luis-paragraph-m">
    Component-based development has become the standard approach
    for building scalable user interfaces. This methodology
    promotes reusability and maintainability.
  </p>

  <p class="luis-paragraph-s">
    Published on January 15, 2024 by the LUIS Team
  </p>
</article>

import { Title, Paragraph } from '@luis/react';

function Card() {
  return (
    <div className="card">
      <Title as="h3" size="m">Feature Name</Title>
      <Paragraph>
        Description of the feature that explains its benefits
        and how it helps users accomplish their goals.
      </Paragraph>
      <Paragraph size="s" className="meta">
        Available in Pro plan
      </Paragraph>
    </div>
  );
}

<div class="card">
  <h3 class="luis-title-m">Feature Name</h3>
  <p class="luis-paragraph-m">
    Description of the feature that explains its benefits
    and how it helps users accomplish their goals.
  </p>
  <p class="luis-paragraph-s meta">
    Available in Pro plan
  </p>
</div>