Components

Explore all MACUI Components with source code!

Install MACUI

Table of Contents

Name	Classes
Color	c1   c2   c3   c4
Notes	macnotes
Border	macborder
Shadow	macshadow
Button	macbtn
Button color	btn1, btn2, btn3, btn4
Underline	ul
Heading	macheading
Grids	grids, grid

Notes

Demo:

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt aut ea corporis quisquam doloremque fuga dicta consequatur laudantium optio iure, repellat nihil vero totam amet, necessitatibus voluptatem, vitae aliquid recusandae.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt aut ea corporis quisquam doloremque fuga dicta consequatur laudantium optio iure, repellat nihil vero totam amet, necessitatibus voluptatem, vitae aliquid recusandae.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt aut ea corporis quisquam doloremque fuga dicta consequatur laudantium optio iure, repellat nihil vero totam amet, necessitatibus voluptatem, vitae aliquid recusandae.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt aut ea corporis quisquam doloremque fuga dicta consequatur laudantium optio iure, repellat nihil vero totam amet, necessitatibus voluptatem, vitae aliquid recusandae.

Classes

• notes: macnotes
• colors: c1, c2, c3, c4

Code

<div class="macnotes c1">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt aut ea corporis quisquam doloremque fuga dicta consequatur laudantium optio iure, repellat nihil vero totam amet, necessitatibus voluptatem, vitae aliquid recusandae.</p>
    <button href="#" class="macbtn btn1">Download now!</button>
  </div>

Notes Border

Demo:

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt aut ea corporis quisquam doloremque fuga dicta consequatur laudantium optio iure, repellat nihil vero totam amet, necessitatibus voluptatem, vitae aliquid recusandae.

Classes

• notes: macnotes-border
• elements: macborder, macshadow

Code

<div class="macnotes-border">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt aut ea corporis quisquam doloremque fuga dicta consequatur laudantium optio iure, repellat nihil vero totam amet, necessitatibus voluptatem, vitae aliquid recusandae.</p>
    <button href="#" class="macbtn btn1">Download now!</button>
  </div>

Buttons

Demo:

Classes

• button: macbtn
• colors: btn1, btn2, btn3, btn4,

Code

<button href="#" class="macbtn btn1">Button</button>
<button href="#" class="macbtn btn2">Button</button>
<button href="#" class="macbtn btn3">Button</button>
<button href="#" class="macbtn btn4">Button</button>

Animated Underline

Demo:

Click this!

Classes

• underline: ul

Code

<p class="ul">Click this!</p>

Heading

Demo:

Title

Classes

• heading: macheading
• colors: c1, c2, c3, c4

Code

<div class="macheading c1">Title</div>

Grids

Demo:

Content here

Content here

Content here

Content here

Classes

• main tag: grids
• blocks: grid

Code

<div class="grids">
    <div class="grid">
      <div class="macnotes c1">Content here</div>
    </div>
    <div class="grid">
      <div class="macnotes c1">Content here</div>
    </div>
    <div class="grid">
      <div class="macnotes c1">Content here</div>
    </div>
    <div class="grid">
      <div class="macnotes c1">Content here</div>
    </div>
  </div>