The component demo
Writing GUIDE
Tips: First write your post with compose mode. If you have finished writing, to make the post look clean and neat like this demo, please switch to html mode and include p
tag for paragraph and <br />
tag for line break on each line of text that you include.
Note: Don't forget to set Page settings > Options like the image below.
Paragraphs
Below is example paragraph with p
tag.
Lorem ipsum dolor sit amet consectetur adipiscing elit donec faucibus, scelerisque vivamus nisl ac velit nostra nibh primis class, ligula phasellus id diam volutpat non etiam dapibus.
Lorem ipsum dolor sit amet consectetur adipiscing elit donec faucibus, scelerisque vivamus nisl ac velit nostra nibh primis class, ligula phasellus id diam volutpat non etiam dapibus.
Headings
Below is an example of the headings h1
to h6
tags. You need to know, for h1
has been used, and below just example! So h1
can only be used on one page. Don't add more h1
tag!
Heading h1
Heading h2
Heading h3
Heading h4
Heading h5
Heading h6
Link headings
The link headings just work like below:
<h2><a href="#" title="Link heading h2">Link heading h2</a></h2>
Link heading h1
Link heading h2
Link heading h3
Link heading h4
Link heading h5
Link heading h6
Anchor headings
With JavaScript the headings automatically add anchor links if the heading has an id attribute. The link button will appear if you position the cursor between headings.
Note: Anchor headings only apply to h2
, h3
, and h4
.
<h2 id="heading-2">Heading h2</h2> <h3 id="heading-3">Heading h3</h3> <h4 id="heading-4">Heading h4</h4>
Styling Text
Default html element to styling text in your posts.
a
abbr
cite
b
i
strong
em
small
u
del
ins
s
sub
sup
mark
var
time
ruby
Text Formatting
Below is example of formating the text like blockquote
, pre
, code
, etc. The pre
, code
, kbd
, and samp
tags has includes double click events to select all text.
Blockquote
Use blockquote
with small
, span
or footer
.
Lorem ipsum dolor sit amet consectetur adipiscing elit, urna etiam lacus. Era Material
<blockquote> Lorem ipsum dolor sit amet consectetur adipiscing elit, urna etiam lacus. <span>Era Material</span> </blockquote>
Pre
Thepre
tags has includes with copy to clipboard event with clipboardjs plugin. If the text is HTML don't forget to encode the text using the HTML Parse tool.
This is default pre tag
Code
You see a code
tag.
Kbd
You see a kbd tag and kbd with code
Samp
This is a samp
tag.
Dropcap
Below is class="dropcap"
.
Eorem ipsum dolor sit amet consectetur adipiscing, elit sodales facilisi laoreet risus cubilia tincidunt, massa nam urna pretium neque. Orci tempus urna ligula quisque odio est gravida malesuada erat, a hac litora accumsan nec inceptos mattis praesent, aliquam condimentum nibh vestibulum vehicula morbi nunc libero. Integer feugiat semper himenaeos lobortis maecenas ridiculus leo diam dictum fames, est sociosqu donec etiam odio venenatis volutpat quis ut.
<p class="dropcap"> Eorem ipsum dolor... </p>
or
<div class="dropcap"> <p> Eorem ipsum dolor... </p> </div>
Fake link
Use class="link"
to avoid external link.
Lead
Make a paragraph stand out by adding class="lead"
.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
List items
Below is unordered list items, marked with bullets. A list starts with the ul
tag. Each list item starts with the li
tag.
- One
- Two
- Three
- Four
- Five
- Six
Below is ordered list items, marked with numbers. A list starts with the ol
tag. Each list item starts with the li
tag.
- One
- Two
- Three
- Four
- Five
- Six
Below is custom list style with class="list"
. This is work with ul
or ol
tag.
- One
- Two
- Three
- Four
- Five
- Six
<ul class="list"> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> <li>Six</li> </ul>
Below is unstyled list item with class="list-unstyled"
. This is work with ul
or ol
tag.
- One
- Two
- Three
- Four
- Five
- Six
<ul class="list-unstyled"> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> <li>Six</li> </ul>
Media
Use class="media"
to make responsive embed
, iframe
, and object
.
<div class="media"> <iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" src="https://www.youtube.com/embed/0FN8iKGQLwA"></iframe> </div>
Utility classes
A collection of useful utility classes to style your content or use to adjust the design of this template.
Color schemes
Color scheme is primary and secondary color generate by Blogger Theme Designer.
class="background-primary"
primary background color with text color like this.
class="background-secondary"
secondary background color with text color like this.
class="text-primary"
primary text color like this.
class="text-secondary"
secondary text color like this.
Divider
class="divider"
same as hr
tag.
No select
class="no-select"
is CSS user-select: none
, be used to make the text unselectable.
Yes select
class="yes-select"
is CSS user-select: text
, to make the text selectable, when current CSS value user-select: none
.
Text alignment
class="text-left"
is CSS text-align: left
, to make the text alignment in left.
class="text-right"
is CSS text-align: right
, to make the text alignment in right.
class="text-center"
is CSS text-align: center
, to make the text alignment in center.
class="text-justify"
is CSS text-align: justify
, to stretch lines in text, so that each line has the same width (like in newspapers and magazines).
Elements float
class="left"
is CSS float: left
, to make an elements float to left.
class="right"
is CSS float: right
, to make an elements float to right.
class="clearfix"
to make perfect an element when element is floated. Example like below:
<div class="clearfix"> <button class="btn btn-raised btn-secondary left"> Floated Left </button> <button class="btn btn-raised btn-secondary right"> Floated Right </button> </div>
Show Hide
class="hidden"
to force hide an content.
class="show"
to force show an content.
class="invisible"
make an content invisible.
class="visible"
make an content visible.
class="no-print"
hide any content on print mode.
class="hide-mobile"
hide any content only on mobile.
class="hide-tablet"
hide any content only on tablet.
class="hide-desktop"
hide any content only on desktop.
Extended pre tags
Custom styling topre
tags.
Pre colors
pre primary color
pre secondary color
<pre class="primary">pre <span class="text-primary">primary</span> color</pre> <pre class="secondary">pre <span class="text-secondary">secondary</span> color</pre>
Pre code
Below is pre
tags combination with code
tags and adding heading title to pre
tags like below:
<pre data-lang="your-title-here"> <code>Your text here</code> </pre>
HTML code here...
CSS code here...
JavaScript code here...
Below like a angular.io docs.
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'My First Angular App!';
}
Material Design template for Blogger
Without data-lang
.
pre code without data-lang
Pre code colors
Pre code colors is primary and secondary.
pre code primary...
pre code secondary...
<pre class="primary" data-lang="html"> <code>HTML code here...</code> </pre> <pre class="secondary" data-lang="css"> <code>CSS code here...</code> </pre>
System
Specially system information like user and root.
user
cd /etc/ && ls -a
root
sudo apt-get update && sudo apt-get upgrade
<pre class="user">cd /etc/ && ls -a</pre> <pre class="root">sudo apt-get update && sudo apt-get upgrade</pre>
Table
Below is example default table without class.
Code name | Version | API level |
---|---|---|
Pie | 9 | API level 28 |
Oreo | 8.1.0 | API level 27 |
Nougat | 7.1 | API level 25 |
Marshmallow | 6.0 | API level 23 |
Lollipop | 5.1 | API level 22 |
<table> <thead> <tr> <th>Code name</th> <th>Version</th> <th>API level</th> </tr> </thead> <tbody> <tr> <td>Pie</td> <td>9</td> <td>API level 28</td> </tr> <tr> <td>Oreo</td> <td>8.1.0</td> <td>API level 27</td> </tr> <tr> <td>Nougat</td> <td>7.1</td> <td>API level 25</td> </tr> <tr> <td>Marshmallow</td> <td>6.0</td> <td>API level 23</td> </tr> <tr> <td>Lollipop</td> <td>5.1</td> <td>API level 22</td> </tr> </tbody> </table>
Striped Table
You can add stripes to the table with class="table-striped"
.
<table class="table-striped"> ... </table>
Code name | Version | API level |
---|---|---|
Pie | 9 | API level 28 |
Oreo | 8.1.0 | API level 27 |
Nougat | 7.1 | API level 25 |
Marshmallow | 6.0 | API level 23 |
Lollipop | 5.1 | API level 22 |
Hoverable Table
You can add a hover effect on the table with class="table-hoverable"
.
<table class="table-hoverable"> ... </table>
Code name | Version | API level |
---|---|---|
Pie | 9 | API level 28 |
Oreo | 8.1.0 | API level 27 |
Nougat | 7.1 | API level 25 |
Marshmallow | 6.0 | API level 23 |
Lollipop | 5.1 | API level 22 |
Centered Table
To center all text in the table add class="table-centered"
.
<table class="table-centered"> ... </table>
Code name | Version | API level |
---|---|---|
Pie | 9 | API level 28 |
Oreo | 8.1.0 | API level 27 |
Nougat | 7.1 | API level 25 |
Marshmallow | 6.0 | API level 23 |
Lollipop | 5.1 | API level 22 |
Card Table
You can add the shadow effect with class="table-card"
before the table tag.
<div class="table-card"> <table> ... </table> </div>
Code name | Version | API level |
---|---|---|
Pie | 9 | API level 28 |
Oreo | 8.1.0 | API level 27 |
Nougat | 7.1 | API level 25 |
Marshmallow | 6.0 | API level 23 |
Lollipop | 5.1 | API level 22 |
Responsive Table
Use class="table-responsive"
before the table tag to make the table responsive.
<div class="table-responsive"> <table> ... </table> </div>
# | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading |
---|---|---|---|---|---|---|---|---|---|---|---|---|
1 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
2 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
3 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
Colors Table
Primary and secondary colors for the table component.
<table class="background-primary"> ... </table>
Code name | Version | API level |
---|---|---|
Pie | 9 | API level 28 |
Oreo | 8.1.0 | API level 27 |
Nougat | 7.1 | API level 25 |
Marshmallow | 6.0 | API level 23 |
Lollipop | 5.1 | API level 22 |
Combination Table class
You can combination all class above become one.
<div class="table-card"> <table class="table-striped table-hoverable table-centered background-secondary"> ... </table> </div>
Code name | Version | API level |
---|---|---|
Pie | 9 | API level 28 |
Oreo | 8.1.0 | API level 27 |
Nougat | 7.1 | API level 25 |
Marshmallow | 6.0 | API level 23 |
Lollipop | 5.1 | API level 22 |
Alert
The alert
class is a component that used to tell information about posts. This component is available with 5 variations including without class as default, namely info, danger, warning, and success.
<div class="alert">...</div> <div class="alert info">...</div> <div class="alert danger">...</div> <div class="alert warning">...</div> <div class="alert success">...</div>
Alert with heading
Lorem ipsum dolor sit
Orci tempus urna ligula quisque odio est gravida malesuada erat, a hac litora accumsan nec inceptos mattis praesent, aliquam condimentum nibh vestibulum vehicula morbi nunc libero.
Integer feugiat semper himenaeos lobortis maecenas ridiculus leo diam dictum fames, est sociosqu donec etiam odio venenatis volutpat quis ut.
<div class="alert info"> <h2>Lorem ipsum dolor sit</h2> <p>...</p> <p>...</p> </div>
Alert large text
<div class="alert warning large">...</div>
Buttons and Ripples
Document of the buttons including the ripples component is very long, to avoid this please visit https://era-material.blogspot.com/p/the-button-component.html.
TextField
The TextField component is a complete form control including a label, input, and textarea.
Default Form
<form> <div class="textfield"> <input type="text" placeholder="Your name here"/> <label>Name</label> </div> <div class="textfield"> <input type="text" placeholder="Your email here"/> <label>Email</label> </div> <div class="textfield"> <textarea rows="6"></textarea> <label>Message</label> </div> <button class="btn btn-raised btn-secondary" type="submit">Submit</button> </form>
Inline Form
<form class="form-inline"> <div class="textfield"> <input type="text"/> </div> <button class="btn btn-raised" type="submit">Submit</button> </form>
Accordion
Accordion are useful component when you want to toggle between hiding and showing large amount of content.
The Accordion will work if the id attribute is different from the other id.
Lorem ipsum dolor sit amet consectetur adipiscing elit montes, dignissim et sociosqu sodales dictum laoreet mauris. At tortor morbi nunc scelerisque faucibus fringilla ut enim odio condimentum ornare, curae egestas turpis fermentum consequat vel lectus posuere congue risus commodo, fusce molestie dapibus placerat vitae dignissim eleifend nam natoque tellus. Mauris etiam scelerisque nam ridiculus dictum sodales senectus interdum habitasse vestibulum imperdiet dapibus, id vivamus cubilia phasellus lacus odio himenaeos curae nisi euismod nisl porta torquent, ligula donec aenean nostra dis quisque mi hac class libero sagittis. A hac sagittis faucibus fames posuere neque id fringilla, sed dui dictumst mi sollicitudin eros tortor porta facilisis, suspendisse malesuada eget turpis potenti massa nullam.
Turpis senectus quam himenaeos faucibus pellentesque vulputate, suspendisse posuere vivamus tempor etiam sem ac, duis tortor quis scelerisque arcu.
<div class="accordion"> <button class="accordion-toggle" aria-expanded="false" aria-controls="accordion_content_1" id="accordion_1_id">Your title</button> <div class="accordion-content" id="accordion_content_1" role="region" aria-labelledby="accordion_1_id"> Your content here... </div> <button class="accordion-toggle" aria-expanded="false" aria-controls="accordion_content_2" id="accordion_2_id">Your title</button> <div class="accordion-content" id="accordion_content_2" role="region" aria-labelledby="accordion_2_id"> <p>Your content here...</p> <p>Your content here...</p> </div> </div>
Tooltips
Tooltips display informative text when users hover over an element.
With JavaScript, the tooltip will automatically determine the exact position to display, this allows the position top, bottom, left or right in accordance with the element's position. We use the title
attribute to place a tooltip content.
<button class="btn btn-raised js-tooltip" title="Lorem ipsum dolor sit amet consectetur adipiscing elit mi, vulputate leo nulla quis proin suscipit enim eleifend et, natoque elementum luctus class nec auctor facilisis."> Tooltip </button> <button class="btn btn-raised js-tooltip" title="<em>Tooltip</em> <u>with</u> <b>HTML"> Tooltip HTML </button>
Dialogs
A Dialog is a type of modal window that appears in front of page content to provide critical information.
The Dialog will work if the id attribute is different from the other id. The data-open-dialog
id is the same as data-close-dialog
. They call from the id attribute on that dialog.
<button class="btn btn-raised js-dialog-open" data-open-dialog="dialog1"> Dialog default </button> <button class="btn btn-raised js-dialog-open" data-open-dialog="dialog2"> Dialog from top </button> <button class="btn btn-raised js-dialog-open" data-open-dialog="dialog3"> Dialog from bottom </button> <button class="btn btn-raised js-dialog-open" data-open-dialog="dialog4"> Dialog bottom sheet </button> <button class="btn btn-raised js-dialog-open" data-open-dialog="dialog5"> Dialog top sheet </button> <button class="btn btn-raised js-dialog-open" data-open-dialog="dialog6"> Dialog fullscreen </button>
Dialog example 1 (default)
Lorem ipsum dolor sit amet consectetur adipiscing elit sociis convallis, cum imperdiet magna molestie lacinia libero ad ac, potenti viverra pulvinar morbi urna luctus massa ridiculus. Donec lectus ligula nam conubia vel sapien class praesent lacus, dictumst sociosqu etiam litora condimentum viverra duis tempor tellus, felis bibendum purus sodales lacinia inceptos scelerisque semper. Imperdiet risus ullamcorper rhoncus eu suscipit luctus viverra interdum, odio molestie euismod malesuada posuere morbi metus ante, cursus sollicitudin pulvinar placerat nisl faucibus aliquam. Augue sagittis integer rhoncus eros tortor convallis class eu tincidunt ad ullamcorper consequat conubia, elementum pretium vitae ante ornare etiam dis et lacus taciti nulla egestas. Dapibus potenti rutrum placerat ac cum hac, nisi erat primis rhoncus penatibus, convallis tincidunt nec varius tempus.
Dialog default
<div class="dialog" id="dialog1"> <div class="dialog-scrim"></div> <div class="dialog-container"> <div class="dialog-surface"> <div class="dialog-header"> <h4 class="dialog-title">Dialog example 1 (default)</h4> </div> <div class="dialog-content"> <p>Your content here...</p> </div> <div class="dialog-footer"> <button class="btn btn-flat btn-secondary js-dialog-close" data-close-dialog="dialog1">Done</button> </div> </div> </div> </div>
Dialog example 2 (from top)
Lorem ipsum dolor sit amet consectetur adipiscing elit sociis convallis, cum imperdiet magna molestie lacinia libero ad ac, potenti viverra pulvinar morbi urna luctus massa ridiculus. Donec lectus ligula nam conubia vel sapien class praesent lacus, dictumst sociosqu etiam litora condimentum viverra duis tempor tellus, felis bibendum purus sodales lacinia inceptos scelerisque semper. Imperdiet risus ullamcorper rhoncus eu suscipit luctus viverra interdum, odio molestie euismod malesuada posuere morbi metus ante, cursus sollicitudin pulvinar placerat nisl faucibus aliquam. Augue sagittis integer rhoncus eros tortor convallis class eu tincidunt ad ullamcorper consequat conubia, elementum pretium vitae ante ornare etiam dis et lacus taciti nulla egestas. Dapibus potenti rutrum placerat ac cum hac, nisi erat primis rhoncus penatibus, convallis tincidunt nec varius tempus.
Volutpat imperdiet praesent viverra lacinia nullam fermentum consequat, natoque odio purus sem faucibus aptent habitant ac, mollis vehicula lobortis curabitur justo magnis. Bibendum vivamus rutrum dui montes velit massa convallis ut fames, imperdiet sed posuere mollis penatibus ridiculus torquent tempor, per taciti himenaeos et suscipit nibh integer faucibus. Lacinia nullam aenean taciti ornare per quisque rhoncus sagittis nunc nisi, iaculis porta conubia nibh cursus pretium proin metus mauris netus, rutrum viverra libero eleifend hendrerit interdum sed dui non. Aptent conubia velit neque sociosqu tempor netus molestie, himenaeos sed cursus dignissim ligula quis duis, integer nascetur massa vivamus condimentum commodo. Ligula vel suspendisse phasellus inceptos quisque luctus, dignissim eros fermentum nullam iaculis accumsan, rutrum aliquet montes diam molestie.
Ullamcorper curae auctor massa mattis quisque enim tortor vestibulum, feugiat facilisi nostra mollis curabitur ad aliquet sodales non, sagittis cubilia vivamus commodo tincidunt laoreet augue. Pretium hac fusce per cubilia nulla feugiat enim euismod, accumsan malesuada duis curae porttitor turpis aliquet volutpat, pharetra felis primis nibh at suscipit tempus. Primis erat suspendisse senectus facilisi consequat volutpat orci diam quis ac feugiat, morbi scelerisque pretium venenatis lacinia tortor eleifend nam maecenas faucibus, tempor aptent massa viverra magna sociis nisl curae gravida etiam. Sed auctor vestibulum proin ultricies curae viverra facilisi diam cum, est netus penatibus molestie dis porttitor quam eleifend, nisi ante nulla dignissim tristique mus vivamus augue. Rhoncus laoreet sociosqu nulla nisl donec tortor quam egestas interdum, sed est sagittis sodales justo et arcu euismod, commodo volutpat leo ultrices conubia tempus curae nunc. Etiam condimentum per quis fermentum netus aliquet himenaeos posuere torquent, eros interdum vitae justo nullam suscipit pellentesque vehicula congue augue, arcu pretium mi tristique pharetra odio tempor mollis.
Litora sem porta cursus felis magnis diam nostra, etiam eleifend nisl massa enim ullamcorper dignissim dui, orci fringilla porttitor morbi mus natoque. Magna aliquam sem metus massa neque vivamus turpis, eleifend vestibulum penatibus nisl potenti sollicitudin duis, vitae tempor inceptos nascetur ut libero. Himenaeos platea vivamus nascetur dapibus nostra fringilla dui, mus etiam morbi ac egestas porta faucibus, pretium cum vehicula ad imperdiet purus. Eu tempor dictum tristique hac torquent cras cum placerat auctor rutrum augue accumsan, at mus feugiat sed parturient class euismod nam ridiculus volutpat posuere, per netus nulla nunc egestas proin dui nullam mauris purus semper. Congue vulputate pellentesque donec tristique libero magnis himenaeos dis fusce rutrum, cubilia class nisi feugiat rhoncus quis dictumst justo augue, nunc praesent quisque viverra nostra gravida semper suspendisse eleifend. Sem ultricies per pretium magnis lacinia sapien curae risus ultrices, torquent mollis convallis purus molestie malesuada netus gravida, id aptent nulla vulputate proin posuere a eget.
Dialog from top
<div class="dialog top" id="dialog2"> <div class="dialog-scrim"></div> <div class="dialog-container"> <div class="dialog-surface"> <div class="dialog-header"> <h4 class="dialog-title">Dialog example 2 (from top)</h4> </div> <div class="dialog-content"> <p>Your content here...</p> </div> <div class="dialog-footer"> <button class="btn btn-flat btn-outline btn-secondary js-dialog-close" data-close-dialog="dialog2">Cancel</button> </div> </div> </div> </div>
Dialog example 3 (from bottom)
Lorem ipsum dolor sit amet consectetur adipiscing elit sociis convallis, cum imperdiet magna molestie lacinia libero ad ac, potenti viverra pulvinar morbi urna luctus massa ridiculus. Donec lectus ligula nam conubia vel sapien class praesent lacus, dictumst sociosqu etiam litora condimentum viverra duis tempor tellus, felis bibendum purus sodales lacinia inceptos scelerisque semper. Imperdiet risus ullamcorper rhoncus eu suscipit luctus viverra interdum, odio molestie euismod malesuada posuere morbi metus ante, cursus sollicitudin pulvinar placerat nisl faucibus aliquam. Augue sagittis integer rhoncus eros tortor convallis class eu tincidunt ad ullamcorper consequat conubia, elementum pretium vitae ante ornare etiam dis et lacus taciti nulla egestas. Dapibus potenti rutrum placerat ac cum hac, nisi erat primis rhoncus penatibus, convallis tincidunt nec varius tempus.
Volutpat imperdiet praesent viverra lacinia nullam fermentum consequat, natoque odio purus sem faucibus aptent habitant ac, mollis vehicula lobortis curabitur justo magnis. Bibendum vivamus rutrum dui montes velit massa convallis ut fames, imperdiet sed posuere mollis penatibus ridiculus torquent tempor, per taciti himenaeos et suscipit nibh integer faucibus. Lacinia nullam aenean taciti ornare per quisque rhoncus sagittis nunc nisi, iaculis porta conubia nibh cursus pretium proin metus mauris netus, rutrum viverra libero eleifend hendrerit interdum sed dui non. Aptent conubia velit neque sociosqu tempor netus molestie, himenaeos sed cursus dignissim ligula quis duis, integer nascetur massa vivamus condimentum commodo. Ligula vel suspendisse phasellus inceptos quisque luctus, dignissim eros fermentum nullam iaculis accumsan, rutrum aliquet montes diam molestie.
Ullamcorper curae auctor massa mattis quisque enim tortor vestibulum, feugiat facilisi nostra mollis curabitur ad aliquet sodales non, sagittis cubilia vivamus commodo tincidunt laoreet augue. Pretium hac fusce per cubilia nulla feugiat enim euismod, accumsan malesuada duis curae porttitor turpis aliquet volutpat, pharetra felis primis nibh at suscipit tempus. Primis erat suspendisse senectus facilisi consequat volutpat orci diam quis ac feugiat, morbi scelerisque pretium venenatis lacinia tortor eleifend nam maecenas faucibus, tempor aptent massa viverra magna sociis nisl curae gravida etiam. Sed auctor vestibulum proin ultricies curae viverra facilisi diam cum, est netus penatibus molestie dis porttitor quam eleifend, nisi ante nulla dignissim tristique mus vivamus augue. Rhoncus laoreet sociosqu nulla nisl donec tortor quam egestas interdum, sed est sagittis sodales justo et arcu euismod, commodo volutpat leo ultrices conubia tempus curae nunc. Etiam condimentum per quis fermentum netus aliquet himenaeos posuere torquent, eros interdum vitae justo nullam suscipit pellentesque vehicula congue augue, arcu pretium mi tristique pharetra odio tempor mollis.
Litora sem porta cursus felis magnis diam nostra, etiam eleifend nisl massa enim ullamcorper dignissim dui, orci fringilla porttitor morbi mus natoque. Magna aliquam sem metus massa neque vivamus turpis, eleifend vestibulum penatibus nisl potenti sollicitudin duis, vitae tempor inceptos nascetur ut libero. Himenaeos platea vivamus nascetur dapibus nostra fringilla dui, mus etiam morbi ac egestas porta faucibus, pretium cum vehicula ad imperdiet purus. Eu tempor dictum tristique hac torquent cras cum placerat auctor rutrum augue accumsan, at mus feugiat sed parturient class euismod nam ridiculus volutpat posuere, per netus nulla nunc egestas proin dui nullam mauris purus semper. Congue vulputate pellentesque donec tristique libero magnis himenaeos dis fusce rutrum, cubilia class nisi feugiat rhoncus quis dictumst justo augue, nunc praesent quisque viverra nostra gravida semper suspendisse eleifend. Sem ultricies per pretium magnis lacinia sapien curae risus ultrices, torquent mollis convallis purus molestie malesuada netus gravida, id aptent nulla vulputate proin posuere a eget.
Dialog from bottom
<div class="dialog bottom" id="dialog3"> <div class="dialog-scrim"></div> <div class="dialog-container"> <div class="dialog-surface"> <div class="dialog-header"> <h4 class="dialog-title">Dialog example 3 (from bottom)</h4> </div> <div class="dialog-content"> <p>Your content here...</p> </div> <div class="dialog-footer"> <button class="btn btn-flat btn-primary js-dialog-close" data-close-dialog="dialog3">Close</button> <button class="btn btn-flat btn-secondary js-dialog-close" data-close-dialog="dialog3">Accept</button> </div> </div> </div> </div>
Dialog example 4 (bottom sheet)
Lorem ipsum dolor sit amet consectetur adipiscing elit sociis convallis, cum imperdiet magna molestie lacinia libero ad ac, potenti viverra pulvinar morbi urna luctus massa ridiculus. Donec lectus ligula nam conubia vel sapien class praesent lacus, dictumst sociosqu etiam litora condimentum viverra duis tempor tellus, felis bibendum purus sodales lacinia inceptos scelerisque semper. Imperdiet risus ullamcorper rhoncus eu suscipit luctus viverra interdum, odio molestie euismod malesuada posuere morbi metus ante, cursus sollicitudin pulvinar placerat nisl faucibus aliquam. Augue sagittis integer rhoncus eros tortor convallis class eu tincidunt ad ullamcorper consequat conubia, elementum pretium vitae ante ornare etiam dis et lacus taciti nulla egestas. Dapibus potenti rutrum placerat ac cum hac, nisi erat primis rhoncus penatibus, convallis tincidunt nec varius tempus.
Dialog bottom sheet
<div class="dialog dialog-bottom-sheet bottom" id="dialog4"> <div class="dialog-scrim"></div> <div class="dialog-container"> <div class="dialog-surface"> <div class="dialog-header"> <h4 class="dialog-title">Dialog example 4 (bottom sheet)</h4> <button class="dialog-close js-dialog-close js-ripple js-tooltip" data-close-dialog="dialog4" aria-label="Close" title="Close" tabindex="-1"> <svg aria-hidden="true" class="dialog-close-icon" viewBox="0 0 24 24"> <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path> </svg> </button> </div> <div class="dialog-content"> <p>Your content here...</p> </div> </div> </div> </div>
Dialog example 5 (top sheet)
Lorem ipsum dolor sit amet consectetur adipiscing elit sociis convallis, cum imperdiet magna molestie lacinia libero ad ac, potenti viverra pulvinar morbi urna luctus massa ridiculus. Donec lectus ligula nam conubia vel sapien class praesent lacus, dictumst sociosqu etiam litora condimentum viverra duis tempor tellus, felis bibendum purus sodales lacinia inceptos scelerisque semper. Imperdiet risus ullamcorper rhoncus eu suscipit luctus viverra interdum, odio molestie euismod malesuada posuere morbi metus ante, cursus sollicitudin pulvinar placerat nisl faucibus aliquam. Augue sagittis integer rhoncus eros tortor convallis class eu tincidunt ad ullamcorper consequat conubia, elementum pretium vitae ante ornare etiam dis et lacus taciti nulla egestas. Dapibus potenti rutrum placerat ac cum hac, nisi erat primis rhoncus penatibus, convallis tincidunt nec varius tempus.
Dialog top sheet
<div class="dialog dialog-top-sheet top" id="dialog5"> <div class="dialog-scrim"></div> <div class="dialog-container"> <div class="dialog-surface"> <div class="dialog-header"> <h4 class="dialog-title">Dialog example 5 (top sheet)</h4> <button class="dialog-close js-dialog-close js-ripple js-tooltip" data-close-dialog="dialog5" aria-label="Close" title="Close" tabindex="-1"> <svg aria-hidden="true" class="dialog-close-icon" viewBox="0 0 24 24"> <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path> </svg> </button> </div> <div class="dialog-content"> <p>Your content here...</p> </div> </div> </div> </div>
Dialog example 6 (fullscreen)
Lorem ipsum dolor sit amet consectetur adipiscing elit sociis convallis, cum imperdiet magna molestie lacinia libero ad ac, potenti viverra pulvinar morbi urna luctus massa ridiculus. Donec lectus ligula nam conubia vel sapien class praesent lacus, dictumst sociosqu etiam litora condimentum viverra duis tempor tellus, felis bibendum purus sodales lacinia inceptos scelerisque semper. Imperdiet risus ullamcorper rhoncus eu suscipit luctus viverra interdum, odio molestie euismod malesuada posuere morbi metus ante, cursus sollicitudin pulvinar placerat nisl faucibus aliquam. Augue sagittis integer rhoncus eros tortor convallis class eu tincidunt ad ullamcorper consequat conubia, elementum pretium vitae ante ornare etiam dis et lacus taciti nulla egestas. Dapibus potenti rutrum placerat ac cum hac, nisi erat primis rhoncus penatibus, convallis tincidunt nec varius tempus.
Volutpat imperdiet praesent viverra lacinia nullam fermentum consequat, natoque odio purus sem faucibus aptent habitant ac, mollis vehicula lobortis curabitur justo magnis. Bibendum vivamus rutrum dui montes velit massa convallis ut fames, imperdiet sed posuere mollis penatibus ridiculus torquent tempor, per taciti himenaeos et suscipit nibh integer faucibus. Lacinia nullam aenean taciti ornare per quisque rhoncus sagittis nunc nisi, iaculis porta conubia nibh cursus pretium proin metus mauris netus, rutrum viverra libero eleifend hendrerit interdum sed dui non. Aptent conubia velit neque sociosqu tempor netus molestie, himenaeos sed cursus dignissim ligula quis duis, integer nascetur massa vivamus condimentum commodo. Ligula vel suspendisse phasellus inceptos quisque luctus, dignissim eros fermentum nullam iaculis accumsan, rutrum aliquet montes diam molestie.
Ullamcorper curae auctor massa mattis quisque enim tortor vestibulum, feugiat facilisi nostra mollis curabitur ad aliquet sodales non, sagittis cubilia vivamus commodo tincidunt laoreet augue. Pretium hac fusce per cubilia nulla feugiat enim euismod, accumsan malesuada duis curae porttitor turpis aliquet volutpat, pharetra felis primis nibh at suscipit tempus. Primis erat suspendisse senectus facilisi consequat volutpat orci diam quis ac feugiat, morbi scelerisque pretium venenatis lacinia tortor eleifend nam maecenas faucibus, tempor aptent massa viverra magna sociis nisl curae gravida etiam. Sed auctor vestibulum proin ultricies curae viverra facilisi diam cum, est netus penatibus molestie dis porttitor quam eleifend, nisi ante nulla dignissim tristique mus vivamus augue. Rhoncus laoreet sociosqu nulla nisl donec tortor quam egestas interdum, sed est sagittis sodales justo et arcu euismod, commodo volutpat leo ultrices conubia tempus curae nunc. Etiam condimentum per quis fermentum netus aliquet himenaeos posuere torquent, eros interdum vitae justo nullam suscipit pellentesque vehicula congue augue, arcu pretium mi tristique pharetra odio tempor mollis.
Litora sem porta cursus felis magnis diam nostra, etiam eleifend nisl massa enim ullamcorper dignissim dui, orci fringilla porttitor morbi mus natoque. Magna aliquam sem metus massa neque vivamus turpis, eleifend vestibulum penatibus nisl potenti sollicitudin duis, vitae tempor inceptos nascetur ut libero. Himenaeos platea vivamus nascetur dapibus nostra fringilla dui, mus etiam morbi ac egestas porta faucibus, pretium cum vehicula ad imperdiet purus. Eu tempor dictum tristique hac torquent cras cum placerat auctor rutrum augue accumsan, at mus feugiat sed parturient class euismod nam ridiculus volutpat posuere, per netus nulla nunc egestas proin dui nullam mauris purus semper. Congue vulputate pellentesque donec tristique libero magnis himenaeos dis fusce rutrum, cubilia class nisi feugiat rhoncus quis dictumst justo augue, nunc praesent quisque viverra nostra gravida semper suspendisse eleifend. Sem ultricies per pretium magnis lacinia sapien curae risus ultrices, torquent mollis convallis purus molestie malesuada netus gravida, id aptent nulla vulputate proin posuere a eget.
Dialog fullscreen
<div class="dialog bottom fullscreen" id="dialog6"> <div class="dialog-scrim"></div> <div class="dialog-container"> <div class="dialog-surface"> <div class="dialog-header"> <h4 class="dialog-title">Dialog example 6 (fullscreen)</h4> </div> <div class="dialog-content"> <p>Your content here...</p> </div> <div class="dialog-footer"> <button class="btn btn-flat btn-secondary js-dialog-close" data-close-dialog="dialog6">Done</button> </div> </div> </div> </div>
Misc
The following is an useful other components to use.
Table of Contents
With JavaScript, automatically creates a Table of Contents by adding <nav id="toc"></nav>
to your posts. This will work if your post includes heading h3
with Anchor headings. For example this document uses the Table of Contents feature.
Material Design Icons
We use Material Design Icons from Austin Andrews. This icon is same as Font Awesome but the design is Material Design. Below for example:
<span class='mdi mdi-name'></span>Change the
mdi-name
with icon name, here is list of icons.
Twitter Emoji (Twemoji)
By default emoji will not appear perfect in all browsers. Therefore we use Twitter Emoji as the solution. 😁😆😅😂🤣👻💀🤖🤘🙌🙏
JavaScript Library
Era Material has many JavaScript library customizations including Anchor, Table Of Contents, Toolbar, etc. You can only access the documentation if you have purchased Era Material.
Comment disabled