Iklan Pinky UI
Era Material https://era-material.blogspot.com/p/the-component-demo.html

The component demo

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

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.

abbr abbr
Citation cite
Bold b
Italic i
Strong strong
Emphasis em
Small small
Underline u
Deleted del
inserted ins
Strikethrough s
The Subscripted text sub
The Superscripted text sup
Marked/Highlighted mark
x = y + 2 var
time
(Kan)(ji) 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

The pre 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>

Use class="link" to avoid external link.

This is fake 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.

  1. One
  2. Two
  3. Three
  4. Four
  5. Five
  6. 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 to pre 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.

Lorem ipsum dolor sit amet consectetur adipiscing elit nunc enim fames, pretium senectus nec maecenas aptent diam ridiculus quisque nulla volutpat.
Lorem ipsum dolor sit amet consectetur adipiscing elit nunc enim fames, pretium senectus nec maecenas aptent diam ridiculus quisque nulla volutpat.
Lorem ipsum dolor sit amet consectetur adipiscing elit nunc enim fames, pretium senectus nec maecenas aptent diam ridiculus quisque nulla volutpat.
Lorem ipsum dolor sit amet consectetur adipiscing elit nunc enim fames, pretium senectus nec maecenas aptent diam ridiculus quisque nulla volutpat.
Lorem ipsum dolor sit amet consectetur adipiscing elit nunc enim fames, pretium senectus nec maecenas aptent diam ridiculus quisque nulla volutpat.
<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

Lorem ipsum dolor sit amet consectetur adipiscing elit nunc enim fames, pretium senectus nec maecenas aptent diam ridiculus quisque nulla volutpat.
<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 cubilia penatibus purus vestibulum massa.
Lorem ipsum dolor sit amet consectetur adipiscing elit scelerisque lacinia libero, id penatibus volutpat nulla ornare ultricies ultrices fames ut viverra, cursus hendrerit commodo mattis phasellus sociosqu vivamus tincidunt lectus. Eget dignissim quisque luctus montes non hendrerit viverra, lacinia cursus accumsan habitant nec porta, sociosqu fringilla id commodo magna ad. Auctor pretium nec diam primis dis nulla vivamus felis netus tincidunt, conubia ligula hac senectus dictumst porta volutpat imperdiet semper. Dictum nec litora facilisis ultrices volutpat augue molestie velit eros sociosqu auctor ac dignissim, varius porta natoque aenean at aliquam luctus ullamcorper pharetra tincidunt fringilla quisque.
Turpis senectus quam himenaeos faucibus pellentesque vulputate, suspendisse posuere vivamus tempor etiam sem ac, duis tortor quis scelerisque arcu.

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

Horizontal Ad Space

Subscribe to our newsletter

Notification