Here you will find how to use basic stuff from heartthrob, like typography, buttons and inputs.
You can use classes like .link
, .text-left
, .text-right
,
.text-center
,
.text-justify
,
.text-lowercase
,
.text-uppercase
,
.text-capitalize
to recreate those functions.
There is also a control for the weight of the font that you are using, with the claases
.text-light
,
.text-bold
,
.text-extra-bold
.
You can control the color by using .text-black
,
.text-mid-black
, .text-white
.
You can use the class .link
to create a pointer cursor in your element.
Use titles to help your users navige across you web portal. The tags .b
, .strong
will have the same style as the .h4
title.
<h1>This is a h1 title</h1>
<h2>This is a h2 title</h2>
<h3>This is a h3 title</h3>
<h4>This is a h4 title</h4>
<h5>This is a h5 title</h5>
<h6>This is a h6 title</h6>
The tag .small
will make your text looks a little bit small.
The paragraph will always be a more clear than the usual black. You can use the .hr
to create a line.
Note: Creating lines inside .card
will ignore card paddings to make a even beautiful page.
<hr />
For quoting blocks of content from another source within your document. If you use the footer
on your blockquote you will have personalized style with the text-aling to the right and a dash before it.
Here you can view a simple text.
<blockquote>
Here you can view a simple text.
<footer>
If you use <code>footer</code> inside the blockquote you have a nice text like this
</footer>
</blockquote>
Blockquote will vary when you use it inside a .card
, see the example below.
This is a card content.
Here you can view a simple text inside a blockquote inside a card.
<div class="card">
<h4>This is a card title</h4>
<hr />
<p>This is a card content.</p>
<blockquote>
Here you can view a simple text inside a blockquote inside a card.
</blockquote>
</div>
You can use invoke special border to your blockqoute, even inside .card
, by just using the class .border
and, a red version using .border .danger
.
This is a card content.
Here you can view a simple text inside a blockquote inside a card.
Here you can view a simple text inside a blockquote inside a card.
Here you can view a simple text inside a blockquote inside a card.
Here you can view a simple text inside a blockquote inside a card.
<div class="card">
<h4>This is a card title</h4>
<hr />
<p>This is a card content.</p>
<blockquote class="border">
Here you can view a simple text inside a blockquote inside a card.
</blockquote>
<blockquote class="success">
Here you can view a simple text inside a blockquote inside a card.
</blockquote>
<blockquote class="atention">
Here you can view a simple text inside a blockquote inside a card.
</blockquote>
<blockquote class="danger">
Here you can view a simple text inside a blockquote inside a card.
</blockquote>
</div>
[UPDATE 10/05/2019] After version 2.X you will not need the class .border
if you already added the .danger
, .success
or .atention
classes.
You can use classes in a div
like .space-long
, .space-medium
and .space-low
to add a white space with the height of 48px, 30px and 15px, respectively.
Bellow this line there is a .space-long
Bellow this line there is a .space-medium
Bellow this line there is a .space-low
End of the example.
<div class="card">
<p>Bellow this line there is a <code>.space-long</code></p>
<div class="space-long"></div>
<p>Bellow this line there is a <code>.space-medium</code></p>
<div class="space-medium"></div>
<p>Bellow this line there is a <code>.space-low</code></p>
<div class="space-low"></div>
<p>End of the example.</p>
</div>
You can as well use the class .tag
to create a more relevant content like this one.
Text with a inside a class .tag
.
<p>Text with a inside a <span class="tag">class .tag</span>.</p>
You can use the class .accent
to make your text with the same color as you accent color.
Text with with your accent color
<p>Text with <span class="accent">with your accent color</span></p>
In this framework, you can use the classes .left
, .right
, .center
to help you positionate you content, after using those, you will need to use the .clear
the clear both. You can use the .show
and the .hide
class to make your element visible or hidden.
Simple text boxes should be used for 1-line entries—if additional space is needed, use the rich text box. These fields may be used for password entry, see the example below. When the text box is inactive, the border is black at 20% opacity and the fill is white at 40% opacity. When active, the border is the accent/brand color at 100% opacity, and the fill is white at 100% opacity.
Labels may be placed either above or to the left side of the input field. When placed on the left side, ensure all the input fields line up along the left edge.
<div class="card">
<input type="text" placeholder="Simple text box">
<br />
<input type="text" disabled="" placeholder="Disabled text box">
</div>
Use an AutoSuggestBox to provide a list of suggestions for a user to select from as they type. You can use jQuery-ui Autocomplete to do so.
The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are tags for programming languages, give "ja" (for Java or JavaScript) a try.
<script>
$(function () {
var availableTags = ["ActionScript", "AppleScript", "Asp",
"BASIC", "C", "C++", "Clojure",
"COBOL", "ColdFusion", "Erlang",
"Fortran", "Groovy", "Haskell", "Java",
"JavaScript", "Lisp", "Perl", "PHP",
"Python", "Ruby", "Scala", "Scheme"];
$("#tags").autocomplete({
source: availableTags
});
});
</script>
<input id="tags" class="ui-autocomplete-input" autocomplete="off">
A checkbox is used to select or deselect action items. It can be used for a single item or for a list of multiple items that a user can choose from. The control has three selection states: unselected, selected and disabled.
<div class="card">
<input type="checkbox" id="1"><label for="1">Checkbox unselected</label><br>
<input type="checkbox" id="2" checked=""><label for="2">Checkbox selected</label><br>
<input type="checkbox" id="3" disabled=""><label for="3">Checkbox disabled</label><br>
</div>
A radio button is used for two or more mutually exclusive options.
<div class="card">
<input type="radio" id="10"><label for="10">Checkbox unselected</label><br>
<input type="radio" id="20" checked=""><label for="20">Checkbox selected</label><br>
</div>
Use primary buttons, set to either the user’s accent color or the app brand color, to indicate the default action when the user presses “Enter” when a dialog or window is open. Use secondary buttons for all other main actions. Use tertiary buttons for lesser actions.
Buttons may have 16x16 icons next to the text—remember that the group containing the icon and text should be centered.
You can use the class .btn
for button
or a
.
<div class="card">
<a class="btn btn-primary">Button text</a>
<a class="btn">Button text</a>
<a class="btn btn-lesser">Button text</a>
<a class="btn btn-danger">Button text</a>
</div>
<div class="card">
<a class="btn btn-primary"><i class="fa fa-phone"></i> Button text</a>
<a class="btn"><i class="fa fa-archive"></i> Button text</a>
<a class="btn btn-lesser"><i class="fa fa-file"></i> Button text</a>
<a class="btn btn-danger"><i class="fa fa-trash"></i> Button text</a>
</div>
<div class="btn-action">
<a class="btn"><i class="fa fa-phone"></i> Button text</a>
<a class="btn"><i class="fa fa-archive"></i> Button text</a>
<a class="btn btn-primary"><i class="fa fa-file"></i> Button text</a>
</div>
An action link may be used in place of a button where the action the user is performing takes place in another app or experience. Action links typically have a right pointing arrow on the left, followed by text—though that arrow icon may be replaced where appropriate. Action links are set to the user’s accent color or the app brand color.
<a href="#" class="btn btn-link">
<i class="fa fa-angle-right"></i> Link that continues in another app
</a>
Hyperlinks can be used in the traditional sense—i.e. to link to a web experience, or to link to another page in an app. Hyperlinks may or may not be underlined, but must always be set to the user’s accent color or the app brand color.
This is a hyperlink.
<a href="#">This is a hyperlink.</a>
heartthrob
heartthrob-vision
heartthrob-docs
buy me a beer
made by vítor norton | privacy policy