No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

The component failed to render properly, likely due to a configuration issue in Storybook. Here are some common causes and how you can address them:

  1. Missing Context/Providers: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the Decorators documentation.
  2. Misconfigured Webpack or Vite: Verify that Storybook picks up all necessary settings for loaders, plugins, and other relevant parameters. You can find step-by-step guides for configuring Webpack or Vite with Storybook.
  3. Missing Environment Variables: Your Storybook may require specific environment variables to function as intended. You can set up custom environment variables as outlined in the Environment Variables documentation.

This is a pre-release version and is not production ready. For new and ongoing projects, please refer to the latest Design System version.

Card Teaser

Figma Design

A teaser card is a clickable preview that leads to detailed content, providing a convenient entry point for users to access more information. It contains maximum one interactive element (button) which links to the same location as the card.

My placeholder image

Title

This is a sample description for the teaser card component.

Button label 
<post-linkarea>
  <div class="card teaser-card">
    <img src="https://picsum.photos/id/38/500/400" alt="My placeholder image" />
    <div>
      <div>
        <h3>Title</h3>
        <p>This is a sample description for the teaser card component.</p>
      </div>
      <a href="#" class="btn btn-tertiary px-0"
        >Button label <post-icon name="arrowright"></post-icon
      ></a>
    </div>
  </div>
</post-linkarea>
NameDescriptionDefaultControl
General
Size
Size of the teaser card
string
-
Content
Title
Title of the teaser card
string
-
Button label
Button label of the teaser card
string
-
Content
Content of the teaser card
string
-

The teaser card component will take the full width of its container and should be implemented within a grid system. Here is an example of what a teaser section would look like.

Teaser section

This is a sample description for the teaser section component.

Let's go
My placeholder image

Title

This is a sample description for the teaser card component.

Button label
My placeholder image

Title

This is a sample description for the teaser card component.

Button label
My placeholder image

Title

This is a sample description for the teaser card component.

Button label
My placeholder image

Title

This is a sample description for the teaser card component.

Button label 
<div class="container py-56 d-flex flex-column gap-32">
  <div class="d-flex align-items-end justify-content-between gap-24">
    <div class="d-flex flex-column gap-8">
      <h2 class="m-0">Teaser section</h2>
      <p class="m-0">This is a sample description for the teaser section component.</p>
    </div>
    <a href="#" class="flex-shrink-0 btn btn-primary"
      >Let's go <post-icon name="arrowright"></post-icon
    ></a>
  </div>
  <div class="row gy-16 gy-lg-24">
    <div class="col-md-6 col-lg-3">
      <post-linkarea>
        <div class="card teaser-card">
          <img src="https://picsum.photos/id/38/500/400" alt="My placeholder image" />
          <div>
            <div>
              <h3>Title</h3>
              <p>This is a sample description for the teaser card component.</p>
            </div>
            <a href="#" class="btn btn-tertiary px-0"
              >Button label <post-icon name="arrowright"></post-icon
            ></a>
          </div>
        </div>
      </post-linkarea>
    </div>
    <div class="col-md-6 col-lg-3">
      <post-linkarea>
        <div class="card teaser-card">
          <img src="https://picsum.photos/id/38/500/400" alt="My placeholder image" />
          <div>
            <div>
              <h3>Title</h3>
              <p>This is a sample description for the teaser card component.</p>
            </div>
            <a href="#" class="btn btn-tertiary px-0"
              >Button label <post-icon name="arrowright"></post-icon
            ></a>
          </div>
        </div>
      </post-linkarea>
    </div>
    <div class="col-md-6 col-lg-3">
      <post-linkarea>
        <div class="card teaser-card">
          <img src="https://picsum.photos/id/38/500/400" alt="My placeholder image" />
          <div>
            <div>
              <h3>Title</h3>
              <p>This is a sample description for the teaser card component.</p>
            </div>
            <a href="#" class="btn btn-tertiary px-0"
              >Button label <post-icon name="arrowright"></post-icon
            ></a>
          </div>
        </div>
      </post-linkarea>
    </div>
    <div class="col-md-6 col-lg-3">
      <post-linkarea>
        <div class="card teaser-card">
          <img src="https://picsum.photos/id/38/500/400" alt="My placeholder image" />
          <div>
            <div>
              <h3>Title</h3>
              <p>This is a sample description for the teaser card component.</p>
            </div>
            <a href="#" class="btn btn-tertiary px-0"
              >Button label <post-icon name="arrowright"></post-icon
            ></a>
          </div>
        </div>
      </post-linkarea>
    </div>
  </div>
</div>