Global

The global category defines visual elements such as color, font families, and motion. While not technically UI components, these elements are critical to document in the pattern library.

  • $fedora-blue
    #3c6eb4
  • $fedora-dark-blue
    #294172
  • $fedora-magenta
    #db3279
  • $fedora-orange
    #e59728
  • $fedora-green
    #79db32
  • $fedora-purple
    #a07cbc
  • $color-white
    #ffffff
  • $gray-lightest
    #f7f7f9
  • $gray-lighter
    #eceeef
  • $gray-light
    #d5d5d5
  • $gray-medium
    #808080
  • $gray
    #55595c
  • $gray-dark
    #373a3c
  • $color-black (TODO: not upstream)
    #000000
  • $brand-primary
    #428bca
  • $brand-success
    #79db32
  • $brand-warning
    #e59728
  • $brand-danger
    #db3279
  • $brand-info
    #a07cbc
  • Blue Pattern
    pattern-blue.png
  • Light Gray Pattern
    pattern-gray.png
  • Medium Gray Pattern
    pattern-medium-gray.png
  • Dark Gray Pattern
    pattern-dark-gray.png
  • Workstation Pattern
    pattern-workstation.png
  • Server Pattern
    pattern-server.png
  • Atomic Pattern
    pattern-atomic.png

Primary Font

Primary font: "Open Sans", "Helvetica", "Arial", sans-serif;
Primary font italic: "Open Sans", "Helvetica", "Arial", sans-serif;
Primary font bold: "Open Sans", "Helvetica", "Arial", sans-serif;
900 weight
700 weight
500 weight
300 weight

Headline Font

Headline font: "Montserrat", sans-serif;
Headline font italic: "Montserrat", sans-serif;
Headline font bold: "Montserrat", sans-serif;
900 weight
800 weight
700 weight
600 weight
400 weight
300 weight
200 weight
100 weight
Fade: Duration: 0.3s Easing: ease-out (Hover to see effect)
Avatar
Hero Image
Landscape Image
Square Image

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
Heading Level 6

This is a text link

Strong is used to indicate strong importance

This text has added emphasis

The b element is stylistically different text from normal text, without any special importance

The i element is text that is set off from the normal text

The u element is text with an unarticulated, though explicitly rendered, non-textual annotation

This text is deleted and This text is inserted

This text has a strikethrough

Superscript®

Subscript for things like H2O

This small text is small for for fine print, etc.

Abbreviation: HTML

Keybord input: Cmd

This text is a short inline quotation

This is a citation

The dfn element indicates a definition.

The mark element indicates a highlight

This is what inline code looks like.

This is sample output from a computer program

The variarble element, such as x = y

A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

  	
P R E F O R M A T T E D T E X T
! " # $ % & ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~
Header title
Design Team Meeting
Nov 04

@11:00 AM ET

#design-team
Fedora Hubs Demo
Requested
1/1
Landscape Image
This is an example of an image with a caption. Photo captions, also known as cutlines, are a few lines of text used to explain or elaborate on published photographs.
An alert is messaging that tells the user some information. Alerts can be error, warning, success, or info messages

Let's go on a hike and climb in elevation

Find a Hike
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.
Wikiepedia
Card image cap

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
Card image cap
Square Image Square Image

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
  • Rawhide
  • Fedora 25
  • Fedora 22
  • #591162

    bugzilla.redhat.com

    no sound after waking up from suspend

    Fedora 13 / pulseaudio

    NEEDINFO

  • #8

    pagure.io

    Hubs Owner + Community Rules Widget

    fedora-hubs

    OPEN

  • #363

    fedorahosted.org

    Mockup request for new spins.fpo and

    design-team

    OPEN

  • #363

    fedorahosted.org

    Mockup request for new spins.fpo and

    design-team

    OPEN

Page Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, unde, dolore? Ex fugit, necessitatibus tempore neque ullam nostrum ducimus alias beatae voluptatibus iusto, perspiciatis tenetur consectetur reprehenderit, harum quae rerum!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit corrupti fuga, quas quisquam perspiciatis. Consequatur, atque ducimus dolores natus officia qui rerum consectetur repellat ullam accusantium laboriosam, reprehenderit nemo deleniti