Skip to content

Commit

Permalink
refactor: Update banner examples with new design and fix linting issues
Browse files Browse the repository at this point in the history
  • Loading branch information
@ogzcode
ogzcode committed Aug 20, 2024
1 parent 4ceb769 commit 7330c52
Showing 1 changed file with 38 additions and 45 deletions.
83 changes: 38 additions & 45 deletions docs/components/banner.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,32 +24,28 @@ Use this free example to show a text message for an announcement with a CTA link

```vue
<template>
<fwb-banner>
<div class="flex w-full justify-between bg-gray-50 p-4 dark:bg-gray-700">
<div class="mx-auto flex items-center">
<p class="flex items-center gap-2 text-sm font-normal text-gray-500 dark:text-gray-400">
<svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"
viewBox="0 0 24 24">
<path fill-rule="evenodd"
d="M3.559 4.544c.355-.35.834-.544 1.33-.544H19.11c.496 0 .975.194 1.33.544.356.35.559.829.559 1.331v9.25c0 .502-.203.981-.559 1.331-.355.35-.834.544-1.33.544H15.5l-2.7 3.6a1 1 0 0 1-1.6 0L8.5 17H4.889c-.496 0-.975-.194-1.33-.544A1.868 1.868 0 0 1 3 15.125v-9.25c0-.502.203-.981.559-1.331ZM7.556 7.5a1 1 0 1 0 0 2h8a1 1 0 0 0 0-2h-8Zm0 3.5a1 1 0 1 0 0 2H12a1 1 0 1 0 0-2H7.556Z" clip-rule="evenodd"
/>
</svg>
<span class="[&_p]:inline">
New brand identity has been launched for the&nbsp;
<a href="https://flowbite.com"
class="inline font-medium text-cyan-600 underline decoration-solid underline-offset-2 hover:no-underline dark:text-cyan-500">
Flowbite Library
</a>
</span>
</p>
</div>
<fwb-banner-collapse-button />
</div>
</fwb-banner>
<fwb-banner closable>
<div class="bg-gray-50 p-4 dark:bg-gray-700">
<p class="flex items-center gap-2 text-sm font-normal text-gray-500 dark:text-gray-400">
<svg class="w-6 h-6 text-gray-800 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
<path fill-rule="evenodd"
d="M3.559 4.544c.355-.35.834-.544 1.33-.544H19.11c.496 0 .975.194 1.33.544.356.35.559.829.559 1.331v9.25c0 .502-.203.981-.559 1.331-.355.35-.834.544-1.33.544H15.5l-2.7 3.6a1 1 0 0 1-1.6 0L8.5 17H4.889c-.496 0-.975-.194-1.33-.544A1.868 1.868 0 0 1 3 15.125v-9.25c0-.502.203-.981.559-1.331ZM7.556 7.5a1 1 0 1 0 0 2h8a1 1 0 0 0 0-2h-8Zm0 3.5a1 1 0 1 0 0 2H12a1 1 0 1 0 0-2H7.556Z"
clip-rule="evenodd" />
</svg>
<span class="[&_p]:inline">
New brand identity has been launched for the&nbsp;
<a href="https://flowbite.com"
class="inline font-medium text-cyan-600 underline decoration-solid underline-offset-2 hover:no-underline dark:text-cyan-500">
Flowbite Library
</a>
</span>
</p>
</div>
</fwb-banner>
</template>
```


## Bottom banner position

This example can be used to position the sticky banner on the bottom side of the page instead of the top side.
Expand All @@ -58,28 +54,25 @@ This example can be used to position the sticky banner on the bottom side of the

```vue
<template>
<fwb-banner position="bottom">
<div class="flex w-full justify-between bg-gray-50 p-4 dark:bg-gray-700">
<div class="mx-auto flex items-center">
<p class="flex items-center gap-2 text-sm font-normal text-gray-500 dark:text-gray-400">
<svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"
viewBox="0 0 24 24">
<path fill-rule="evenodd"
d="M3.559 4.544c.355-.35.834-.544 1.33-.544H19.11c.496 0 .975.194 1.33.544.356.35.559.829.559 1.331v9.25c0 .502-.203.981-.559 1.331-.355.35-.834.544-1.33.544H15.5l-2.7 3.6a1 1 0 0 1-1.6 0L8.5 17H4.889c-.496 0-.975-.194-1.33-.544A1.868 1.868 0 0 1 3 15.125v-9.25c0-.502.203-.981.559-1.331ZM7.556 7.5a1 1 0 1 0 0 2h8a1 1 0 0 0 0-2h-8Zm0 3.5a1 1 0 1 0 0 2H12a1 1 0 1 0 0-2H7.556Z" clip-rule="evenodd"
/>
</svg>
<span class="[&_p]:inline">
New brand identity has been launched for the&nbsp;
<a href="https://flowbite.com"
class="inline font-medium text-cyan-600 underline decoration-solid underline-offset-2 hover:no-underline dark:text-cyan-500">
Flowbite Library
</a>
</span>
</p>
</div>
<fwb-banner-collapse-button />
</div>
</fwb-banner>
<fwb-banner position="bottom" closable>
<div class="bg-gray-50 p-4 dark:bg-gray-700">
<p class="flex items-center gap-2 text-sm font-normal text-gray-500 dark:text-gray-400">
<svg class="w-6 h-6 text-gray-800 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
<path fill-rule="evenodd"
d="M3.559 4.544c.355-.35.834-.544 1.33-.544H19.11c.496 0 .975.194 1.33.544.356.35.559.829.559 1.331v9.25c0 .502-.203.981-.559 1.331-.355.35-.834.544-1.33.544H15.5l-2.7 3.6a1 1 0 0 1-1.6 0L8.5 17H4.889c-.496 0-.975-.194-1.33-.544A1.868 1.868 0 0 1 3 15.125v-9.25c0-.502.203-.981.559-1.331ZM7.556 7.5a1 1 0 1 0 0 2h8a1 1 0 0 0 0-2h-8Zm0 3.5a1 1 0 1 0 0 2H12a1 1 0 1 0 0-2H7.556Z"
clip-rule="evenodd" />
</svg>
<span class="[&_p]:inline">
New brand identity has been launched for the&nbsp;
<a href="https://flowbite.com"
class="inline font-medium text-cyan-600 underline decoration-solid underline-offset-2 hover:no-underline dark:text-cyan-500">
Flowbite Library
</a>
</span>
</p>
</div>
</fwb-banner>
</template>
```

Expand Down

0 comments on commit 7330c52

Please sign in to comment.