kinetic-2.0.x-dev/templates/layout/page--node--styleguide.html.twig

{% extends "@kinetic/templates/layout/page.html.twig" %}
{% block content %}
  <div class="bg-black">
    <div class="container py-6">
      <h1 class="h1 !text-white"> Kinetic Styleguide </h1>
      <p class="text-white"> Displays the base styles in the Kinetic theme. </p>
    </div>
  </div>
  <div class="container">
    <h2 class="h1 text-right">Headings</h2>
    <h1 class="h1"> Heading: h1 </h1>
    <h2 class="h2"> Heading: h2 </h2>
    <h3 class="h3"> Heading: h3 </h3>
    <h4 class="h4"> Heading: h4 </h4>
    <h5 class="h5"> Heading: h5 </h5>
    <hr class="my-6"/>
    <h2 class="h1 text-right">Formatted Text (WYSIWYG)</h2>
    <div class="text-formatted">
      <h2> Heading 2 </h2>
      <p>Lorem ipsum dolor sit amet, 
        <a href="#">consectetur adipiscing elit.</a>Proin maximus finibus justo at luctus. Vestibulum a leo vel justo semper faucibus. Praesent et posuere turpis, a malesuada est. Vestibulum aliquet suscipit libero, nec posuere nulla consequat non. Cras eu ultrices leo. Donec sollicitudin, sapien et malesuada rhoncus, purus diam consectetur nibh, sed tristique tellus metus quis mi. Donec sollicitudin, nisi nectristique consequat, diam lacus fermentum ante, nec dictum tellus est utquam. Aenean vitae mattis magna, id rutrum velit. Nunc non facilisis est,eu imperdiet mi. Nulla pharetra, leo et imperdiet sagittis, metus elit venenatis diam, ut ullamcorper diam justo ut eros.
      </p>
      <p>Lorem ipsum dolor sit amet, 
        <a href="#">consectetur adipiscing elit.</a>Proin maximus finibus justo at luctus. Vestibulum a leo vel justo semper faucibus. Praesent et posuere turpis, a malesuada est. Vestibulum aliquet suscipit libero, nec posuere nulla consequat non. Cras eu ultrices leo. Donec sollicitudin, sapien et malesuada rhoncus, purus diam consectetur nibh, sed tristique tellus metus quis mi. Donec sollicitudin, nisi nectristique consequat, diam lacus fermentum ante, nec dictum tellus est utquam. Aenean vitae mattis magna, id rutrum velit. Nunc non facilisis est,eu imperdiet mi. Nulla pharetra, leo et imperdiet sagittis, metus elit venenatis diam, ut ullamcorper diam justo ut eros.
      </p>
      <div>
        <img alt="Placeholder image" src="https://placehold.co/600x400">
        <p>Lorem ipsum dolor sit amet, 
          <a href="#">consectetur adipiscing elit.</a>Proin maximus finibus justo at luctus. Vestibulum a leo vel justo semper faucibus. Praesent et posuere turpis, a malesuada est. Vestibulum aliquet suscipit libero, nec posuere nulla consequat non. Cras eu ultrices leo. Donec sollicitudin, sapien et malesuada rhoncus, purus diam consectetur nibh, sed tristique tellus metus quis mi. Donec sollicitudin, nisi nectristique consequat, diam lacus fermentum ante, nec dictum tellus est utquam. Aenean vitae mattis magna, id rutrum velit. Nunc non facilisis est,eu imperdiet mi. Nulla pharetra, leo et imperdiet sagittis, metus elit venenatis diam, ut ullamcorper diam justo ut eros.
        </p>
        <h3> Block Quotes </h3>
        <blockquote>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin maximus finibus justo at luctus. Vestibulum a leo vel justo semper faucibus. Praesent et posuere turpis, a malesuada est.</p>
        </blockquote>
        <h3> Tables </h3>
        <table>
          <thead>
            <tr>
              <th>Company</th>
              <th>Contact</th>
              <th>Country</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Alfreds Futterkiste</td>
              <td>Maria Anders</td>
              <td>Germany</td>
            </tr>
            <tr>
              <td>Centro comercial Moctezuma</td>
              <td>Francisco Chang</td>
              <td>Mexico</td>
            </tr>
          </tbody>
        </table>
        <h3> Lists </h3>
        <ul>
          <li> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li>
          <li> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li>
          <li> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li>
          <ul>
            <li> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li>
            <li> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li>
          </ul>
        </ul>
        <ol>
          <li> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li>
          <li> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li>
          <li> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li>
          <ol>
            <li> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li>
            <li> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li>
          </ol>
        </ol>
      </div>
    </div>
    <hr class="my-6"/>
    <h2 class="h1 text-right">Colors</h2>
    <div class="flex">
      <div class="bg-purple w-[100px] h-[100px]"></div>
      <div class="bg-blue w-[100px] h-[100px]"></div>
      <div class="bg-pink w-[100px] h-[100px]"></div>
      <div class="bg-turquoise w-[100px] h-[100px]"></div>
      <div class="gradient-1 w-[100px] h-[100px]"></div>
      <div class="gradient-2 w-[100px] h-[100px]"></div>
      <div class="gradient-3 w-[100px] h-[100px]"></div>
    </div>
    <hr class="my-6"/>
    <h2 class="h1 text-right">Eyebrow</h2>
    <div>
      <p class="eyebrow"> Press Release </p>
    </div>
    <hr class="my-6"/>
    <h2 class="h1 text-right">Buttons</h2>
    <div class="bg-white p-8 flex gap-8 items-center">
      <a href="#" class="btn-primary"> Button Primary </a>
      <a href="#" class="btn-secondary"> Button Secondary </a>
      <a href="#" class="btn-tertiary"> Button Tertiary </a>
      <a href="#" class="btn-quaternary"> Button Quaternary </a>
    </div>
    <div class="bg-white p-8 flex gap-8 items-center">
      <a href="#" class="btn-primary disabled"> Button Primary </a>
      <a href="#" class="btn-secondary disabled"> Button Secondary </a>
      <a href="#" class="btn-tertiary disabled"> Button Tertiary </a>
      <a href="#" class="btn-quaternary disabled"> Button Quaternary </a>
    </div>
    <div class="bg-gray-950 p-8 flex gap-8 items-center">
      <a href="#" class="btn-primary"> Button Primary </a>
      <a href="#" class="btn-secondary"> Button Secondary </a>
      <a href="#" class="btn-tertiary"> Button Tertiary </a>
      <a href="#" class="btn-quaternary"> Button Quaternary </a>
    </div>
    <div class="bg-gray-950 p-8 flex gap-8 items-center">
      <a href="#" class="btn-primary disabled"> Button Primary </a>
      <a href="#" class="btn-secondary disabled"> Button Secondary </a>
      <a href="#" class="btn-tertiary disabled"> Button Tertiary </a>
      <a href="#" class="btn-quaternary disabled"> Button Quaternary </a>
    </div>
  </div>
  {{ page.content }}
{% endblock %}