@dpa-id-components/ui-info-content

UiInfoContent Vue 2.x layout component based on the dpa Design Kit for displaying information content

Installation

yarn add @dpa-id-components/ui-info-content

Usage

<!-- SomeComponent.vue using UiInfoContent -->
<template>
    <div class="h-screen w-100">
    <ui-info-content class="mx-auto" style="max-width: 567px">
      <ui-icon name="search" size="xl" slot="icon" />
      <span slot="title">Keine Ergebnisse</span>
      <span>Leider konnten wir keine Ergebnisse finden. Bitte passen Sie Ihre Suchanfrage an oder speichern die Suche trotzdem, um über Treffer informiert zu werden, sobald es lorum ipsum welche gibt.</span>
      <template slot="actions">
        <ui-button style="background-color: transparent" rounded text-classes="text-gray-800 border-gray-800" color="grey" class="mr-6"><span class="px-1">Suche trotzdem speichern</span></ui-button>
        <ui-button rounded><span class="px-1">Suche löschen</span></ui-button>
      </template>
      </ui-info-content>
  </div>
</template>

<script>
    import UiInfoContent from "@dpa-id-components/ui-info-content";

    export default {
        components: {
            UiInfoContent,
        },
    };
</script>

Demo

View a demo of <ui-info-content> on Storybook

API

Slots

Name	Description
icon	Optional slot for an icon
title	Optional slot for a title
default	The default slot used for text content
actions	Optional slot for action related elements