Theme
Lexicon
Lexicon is a design language that provides a common framework for building interfaces within the Liferay product ecosystem. It is a guide to foundations, components, patterns, and use cases that provide consistency and coherence to these products, and, ultimately, provides a satisfactory and unified experience to its users.
Showing
31
to
34
of
34
results
Lexicon Badges
<!-- Primary -->
<span class="bg-blue-500 text-white rounded-full px-2 text-sm">12</span>
<!-- Secondary -->
<span class="bg-gray-200 text-gray-500 rounded-full px-2 text-sm">83</span>
<!-- Info -->
<span class="bg-blue-600 text-white rounded-full px-2 text-sm">91</span>
<!-- Error -->
<span class="bg-red-600 text-white rounded-full px-2 text-sm">77</span>
<!-- Success -->
<span class="bg-green-600 text-white rounded-full px-2 text-sm">4k</span>
<!-- Warning -->
<span class="bg-yellow-600 text-white rounded-full px-2 text-sm">42</span>
Lexicon Alert with button
<!-- Info -->
<div
class="bg-blue-50 border border-blue-400 rounded text-blue-800 text-sm p-4 flex items-start"
>
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4 mr-2"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
clip-rule="evenodd"
/>
</svg>
</div>
<div class="w-full">
<p>
<span class="font-bold">Info:</span>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto quos
exercitationem, voluptate eos reprehenderit fugit assumenda illo error
facere consequuntur perferendis asperiores dolor et itaque.
</p>
<button
class="border-blue-400 bg-white hover:bg-gray-50 px-4 py-2 mt-4 border rounded font-bold"
>
Understood
</button>
</div>
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</div>
</div>
<!-- Error -->
<div
class="bg-red-50 border border-red-400 rounded text-red-800 text-sm p-4 flex items-start"
>
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4 mr-2"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
clip-rule="evenodd"
/>
</svg>
</div>
<div class="w-full">
<p>
<span class="font-bold">Error:</span>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto quos
exercitationem, voluptate eos reprehenderit fugit assumenda illo error
facere consequuntur perferendis asperiores dolor et itaque.
</p>
<button
class="border-red-400 bg-white hover:bg-gray-50 px-4 py-2 mt-4 border rounded font-bold"
>
Understood
</button>
</div>
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</div>
</div>
<!-- Success -->
<div
class="bg-green-50 border border-green-400 rounded text-green-800 text-sm p-4 flex items-start"
>
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4 mr-2"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
clip-rule="evenodd"
/>
</svg>
</div>
<div class="w-full">
<p>
<span class="font-bold">Error:</span>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto quos
exercitationem, voluptate eos reprehenderit fugit assumenda illo error
facere consequuntur perferendis asperiores dolor et itaque.
</p>
<button
class="border-green-400 bg-white hover:bg-gray-50 px-4 py-2 mt-4 border rounded font-bold"
>
Understood
</button>
</div>
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</div>
</div>
<!-- Warning -->
<div
class="bg-yellow-50 border border-yellow-400 rounded text-yellow-800 text-sm p-4 flex items-start"
>
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4 mr-2"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
clip-rule="evenodd"
/>
</svg>
</div>
<div class="w-full">
<p>
<span class="font-bold">Error:</span>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto quos
exercitationem, voluptate eos reprehenderit fugit assumenda illo error
facere consequuntur perferendis asperiores dolor et itaque.
</p>
<button
class="border-yellow-400 bg-white hover:bg-gray-50 px-4 py-2 mt-4 border rounded font-bold"
>
Understood
</button>
</div>
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</div>
</div>
Lexicon Alert Stripe
<!-- Info -->
<div
class="bg-blue-50 border-b border-blue-400 text-blue-800 text-sm p-4 flex justify-between"
>
<div>
<div class="flex items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4 mr-2"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
clip-rule="evenodd"
/>
</svg>
<p>
<span class="font-bold">Info:</span>
This is an info alert
</p>
</div>
</div>
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</div>
</div>
<!-- Error -->
<div
class="bg-red-50 border-b border-red-400 text-red-800 text-sm p-4 flex justify-between"
>
<div>
<div class="flex items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4 mr-2"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
clip-rule="evenodd"
/>
</svg>
<p>
<span class="font-bold">Info:</span>
This is an Error alert
</p>
</div>
</div>
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</div>
</div>
<!-- Success -->
<div
class="bg-green-50 border-b border-green-400 text-green-800 text-sm p-4 flex justify-between"
>
<div>
<div class="flex items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4 mr-2"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
clip-rule="evenodd"
/>
</svg>
<p>
<span class="font-bold">Info:</span>
This is an Success alert
</p>
</div>
</div>
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</div>
</div>
<!-- Warning -->
<div
class="bg-yellow-50 border-b border-yellow-400 text-yellow-800 text-sm p-4 flex justify-between"
>
<div>
<div class="flex items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4 mr-2"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
clip-rule="evenodd"
/>
</svg>
<p>
<span class="font-bold">Info:</span>
This is an Warning alert
</p>
</div>
</div>
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</div>
</div>
Lexicon Alert
<!-- Info -->
<div
class="bg-blue-50 border border-blue-400 rounded text-blue-800 text-sm p-4 flex justify-between"
>
<div>
<div class="flex items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4 mr-2"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
clip-rule="evenodd"
/>
</svg>
<p>
<span class="font-bold">Info:</span>
This is an info alert
</p>
</div>
</div>
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</div>
</div>
<!-- Error -->
<div
class="bg-red-50 border border-red-400 rounded text-red-800 text-sm p-4 flex justify-between"
>
<div>
<div class="flex items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4 mr-2"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
clip-rule="evenodd"
/>
</svg>
<p>
<span class="font-bold">Info:</span>
This is an Error alert
</p>
</div>
</div>
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</div>
</div>
<!-- Success -->
<div
class="bg-green-50 border border-green-400 rounded text-green-800 text-sm p-4 flex justify-between"
>
<div>
<div class="flex items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4 mr-2"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
clip-rule="evenodd"
/>
</svg>
<p>
<span class="font-bold">Info:</span>
This is an Success alert
</p>
</div>
</div>
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</div>
</div>
<!-- Warning -->
<div
class="bg-yellow-50 border border-yellow-400 rounded text-yellow-800 text-sm p-4 flex justify-between"
>
<div>
<div class="flex items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4 mr-2"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
clip-rule="evenodd"
/>
</svg>
<p>
<span class="font-bold">Info:</span>
This is an Warning alert
</p>
</div>
</div>
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</div>
</div>
Showing
31
to
34
of
34
results