CIFOR-ICRAF Web Style Guide
Family: Cerebri Sans
Cerebri Sans extra bold
Cerebri Sans extra bold italic
Cerebri Sans bold
Cerebri Sans bold italic
Cerebri Sans semi bold
Cerebri Sans semi bold italic
Cerebri Sans medium
Cerebri Sans medium italic
Cerebri Sans regular
Cerebri Sans regular italic
Cerebri Sans light
Cerebri Sans light italic
h1. CIFOR-ICRAF heading
h2. CIFOR-ICRAF heading
h3. CIFOR-ICRAF heading
h4. CIFOR-ICRAF heading
h5. CIFOR-ICRAF heading
h6. CIFOR-ICRAF heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse enim urna, tincidunt id lectus in, porttitor sagittis justo. Etiam quis arcu ullamcorper, faucibus nibh euismod, luctus lacus. Proin rutrum quam et tortor faucibus, eu suscipit nisi vehicula. Ut ullamcorper dui sit amet viverra ultricies. Aenean hendrerit, lorem pharetra lacinia commodo, magna felis laoreet nunc, at gravida lorem leo ac nunc.
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
- Cras non sodales quam. Fusce posuere dolor eget
- Metus sollicitudin interdum. Nullam eleifend aliquet ante malesuada tincidunt
- Nulla facilisi. Vestibulum auctor nisi cursus semper placerat
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
- Cras non sodales quam. Fusce posuere dolor eget
- Metus sollicitudin interdum. Nullam eleifend aliquet ante malesuada tincidunt
- Nulla facilisi. Vestibulum auctor nisi cursus semper placerat
Title
The title above is usually used when there's no browse all button in the section. It can be seen here.
Title
The title above is usually used when there's a browse all button in the right side and in the same line with the title. It can be seen here.
The title above is usually used for special feature section. It can be seen here.
Title
The title above is usually used when there's a browse all button in the bottom right side of the section. It can be seen here.
Sizes
Block buttons
Button group
Checkbox & radio group
Pagination positions
The common banner image size other than in homepage is 1600x350px.
We have several types of navbar.
Default mode
It's a sticky navbar, the background color is #F7F7F7 and the text color is #252122. When we scroll down the page, the style remains the same. We can find this navbar in almost all CIFOR-ICRAF website pages.
Hybrid mode
It's a sticky navbar, the background color is transparent and the text color is #FFFFFF. When we scroll down the page, the style changes to the default one. We can find this navbar for example in Restoration for resilience website.
With megamenu
We can find this navbar for example in CIFOR-ICRAF main website.
The font icons that we use in CIFOR-ICRAF website is from Bootstrap icons
The Center for International Forestry Research is a non-profit scientific research organization that conducts research on the use and management of forests with a focus on tropical forests in developing countries.
There're 3 types of share buttons in CIFOR-ICRAF website. First is at the top right of the page. When you click it, it will expands the social media buttons. The second one is in the left sidebar of the page. And last one is inside of footer. Three of them can be found here.
Footer appears in all CIFOR-ICRAF website pages. It usually contains social media share buttons, CIFOR-ICRAF partners, boilerplate text, several repeating menus of navbar, office/project locations, contact emails, subscription form, and copyright. The locations of the content can be changed depending on the needs.
