Typography
prose
For example blog posts are wrapped in prose prose-xl font-normal
Example h1 text
Here is an opening paragraph - some default styling is applied.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
That's what she said... hmmm mmm.
An unorddered list
- Item one
- Item two
- Item three
A Second Heading
What shall we get at the shops?
<div class="prose font-normal">
<h1>Example h1 text</h1>
<p>Here is an opening paragraph - some default styling is applied. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum. </p>
<blockquote>That's what she said... hmmm mmm.</blockquote>
<p>An unorddered list</p>
<ul>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>
<h2>A Second Heading</h2>
<p>What shall we get at the shops?</p>
</div>
Here is text xl a long paragrph - its improtant to see if the default text size matches the default text line-height and some more text to check large blocks. And even more text can go here and even more here
<p class="text-sm">Here is text xl a long paragrph - its improtant to see if the default text size matches the default text line-height and some more text to check large blocks. And even more text can go here and even more here</p>
Here is text xl a long paragrph - its improtant to see if the default text size matches the default text line-height and some more text to check large blocks. And even more text can go here and even more here
<p class="text-md">Here is text xl a long paragrph - its improtant to see if the default text size matches the default text line-height and some more text to check large blocks. And even more text can go here and even more here</p>
Here is text xl a long paragrph - its improtant to see if the default text size matches the default text line-height and some more text to check large blocks. And even more text can go here and even more here
<p class="text-lg">Here is text xl a long paragrph - its improtant to see if the default text size matches the default text line-height and some more text to check large blocks. And even more text can go here and even more here</p>
Here is text xl a long paragrph - its improtant to see if the default text size matches the default text line-height and some more text to check large blocks. And even more text can go here and even more here
<p class="text-xl">Here is text xl a long paragrph - its improtant to see if the default text size matches the default text line-height and some more text to check large blocks. And even more text can go here and even more here</p>
Here is text xl a long paragrph - its improtant to see if the default text size matches the default text line-height and some more text to check large blocks. And even more text can go here and even more here
<p class="text-2xl">Here is text xl a long paragrph - its improtant to see if the default text size matches the default text line-height and some more text to check large blocks. And even more text can go here and even more here</p>
Here is text xl a long paragrph - its improtant to see if the default text size matches the default text line-height and some more text to check large blocks. And even more text can go here and even more here
<p class="text-3xl">Here is text xl a long paragrph - its improtant to see if the default text size matches the default text line-height and some more text to check large blocks. And even more text can go here and even more here</p>
Here is text xl a long paragrph - its improtant to see if the default text size matches the default text line-height and some more text to check large blocks. And even more text can go here and even more here
<p class="text-4xl">Here is text xl a long paragrph - its improtant to see if the default text size matches the default text line-height and some more text to check large blocks. And even more text can go here and even more here</p>
Here is text xl a long paragrph - its improtant to see if the default text size matches the default text line-height and some more text to check large blocks. And even more text can go here and even more here
<p class="text-5xl">Here is text xl a long paragrph - its improtant to see if the default text size matches the default text line-height and some more text to check large blocks. And even more text can go here and even more here</p>
Here is a big heading
<h2 class="text-6xl">Here is a big heading</h2>
Here is a big heading
<h2 class="text-7xl">Here is a big heading</h2>
Here is a big heading
<h2 class="text-8xl">Here is a big heading</h2>
Here is a big heading
<h2 class="text-9xl">Here is a big heading</h2>
Italic Callouts
<b class="ni-italic text-2xl">Hey, This is really nice to look at!</b>
<b class="ni-freehand text-2xl">Hey, This is really nice to look at!</b>
Buttons
<div class="mt-10 max-w-3xl mx-auto space-y-4 flex flex-col items-center justify-start sm:space-y-0 sm:flex-row sm:items-end sm:justify-around">
<button type="button" class="btn btn-primary btn-xs btn-fx-shadow">Button text</button>
<button type="button" class="btn btn-primary btn-sm btn-fx-shadow">Button text</button>
<button type="button" class="btn btn-primary btn-md btn-fx">Button text</button>
<button type="button" class="btn btn-primary btn-lg btn-fx">Button text</button>
<button type="button" class="btn btn-primary btn-xl btn-fx">Primary button</button>
</div>
Colors
LightGray
Gray
Blue
Purple
Pink
Red
Orange
Cards
simple cards
Turn your ideas into a reality
Rapid progress & visual results
A people-centric design process
Beautiful visual design
Feature cards - borderless
A borderless feature card expands to its container and has no default border - this can be determined by its parent template
Turn your ideas into a reality
Workshops
Rapid progress & visual results
Prototypes
A people-centric design process
User experience Design
Beautiful visual design
User Interface Design
Feature cards - borderless inside a container
Turn your ideas into a reality
Workshops
Rapid progress & visual results
Prototypes
A people-centric design process
User experience Design
Beautiful visual design
User Interface Design
Feature Skewed cards
Turn your ideas into a reality
Rapid progress & visual results
A people-centric design process
Beautiful visual design
Beautiful visual design
User Interface Design
We design user interfaces that are as intuitive as they are beautiful. And we think both are equally important. Ease-of-use is integral to a smooth user experience, while carefully-crafted aesthetics make your project stand-out from the crowd and stick in the mind.
Beautiful visual design
User Interface Design
We design user interfaces that are as intuitive as they are beautiful. And we think both are equally important. Ease-of-use is integral to a smooth user experience, while carefully-crafted aesthetics make your project stand-out from the crowd and stick in the mind.