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
1
to
10
of
34
results
Lexicon Two Column Form
<div class="p-8 rounded border border-gray-200">
<h1 class="font-medium text-3xl">Add User</h1>
<p class="text-gray-600 mt-6">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos dolorem vel cupiditate laudantium dicta.</p>
<form>
<div class="mt-8 grid lg:grid-cols-2 gap-4">
<div>
<label for="name" class="text-sm text-gray-700 block mb-1 font-medium">Name</label>
<input type="text" name="name" id="name" class="bg-gray-100 border border-gray-200 rounded py-1 px-3 block focus:ring-blue-500 focus:border-blue-500 text-gray-700 w-full" placeholder="Enter your name" />
</div>
<div>
<label for="email" class="text-sm text-gray-700 block mb-1 font-medium">Email Adress</label>
<input type="text" name="email" id="email" class="bg-gray-100 border border-gray-200 rounded py-1 px-3 block focus:ring-blue-500 focus:border-blue-500 text-gray-700 w-full" placeholder="yourmail@provider.com" />
</div>
<div>
<label for="job" class="text-sm text-gray-700 block mb-1 font-medium">Job title</label>
<input type="text" name="job" id="job" class="bg-gray-100 border border-gray-200 rounded py-1 px-3 block focus:ring-blue-500 focus:border-blue-500 text-gray-700 w-full" placeholder="(ex. developer)" />
</div>
<div>
<label for="brithday" class="text-sm text-gray-700 block mb-1 font-medium">Birthday</label>
<input type="text" name="brithday" id="brithday" class="bg-gray-100 border border-gray-200 rounded py-1 px-3 block focus:ring-blue-500 focus:border-blue-500 text-gray-700 w-full" placeholder="(01/01/1993)" />
</div>
</div>
<div class="space-x-4 mt-8">
<button type="submit" class="py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-600 active:bg-blue-700 disabled:opacity-50">Save</button>
<!-- Secondary -->
<button class="py-2 px-4 bg-white border border-gray-200 text-gray-600 rounded hover:bg-gray-100 active:bg-gray-200 disabled:opacity-50">Cancel</button>
</div>
</form>
</div>
Lexicon Single Column Form
<div class="p-8 rounded border border-gray-200">
<h1 class="font-medium text-3xl">Add User</h1>
<p class="text-gray-600 mt-6">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos dolorem vel cupiditate laudantium dicta.</p>
<form>
<div class="mt-8 space-y-6">
<div>
<label for="name" class="text-sm text-gray-700 block mb-1 font-medium">Name</label>
<input type="text" name="name" id="name" class="bg-gray-100 border border-gray-200 rounded py-1 px-3 block focus:ring-blue-500 focus:border-blue-500 text-gray-700 w-full" placeholder="Enter your name" />
</div>
<div>
<label for="email" class="text-sm text-gray-700 block mb-1 font-medium">Email Adress</label>
<input type="text" name="email" id="email" class="bg-gray-100 border border-gray-200 rounded py-1 px-3 block focus:ring-blue-500 focus:border-blue-500 text-gray-700 w-full" placeholder="yourmail@provider.com" />
</div>
<div>
<label for="job" class="text-sm text-gray-700 block mb-1 font-medium">Job title</label>
<input type="text" name="job" id="job" class="bg-gray-100 border border-gray-200 rounded py-1 px-3 block focus:ring-blue-500 focus:border-blue-500 text-gray-700 w-full" placeholder="(ex. developer)" />
</div>
</div>
<div class="space-x-4 mt-8">
<button type="submit" class="py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-600 active:bg-blue-700 disabled:opacity-50">Save</button>
<!-- Secondary -->
<button class="py-2 px-4 bg-white border border-gray-200 text-gray-600 rounded hover:bg-gray-100 active:bg-gray-200 disabled:opacity-50">Cancel</button>
</div>
</form>
</div>
Lexicon Pagination bar
<div class="flex flex-col lg:flex-row justify-between">
<div class="flex flex-col lg:flex-row items-center space-x-2 text-xs">
<button class="py-2 px-4 bg-white text-gray-600 font-medium rounded hover:bg-gray-100 active:bg-gray-200 disabled:opacity-50 inline-flex items-center">
10 items
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
<p class="text-gray-500 mt-4 lg:mt-0">Showing 11 to 20 of 95 entires</p>
</div>
<nav aria-label="Pagination" class="flex justify-center items-center text-gray-600 mt-8 lg:mt-0">
<a href="#" class="p-2 mr-4 rounded hover:bg-gray-100">
<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="M15 19l-7-7 7-7" />
</svg>
</a>
<a href="#" class="px-4 py-2 rounded hover:bg-gray-100"> 1 </a>
<a href="#" class="px-4 py-2 rounded bg-gray-200 text-gray-900 font-medium hover:bg-gray-100"> 2 </a>
<a href="#" class="px-4 py-2 rounded hover:bg-gray-100"> 3 </a>
<a href="#" class="px-4 py-2 rounded hover:bg-gray-100"> ... </a>
<a href="#" class="px-4 py-2 rounded hover:bg-gray-100"> 9 </a>
<a href="#" class="p-2 ml-4 rounded hover:bg-gray-100">
<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="M9 5l7 7-7 7" />
</svg>
</a>
</nav>
</div>
Lexicon Simple Pagination
<nav aria-label="Pagination" class="flex items-center text-gray-600">
<a href="#" class="p-2 mr-4 rounded hover:bg-gray-100">
<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="M15 19l-7-7 7-7" />
</svg>
</a>
<a href="#" class="px-4 py-2 rounded hover:bg-gray-100"> 1 </a>
<a href="#" class="px-4 py-2 rounded bg-gray-200 text-gray-900 font-medium hover:bg-gray-100"> 2 </a>
<a href="#" class="px-4 py-2 rounded hover:bg-gray-100"> 3 </a>
<a href="#" class="px-4 py-2 rounded hover:bg-gray-100"> ... </a>
<a href="#" class="px-4 py-2 rounded hover:bg-gray-100"> 9 </a>
<a href="#" class="p-2 ml-4 rounded hover:bg-gray-100">
<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="M9 5l7 7-7 7" />
</svg>
</a>
</nav>
Lexicon Input groups with units
<div class="inline-flex bg-gray-100 rounded border border-gray-200">
<div class="inline bg-gray-200 py-2 px-4 text-gray-600 select-none">@</div>
<input type="text" placeholder="(ex. Ash, Cooper, Viper)" value="" class="bg-transparent border-transparent w-full py-1 text-gray-600 px-4 focus:outline-none" />
</div>
<div class="inline-flex justify-between bg-gray-100 rounded border border-gray-200">
<input type="text" placeholder="(ex. mike)" value="" class="bg-transparent py-1 text-gray-600 px-4 focus:outline-none" />
<div class="inline bg-gray-200 py-2 px-4 text-gray-600 select-none">@gmail.com</div>
</div>
<div class="inline-flex justify-between bg-gray-100 rounded border border-gray-200">
<div class="inline bg-gray-200 py-2 px-4 text-gray-600 select-none">$</div>
<input type="text" placeholder="10,000" value="" class="bg-transparent py-1 text-gray-600 px-4 focus:outline-none" />
<div class="inline bg-gray-200 py-2 px-4 text-gray-600 select-none">.00</div>
</div>
<div class="inline-flex justify-between bg-gray-100 rounded border border-gray-200">
<input type="text" placeholder="your name" value="" class="bg-transparent py-1 text-gray-600 px-4 focus:outline-none" />
<div class="inline bg-gray-200 py-2 px-4 text-gray-600 select-none">@</div>
<input type="text" placeholder="provider" value="" class="bg-transparent py-1 text-gray-600 px-4 focus:outline-none" />
<div class="inline bg-gray-200 py-2 px-4 text-gray-600 select-none">.com</div>
</div>
Lexicon URL input group
<div class="inline-flex bg-gray-100 rounded border border-gray-200">
<div class="inline bg-gray-200 py-2 px-4 text-gray-600">/</div>
<input
type="text"
placeholder="(ex. https://goolge.com)"
value="tailwindtemplates.io"
class="bg-transparent border-transparent py-1 text-gray-600 px-4 focus:outline-none"
/>
</div>
Lexicon Input group with button
<!-- Left -->
<div class="bg-gray-100 rounded border border-gray-200 flex items-center"><button class="py-2 px-4 bg-white text-gray-600 rounded-l border-r border-gray-200 hover:bg-gray-50 active:bg-gray-200 disabled:opacity-50 inline-flex items-center focus:outline-none">Search</button> <input type="text" placeholder="Your term..." class="bg-transparent py-1 text-gray-600 px-4 focus:outline-none w-full" /></div>
<!-- Right -->
<div class="bg-gray-100 rounded border border-gray-200 flex items-center justify-between"><input type="text" placeholder="Email" value="jack@frontier.com" class="bg-transparent py-1 text-gray-600 px-4 focus:outline-none w-full" /> <button class="py-2 px-4 bg-white text-gray-600 rounded-r border-l border-gray-200 hover:bg-gray-50 active:bg-gray-200 disabled:opacity-50 inline-flex items-center focus:outline-none">Submit</button></div>
Lexicon Text Area With message
<div>
<label for="input1" class="text-sm text-gray-800 block mb-1 font-medium">
Comments
</label>
<textarea
rows="4"
cols="50"
name="input1"
id="input1"
value="testing"
class="bg-gray-100 rounded border border-gray-200 py-1 px-3 block focus:ring-blue-500 focus:border-blue-500 text-gray-700"
placeholder="Enter your comment"
></textarea>
<div class="flex items-center mt-1">
<p class="text-xs text-gray-500">Help Message</p>
</div>
</div>
Lexicon Text area input
<div>
<label for="input1" class="text-sm text-gray-800 block mb-1 font-medium">
Comments
</label>
<textarea
rows="4"
cols="50"
name="input1"
id="input1"
value="testing"
class="bg-gray-100 rounded border border-gray-200 py-1 px-3 block focus:ring-blue-500 focus:border-blue-500 text-gray-700"
placeholder="Enter your comment"
></textarea>
</div>
Lexicon Error Input With Label
<div>
<label for="input1" class="text-sm text-gray-700 block mb-1 font-medium">
Password
</label>
<input
type="password"
name="input1"
id="input1"
value="testing"
class="bg-red-50 border border-red-400 rounded py-1 px-3 block focus:ring-red-500 focus:border-red-500 text-gray-700"
placeholder="Enter your password"
/>
<div class="flex items-center mt-1 text-red-700">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M10 1.944A11.954 11.954 0 012.166 5C2.056 5.649 2 6.319 2 7c0 5.225 3.34 9.67 8 11.317C14.66 16.67 18 12.225 18 7c0-.682-.057-1.35-.166-2.001A11.954 11.954 0 0110 1.944zM11 14a1 1 0 11-2 0 1 1 0 012 0zm0-7a1 1 0 10-2 0v3a1 1 0 102 0V7z"
clip-rule="evenodd"
/>
</svg>
<p class="ml-1 text-xs">Use atleast 1 number</p>
</div>
<p class="text-xs text-gray-500 mt-1">Use an uppercase letter and a number</p>
</div>
Showing
1
to
10
of
34
results