Table of contents card

<?php
/**
 * Title: Table of contents card
 * Slug: table-of-contents-card
 * Block types: core/post-content
 * Categories: featured
 */
?>
<!-- wp:group {"metadata":{"name":"Table of contents card"},"className":"table-of-contents-card","layout":{"type":"constrained"}} -->
<div class="wp-block-group table-of-contents-card"><!-- wp:group {"className":"content-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group content-wrapper"><!-- wp:group {"className":"top-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group top-wrapper"><!-- wp:heading -->
<h2 class="wp-block-heading">Table of contents</h2>
<!-- /wp:heading --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"blocks-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group blocks-wrapper"><!-- wp:group {"className":"block-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group block-wrapper"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Chapter 1: Introduction to Design Principles</h3>
<!-- /wp:heading -->

<!-- wp:preformatted -->
<pre class="wp-block-preformatted">This chapter provides an overview of the basic principles of design, such as balance, contrast, and hierarchy.It explains how these principles can be used to create visually pleasing and effective designs.</pre>
<!-- /wp:preformatted --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"block-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group block-wrapper"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Chapter 2: Designing for User Experience</h3>
<!-- /wp:heading -->

<!-- wp:preformatted -->
<pre class="wp-block-preformatted">This chapter explores the concept of user experience (UX) design and how it relates to the overall design process. It covers topics such as user research, usability testing, and user-centered design.</pre>
<!-- /wp:preformatted --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"block-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group block-wrapper"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Chapter 3: Typography in Design</h3>
<!-- /wp:heading -->

<!-- wp:preformatted -->
<pre class="wp-block-preformatted">This chapter delves into the art and technique of typography, including the history and evolution of type, the basics of typographic hierarchy, and the use of typography in digital design.</pre>
<!-- /wp:preformatted --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"block-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group block-wrapper"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Chapter 4: Color Theory and its Applications</h3>
<!-- /wp:heading -->

<!-- wp:preformatted -->
<pre class="wp-block-preformatted">This chapter covers the basics of color theory and its application in design. It includes information on color wheels, complementary colors, color schemes, and the psychological effects of color. It also covers color management and color spaces in digital design.</pre>
<!-- /wp:preformatted --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"block-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group block-wrapper"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Chapter 5: Design for the Web</h3>
<!-- /wp:heading -->

<!-- wp:preformatted -->
<pre class="wp-block-preformatted">This chapter will cover the basics of web design, including the principles of responsive design, website layout, and typography, as well as the use of HTML, CSS, and JavaScript.</pre>
<!-- /wp:preformatted --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"block-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group block-wrapper"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Chapter 6: Branding and Identity Design</h3>
<!-- /wp:heading -->

<!-- wp:preformatted -->
<pre class="wp-block-preformatted">This chapter will explore the process of creating and maintaining a brand, including the development of a brand strategy, the creation of a visual identity, and the use of design elements to communicate a brand's message.</pre>
<!-- /wp:preformatted --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"bottom-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group bottom-wrapper"><!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"className":"is-style-outline","icon":"arrow-right"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button">Get free sample chapters</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

.table-of-contents-card {
  @apply bg-white dark:bg-gray-900;

  .content-wrapper {
    @apply max-w-screen-xl px-4 py-8 mx-auto lg:px-6 sm:py-16 lg:py-24;
  
    .top-wrapper {
      @apply text-center;

      .wp-block-heading {
        @apply text-3xl font-extrabold leading-tight tracking-tight text-gray-900 sm:text-4xl dark:text-white;
      }
    }

    .blocks-wrapper {
      @apply max-w-3xl p-5 mx-auto mt-8 space-y-5 border border-gray-100 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700;
    
      .block-wrapper {
        &:not(:last-child) {
          @apply pb-5 border-b border-gray-200 dark:border-gray-700;
        }

        .wp-block-heading {
          @apply text-lg font-semibold text-gray-900 dark:text-white;
        }

        p {
          @apply mt-1 text-base font-normal text-gray-500 dark:text-gray-400;
        }
      }
    }

    .bottom-wrapper {
      @apply mt-8 text-center;

      .wp-block-buttons {
        @apply inline-flex items-center;
        a {
          @apply border-0 p-0;
          @apply inline-flex items-center font-medium text-primary-600 hover:text-primary-800 dark:text-primary-500 dark:hover:text-primary-700;
        }
      }
    }
  }
}