Base CSS
A set of base styles. ELR Base is not a CSS reset. It is meant to be used with a CSS reset. It is simply a set of styles for HTML elements to help get projects going quickly.
Headings
h1 Lorem ipsum dolor sit amet, consectetur adipisicing.
h2 Lorem ipsum dolor sit amet, consectetur adipisicing.
h3 Lorem ipsum dolor sit amet, consectetur adipisicing.
h4 Lorem ipsum dolor sit amet, consectetur adipisicing.
h5 Lorem ipsum dolor sit amet, consectetur adipisicing.
h6 Lorem ipsum dolor sit amet, consectetur adipisicing.
Paragraphs styled as headings with a larger font size
Can be useful if you need a larger font-size but you don't want to add semantic meaning.
h1 Lorem ipsum dolor sit amet, consectetur adipisicing.
h2 Lorem ipsum dolor sit amet, consectetur adipisicing.
h3 Lorem ipsum dolor sit amet, consectetur adipisicing.
h4 Lorem ipsum dolor sit amet, consectetur adipisicing.
h5 Lorem ipsum dolor sit amet, consectetur adipisicing.
h6 Lorem ipsum dolor sit amet, consectetur adipisicing.
Lists
Unstyled List
- List Item 1
- List Item 2
- List Item 3
- List Item 4
- List Item 5
Ordered List
- List Item
- List Item
- List Item
- List Item
- List Item
Definition List
- Term
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illum in dignissimos ab nobis ad iure corrupti! Ducimus officia eaque sapiente.
- Term
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eos sint in, accusamus perspiciatis, nemo obcaecati culpa numquam debitis vel delectus aperiam rerum rem tempora laborum!
- Term
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil beatae magni minima fuga velit impedit cumque! Earum quibusdam veniam totam fugit asperiores, nostrum laudantium minima omnis eveniet exercitationem illum atque?
- Term
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, qui pariatur. Ab veniam deserunt neque.
- Term
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magnam ut omnis, cum esse iure, officiis repudiandae maxime corporis, minima pariatur laboriosam sunt nesciunt dolores unde labore velit temporibus dolor molestias. Minus ipsa libero ad non voluptatibus consequatur perferendis!
Definition List Inline
Add class .dl-inline to dl element
- Term
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illum in dignissimos ab nobis ad iure corrupti! Ducimus officia eaque sapiente.
- Term
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eos sint in, accusamus perspiciatis, nemo obcaecati culpa numquam debitis vel delectus aperiam rerum rem tempora laborum!
- Term
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil beatae magni minima fuga velit impedit cumque! Earum quibusdam veniam totam fugit asperiores, nostrum laudantium minima omnis eveniet exercitationem illum atque?
- Term
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, qui pariatur. Ab veniam deserunt neque.
- Term
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magnam ut omnis, cum esse iure, officiis repudiandae maxime corporis, minima pariatur laboriosam sunt nesciunt dolores unde labore velit temporibus dolor molestias. Minus ipsa libero ad non voluptatibus consequatur perferendis!
Typography
Mark
Highlighted TextParagraph with inline elements
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus corporis sequi inventore magnam sint earum hic esse corrupti deserunt, placeat, alias velit. Facilis itaque assumenda aliquam aperiam eligendi aspernatur et inventore dicta amet, quis illum vel tempore harum quos! Et!
Paragraph
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iste, cum nostrum aliquam pariatur dicta nam nihil veniam est officia, tempora dolor officiis? Iusto, saepe ratione. Impedit amet error molestias ullam quidem dolor, similique quia reiciendis. Dolor eaque quibusdam libero distinctio?
Small
Some small textBlock Quote
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius ipsam, neque aspernatur nemo voluptates provident assumenda veritatis quidem ratione accusantium eligendi, qui expedita quod sit molestias id, ducimus consectetur officia earum nisi adipisci inventore? Ducimus dolorem eos accusamus deleniti est?
-Someone Important
Pre
.class {
background-color: #333;
color: #fff;
border: 1px solid #ccc;
padding: 10px;
}