Home Components

Components

by Gabrielle Loomis

BUTTONS

[noemi_button button_text=’Primary’ button_link=’#’ target=’_self’ outline=’no’ style=’primary’ ] [noemi_button button_text=’Secondary’ button_link=’#’ target=’_self’ outline=’no’ style=’secondary’ ] [noemi_button button_text=’Success’ button_link=’#’ target=’_self’ outline=’no’ style=’success’ ] [noemi_button button_text=’Info’ button_link=’#’ target=’_self’ outline=’no’ style=’info’ ] [noemi_button button_text=’Warning’ button_link=’#’ target=’_self’ outline=’no’ style=’warning’ ] [noemi_button button_text=’Danger’ button_link=’#’ target=’_self’ outline=’no’ style=’danger’ ] [noemi_button button_text=’Link’ button_link=’#’ target=’_self’ outline=’no’ style=’link’ ]

OUTLINE BUTTONS

[noemi_button button_text=’Primary’ button_link=’#’ target=’_self’ outline=’yes’ style=’primary’ ] [noemi_button button_text=’Secondary’ button_link=’#’ target=’_self’ outline=’yes’ style=’secondary’ ] [noemi_button button_text=’Success’ button_link=’#’ target=’_self’ outline=’yes’ style=’success’ ] [noemi_button button_text=’Info’ button_link=’#’ target=’_self’ outline=’yes’ style=’info’ ] [noemi_button button_text=’Warning’ button_link=’#’ target=’_self’ outline=’yes’ style=’warning’ ] [noemi_button button_text=’Danger’ button_link=’#’ target=’_self’ outline=’yes’ style=’danger’ ]

BUTTONS SIZES

[noemi_button button_text=’large Button’ button_link=’#’ target=’_self’ outline=’no’ style=’primary’ size=’large’ ] [noemi_button button_text=’large Button’ button_link=’#’ target=’_self’ outline=’no’ style=’secondary’ size=’large’ ]

[noemi_button button_text=’Small Button’ button_link=’#’ target=’_self’ outline=’no’ style=’primary’ size=’small’ ] [noemi_button button_text=’Small Button’ button_link=’#’ target=’_self’ outline=’no’ style=’secondary’ size=’small’ ]

IMAGES

ROUNDED

image-alignment-300x2001

THUMBNAIL

image-alignment-300x2001

CIRCLE

image-alignment-300x2001

CIRCLE FRAME

image-alignment-300x2001

ALERTS

[noemi_alert]Warning! Best check yo self, you’re not looking too good.[/noemi_alert]

[noemi_alert type=’error’]Oh snap! Change a few things up and try submitting again.[/noemi_alert]

[noemi_alert type=’success’]Well done! You successfully read this important alert message.[/noemi_alert]

[noemi_alert type=’info’]Heads up! This alert needs your attention, but it’s not super important.[/noemi_alert]

LINE TYPES





HIGHLIGHTS

Lorem ipsum dolor sit amet, [noemi_highlight primary_color=’no’]highlighted text[/noemi_highlight]. In fringilla libero dui, porttitor [noemi_highlight primary_color=’yes’]highlighted text[/noemi_highlight] dui tempor nec. Donec eleifend ligula non magna maximus, eget turpis . Donec purus eget dui faucibus congue. id dui ut felis mollis ornare. Phasellus maximus felis sapien, facilisis ultricies elit lacinia id.

DROPCUPS

[noemi_dropcup primary_color=’no’]L[/noemi_dropcup]orem ipsum dolor sit amet, link example. In fringilla libero dui, porttitor condimentum dui tempor nec. Donec eleifend ligula non magna maximus, eget vehicula turpis viverra. Donec luctus purus eget dui faucibus congue. Maecenas id dui ut felis mollis ornare. Phasellus maximus felis sapien, facilisis ultricies elit lacinia id.

[noemi_dropcup primary_color=’yes’]L[/noemi_dropcup]orem ipsum dolor sit amet, link example. In fringilla libero dui, porttitor condimentum dui tempor nec. Donec eleifend ligula non magna maximus, eget vehicula turpis viverra. Donec luctus purus eget dui faucibus congue. Maecenas id dui ut felis mollis ornare. Phasellus maximus felis sapien, facilisis ultricies elit lacinia id.

TOOLTIPS

[noemi_tooltip title=’Tooltip text’]Lorem ipsum[/noemi_tooltip] dolor sit amet, link example. In fringilla libero dui, porttitor condimentum dui tempor nec. Donec eleifend ligula non magna maximus, eget vehicula turpis viverra. Donec luctus purus eget dui faucibus congue. Maecenas id dui ut felis mollis ornare. Phasellus maximus felis sapien, facilisis ultricies elit lacinia id.

TABS

[noemi_tabs_wrapper type=’horizontal’] [noemi_tab_title_wrapper] [noemi_tab_title for=’1′]Tab 1[/noemi_tab_title] [noemi_tab_title for=’2′]Tab 2[/noemi_tab_title] [noemi_tab_title for=’3′]Tab 3[/noemi_tab_title] [noemi_tab_title for=’4′]Tab 4[/noemi_tab_title] [/noemi_tab_title_wrapper] [noemi_tab_content_wrapper] [noemi_tab_content id=’1′] Tab 1 content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet purus urna. Proin dictum fringilla enim, sit amet suscipit dolor dictum in. Maecenas porttitor, est et malesuada congue, ligula elit fermentum massa, sit amet porta odio est at velit. Sed nec turpis neque. Fusce at mi felis, sed interdum tortor. [/noemi_tab_content] [noemi_tab_content id=’2′] Tab 2 content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet purus urna. Proin dictum fringilla enim, sit amet suscipit dolor dictum in. Maecenas porttitor, est et malesuada congue, ligula elit fermentum massa, sit amet porta odio est at velit. Sed nec turpis neque. Fusce at mi felis, sed interdum tortor. [/noemi_tab_content] [noemi_tab_content id=’3′] Tab 3 content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet purus urna. Proin dictum fringilla enim, sit amet suscipit dolor dictum in. Maecenas porttitor, est et malesuada congue, ligula elit fermentum massa, sit amet porta odio est at velit. Sed nec turpis neque. Fusce at mi felis, sed interdum tortor. [/noemi_tab_content] [noemi_tab_content id=’4′] Tab 4 content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet purus urna. Proin dictum fringilla enim, sit amet suscipit dolor dictum in. Maecenas porttitor, est et malesuada congue, ligula elit fermentum massa, sit amet porta odio est at velit. Sed nec turpis neque. Fusce at mi felis, sed interdum tortor. [/noemi_tab_content] [/noemi_tab_content_wrapper] [/noemi_tabs_wrapper]

[noemi_tabs_wrapper type=’vertical’] [noemi_tab_title_wrapper] [noemi_tab_title for=’1′]Tab 1[/noemi_tab_title] [noemi_tab_title for=’2′]Tab 2[/noemi_tab_title] [noemi_tab_title for=’3′]Tab 3[/noemi_tab_title] [noemi_tab_title for=’4′]Tab 4[/noemi_tab_title] [/noemi_tab_title_wrapper] [noemi_tab_content_wrapper] [noemi_tab_content id=’1′] Tab 1 content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet purus urna. Proin dictum fringilla enim, sit amet suscipit dolor dictum in. Maecenas porttitor, est et malesuada congue, ligula elit fermentum massa, sit amet porta odio est at velit. Sed nec turpis neque. Fusce at mi felis, sed interdum tortor. [/noemi_tab_content] [noemi_tab_content id=’2′] Tab 2 content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet purus urna. Proin dictum fringilla enim, sit amet suscipit dolor dictum in. Maecenas porttitor, est et malesuada congue, ligula elit fermentum massa, sit amet porta odio est at velit. Sed nec turpis neque. Fusce at mi felis, sed interdum tortor. [/noemi_tab_content] [noemi_tab_content id=’3′] Tab 3 content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet purus urna. Proin dictum fringilla enim, sit amet suscipit dolor dictum in. Maecenas porttitor, est et malesuada congue, ligula elit fermentum massa, sit amet porta odio est at velit. Sed nec turpis neque. Fusce at mi felis, sed interdum tortor. [/noemi_tab_content] [noemi_tab_content id=’4′] Tab 4 content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet purus urna. Proin dictum fringilla enim, sit amet suscipit dolor dictum in. Maecenas porttitor, est et malesuada congue, ligula elit fermentum massa, sit amet porta odio est at velit. Sed nec turpis neque. Fusce at mi felis, sed interdum tortor. [/noemi_tab_content] [/noemi_tab_content_wrapper] [/noemi_tabs_wrapper]

TOGGLE

[noemi_toggle_wrapper] [noemi_toggle title=’Toggle Box Title 1′] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet purus urna. Proin dictum fringilla enim, sit amet suscipit dolor dictum in. Maecenas porttitor, est et malesuada congue, ligula elit fermentum massa, sit amet porta odio est at velit. Sed nec turpis neque. Fusce at mi felis, sed interdum tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet purus urna. Proin dictum fringilla enim, sit amet suscipit dolor dictum in. Maecenas porttitor, est et malesuada congue, ligula elit fermentum massa, sit amet porta odio est at velit. Sed nec turpis neque. Fusce at mi felis, sed interdum tortor. [/noemi_toggle] [noemi_toggle title=’Toggle Box Title 2′] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet purus urna. Proin dictum fringilla enim, sit amet suscipit dolor dictum in. Maecenas porttitor, est et malesuada congue, ligula elit fermentum massa, sit amet porta odio est at velit. Sed nec turpis neque. Fusce at mi felis, sed interdum tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet purus urna. Proin dictum fringilla enim, sit amet suscipit dolor dictum in. Maecenas porttitor, est et malesuada congue, ligula elit fermentum massa, sit amet porta odio est at velit. Sed nec turpis neque. Fusce at mi felis, sed interdum tortor. [/noemi_toggle] [noemi_toggle title=’Toggle Box Title 3′] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet purus urna. Proin dictum fringilla enim, sit amet suscipit dolor dictum in. Maecenas porttitor, est et malesuada congue, ligula elit fermentum massa, sit amet porta odio est at velit. Sed nec turpis neque. Fusce at mi felis, sed interdum tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet purus urna. Proin dictum fringilla enim, sit amet suscipit dolor dictum in. Maecenas porttitor, est et malesuada congue, ligula elit fermentum massa, sit amet porta odio est at velit. Sed nec turpis neque. Fusce at mi felis, sed interdum tortor. [/noemi_toggle] [/noemi_toggle_wrapper]