Infima

A UI framework for content-centric websites.

Hero #

Hero Title

Not all heroes wear capes

Hero Title

Not all heroes wear capes

Hero Title

Not all heroes wear capes

Footer #

Menu and Contents #

Installation

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Fringilla phasellus faucibus scelerisque eleifend donec pretium.

Installing Infima

Ut lectus arcu bibendum at. Quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus urna. Lacus laoreet non curabitur gravida. Neque viverra justo nec ultrices dui sapien eget mi. Et pharetra pharetra massa massa ultricies mi. Nulla aliquet enim tortor at. Euismod nisi porta lorem mollis aliquam.

Ut lectus arcu bibendum at. Quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus urna. Lacus laoreet non curabitur gravida. Neque viverra justo nec ultrices dui sapien eget mi. Et pharetra pharetra massa massa ultricies mi. Nulla aliquet enim tortor at. Euismod nisi porta lorem mollis aliquam.

Verifying Installation

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Fringilla phasellus faucibus scelerisque eleifend donec pretium.

const myFun = (x, y) => {
  const doubleX = x + x;
  const doubleY = y + y;
  return doubleX + doubleY
};

Morbi tincidunt ornare massa eget. Dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Sem fringilla ut morbi tincidunt augue interdum velit euismod in. Volutpat maecenas volutpat blandit aliquam etiam erat. Fames ac turpis egestas maecenas. Odio ut sem nulla pharetra diam sit. Gravida rutrum quisque non tellus orci ac auctor.

Running Examples

At elementum eu facilisis sed odio morbi quis. Metus vulputate eu scelerisque felis. Vitae semper quis lectus nulla at volutpat diam ut venenatis. Pellentesque diam volutpat commodo sed egestas egestas fringilla. Cursus in hac habitasse platea dictumst quisque sagittis purus. Odio ut enim blandit volutpat maecenas volutpat blandit.

Why this is good

  • Foo
  • Bar
  • Baz
    • Foo
    • Bar
    • Baz

At elementum eu facilisis sed odio morbi quis. Metus vulputate eu scelerisque felis. Vitae semper quis lectus nulla at volutpat diam ut venenatis. Pellentesque diam volutpat commodo sed egestas egestas fringilla. Cursus in hac habitasse platea dictumst quisque sagittis purus. Odio ut enim blandit volutpat maecenas volutpat blandit.

Grid #

Twelve Column Layout

col--6
col--6
col--4
col--4
col--4
col--3
col--3
col--3
col--3
col--2
col--2
col--2
col--2
col--2
col--2
col--1
col--1
col--1
col--1
col--1
col--1
col--1
col--1
col--1
col--1
col--1
col--1

Equal-width

col
col
col
col
col

Auto-width

col--3
col
col--4
col
col--2

Column Offsets

col--1
col--2 col--offset-1
col--3 col--offset-2
col--2
col--2 col--offset-2
col--4 col--offset-2
col--3
col--6 col--offset-3

No Gutters

col
col
col
col
col
col--3
col--4
col--5

Colors #

Click a color to copy its Hex code

Primary
Secondary
Success
Info
Warning
Danger
Gray

Buttons #

Alerts #

Badges #

Primary Secondary Success Info Warning Danger

This is Something New Primary

This is Something New Primary

This is Something New Primary

This is Something New Primary

This is Something New Primary
This is Something New Primary

Pills #

Standard Pills

  • Alpha
  • Beta
  • Gamma
  • Zeta

Full-width Pills

  • Alpha
  • Beta
  • Gamma
  • Zeta

Tabs #

Standard Tabs

  • Timeline
  • About
  • Friends
  • Photos
  • Videos

Full-Width Tabs

  • Timeline
  • About
  • Friends
  • Photos
  • Videos

Pagination

Avatar #

Horizontal Avatars

Dan Abramov Profile
Dan Abramov
Working on @reactjs. Co-author of Redux and Create React App.
Christopher Chedeau
Frenchy Front End Engineer
Jordan Walke
Maker of things: ReactJS. Working on: @reasonml . At: Facebook Engineering.
Christoph Pojer

Vertical Avatars

Hector Ramos
React Native @facebook
Joel Marcey
Developer Advocate at Facebook, co-creator of Docusaurus
Yangshun Tay
Creator of Infima
Endilie Yacop Sucipto

Cards #

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida.

Jared Palmer
Consultant, Speaker, Lead Engineer
Image alt text
Image alt text

Quaco Lighthouse

The Quaco Head Lighthouse is a well maintained lighthouse close to St. Martins. It is a short, beautiful walk to the lighthouse along the seashore.

Full-Height Cards

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida.

Jared Palmer
Consultant, Speaker, Lead Engineer
Image alt text
Image alt text

Quaco Lighthouse

The Quaco Head Lighthouse is a well maintained lighthouse close to St. Martins. It is a short, beautiful walk to the lighthouse along the seashore.

Typography #

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Emphasis

Emphasis, aka italics, with asterisks or underscores .

Strong emphasis, aka bold, with asterisks or underscores .

Combined emphasis with asterisks and underscores .

Strikethrough uses two tildes. Scratch this.

This is primary text.

This is secondary text.

This is success text.

This is info text.

This is warning text.

This is danger text.

Blockquotes

Blockquotes are very handy in email to emulate reply text. This line is part of the same quote.

Quote break.

This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can put Markdown into a blockquote.

Some nested quote

Here's a link to somewhere else and an inline code block

Lists

  1. First ordered list item
  2. Second item
  3. Third item
  • First unordered list item
  • Second item
  • Third item
  1. Lists in a list item:
    • Indented four spaces.
      • indented eight spaces.
    • Four spaces again.
  2. Multiple paragraphs in a list items: It's best to indent the paragraphs four spaces You can get away with three, but it can get confusing when you nest other things. Stick to four.

    We indented the first line an extra space to align it with these paragraphs. In real use, we might do that to the entire list so that all items line up.

    This paragraph is still part of the list item, but it looks messy to humans. So it's a good idea to wrap your nested paragraphs manually, as we did with the first two.

  3. Blockquotes in a list item:

    Skip a line and indent the >'s four spaces.

  4. Preformatted text in a list item:

    Skip a line and indent eight spaces.
          That's four spaces for the list
          and four to trigger the code block.
          

Tables

Tables Are Cool
col 3 is right-aligned $1600
col 2 is centered $12
zebra stripes are neat $1
Markdown Less Pretty
Still renders nicely
1 2 3

Inline HTML

To reboot your computer, search it up on Google or press ctrl + alt + del .

Horizontal Rules

Three or more...


Hyphens


Asterisks


Underscores

Code and Syntax Highlighting

Inline code has back-ticks around it.

function foo() {
  console.log('foo!');
}

You can use code in your headers.

As well as type code in your blockquotes.

And you can use code inside links

JavaScript Reason
const myFun = (x, y) => {
  const doubleX = x + x;
  const doubleY = y + y;
  return doubleX + doubleY
};
let myFun = (x, y) => {
  let doubleX = x + x;
  let doubleY = y + y;
  doubleX + doubleY
};

Media #

Images

Image alt text

Photo credits: Ashim D'Silva

Shadows #

Low elevation
Medium elevation
High elevation

Iframes #