Component Library

The following are examples of components that you can choose from when designing web pages on byui.edu using Page Builder.

3: Banners

3: Banner Carousel

3: Complex Banner Carousel

5, 6, 7: Content Components

5: Tile Grid

5: Three Site Section

Three column icon 1

This is a Title

Lorem ipsum dolor sit amet, tation labore dolores sea et, clita platonem duo id, unum philosophia ex vim.

Three column icon 2

This is a Title

Lorem ipsum dolor sit amet, tation labore dolores sea et, clita platonem duo id, unum philosophia ex vim.

Three column icon 3

This is a Title

Lorem ipsum dolor sit amet, tation labore dolores sea et, clita platonem duo id, unum philosophia ex vim.

5: Card Grid

Card grid icon 1

This is a Title

Lorem ipsum dolor sit amet, quo amet vitae fastidii et, ei harum graeci inimicus.

Card grid icon 2

This is a Title

Lorem ipsum dolor sit amet, quo amet vitae fastidii et, ei harum graeci inimicus.

Card grid icon 3

This is a Title

Lorem ipsum dolor sit amet, quo amet vitae fastidii et, ei harum graeci inimicus.

Card grid icon 4

This is a Title

Lorem ipsum dolor sit amet, quo amet vitae fastidii et, ei harum graeci inimicus.

Card grid icon 5

This is a Title

Lorem ipsum dolor sit amet, quo amet vitae fastidii et, ei harum graeci inimicus.

Card grid icon 6

This is a Title

Lorem ipsum dolor sit amet, quo amet vitae fastidii et, ei harum graeci inimicus.

5: Four Site Section

Four site section icon example 1

This is a Title

Lorem ipsum dolor sit amet, quo amet vitae fastidii et, ei harum graeci inimicus.

Four site section icon example 2

This is a Title

Lorem ipsum dolor sit amet, quo amet vitae fastidii et, ei harum graeci inimicus.

Four site section icon example 3

This is a Title

Lorem ipsum dolor sit amet, quo amet vitae fastidii et, ei harum graeci inimicus.

Four site section icon example 4

This is a Title

Lorem ipsum dolor sit amet, quo amet vitae fastidii et, ei harum graeci inimicus.

5, 6, 7: Content Components


5: Site Section Vertical

Placeholder Title

Lorem ipsum dolor sit amet, in vide ferri evertitur quo, ne vis modus vitae ullamcorper. Option inermis mea et, vim ei detraxit mandamus. Habeo neglegentur eum ex. Cu vis everti viderer. Elitr gubergren duo cu, an sed errem ignota ridens.

Placeholder Title

Lorem ipsum dolor sit amet, in vide ferri evertitur quo, ne vis modus vitae ullamcorper. Option inermis mea et, vim ei detraxit mandamus. Habeo neglegentur eum ex. Cu vis everti viderer. Elitr gubergren duo cu, an sed errem ignota ridens.

Placeholder Title

Lorem ipsum dolor sit amet, in vide ferri evertitur quo, ne vis modus vitae ullamcorper. Option inermis mea et, vim ei detraxit mandamus. Habeo neglegentur eum ex. Cu vis everti viderer. Elitr gubergren duo cu, an sed errem ignota ridens.

Placeholder Title

Lorem ipsum dolor sit amet, in vide ferri evertitur quo, ne vis modus vitae ullamcorper. Option inermis mea et, vim ei detraxit mandamus. Habeo neglegentur eum ex. Cu vis everti viderer. Elitr gubergren duo cu, an sed errem ignota ridens.

6: Fixed Articles

These Stories are Fixed


This is the Story Headline

Lorem ipsum dolor sit amet, in vide ferri evertitur quo, ne vis modus vitae ullamcorper. Option inermis mea et, vim ei detraxit mandamus. Habeo neglegentur eum ex. Cu vis everti viderer. Elitr gubergren duo cu, an sed errem ignota ridens.

Read More

This is the Story Headline

Lorem ipsum dolor sit amet, in vide ferri evertitur quo, ne vis modus vitae ullamcorper. Option inermis mea et, vim ei detraxit mandamus. Habeo neglegentur eum ex. Cu vis everti viderer. Elitr gubergren duo cu, an sed errem ignota ridens.

Read More

6: News Component

News


November 17, 2017

Testing Center Final Exam Deadlines

Some reminders to faculty members about when to submit materials to the Testing Center for finals.

Read More

November 14, 2017

Shared Scholarship Lecture

Physics Department chair Stephen McNeil will present a Shared Scholarship Lecture on Results of Experiments of the Recent Total Solar Eclipse.

Read More

November 10, 2017

Leadership Change

Kerry Huber has been announced as the new chair of the Department of Animal and Food Sciences.

Read More

7: Callout Box

7: Block Quote Box

7: Collapsible Menu

Lorem ipsum dolor sit amet, tation labore dolores sea et, clita platonem duo id, unum philosophia ex vim. Usu ad diam adhuc inani, pro tamquam phaedrum te. Eu mel quod aliquip. Ornatus epicuri eum ut, has idque congue tractatos eu, vim congue commodo ei. Mea vitae fastidii omittantur ad. Iuvaret consetetur deterruisset et quo, ne sumo eligendi. Ei vis case idque interesset, nec at errem iudicabit cotidieque.

Lorem ipsum dolor sit amet, tation labore dolores sea et, clita platonem duo id, unum philosophia ex vim. Usu ad diam adhuc inani, pro tamquam phaedrum te. Eu mel quod aliquip. Ornatus epicuri eum ut, has idque congue tractatos eu, vim congue commodo ei. Mea vitae fastidii omittantur ad. Iuvaret consetetur deterruisset et quo, ne sumo eligendi. Ei vis case idque interesset, nec at errem iudicabit cotidieque.

Lorem ipsum dolor sit amet, tation labore dolores sea et, clita platonem duo id, unum philosophia ex vim. Usu ad diam adhuc inani, pro tamquam phaedrum te. Eu mel quod aliquip. Ornatus epicuri eum ut, has idque congue tractatos eu, vim congue commodo ei. Mea vitae fastidii omittantur ad. Iuvaret consetetur deterruisset et quo, ne sumo eligendi. Ei vis case idque interesset, nec at errem iudicabit cotidieque.

Lorem ipsum dolor sit amet, tation labore dolores sea et, clita platonem duo id, unum philosophia ex vim. Usu ad diam adhuc inani, pro tamquam phaedrum te. Eu mel quod aliquip. Ornatus epicuri eum ut, has idque congue tractatos eu, vim congue commodo ei. Mea vitae fastidii omittantur ad. Iuvaret consetetur deterruisset et quo, ne sumo eligendi. Ei vis case idque interesset, nec at errem iudicabit cotidieque.

2: Video Elements

5: FAQ

FAQs


Q.

What is a question?

This is the answer to the question above.



Q.

What is a question?

This is the answer to the question above.



Q.

What is a question?

This is the answer to the question above.




4: Sidebar Components


4: Action Box

4: Contact Box

4: Department Ad

4: Highlighted Links

4: Important Dates

4: Social Media Box

7: Block Quote Box

4: University Message

View the University Message tutorial.

2: Image

Image of boy and girl talking

Side Navigation and Text Components


4: Side Navigation

Side Navigation Example
Test Page One Test Page Two Test Page Three

1: HEADINGS

1: Heading 2

1: Heading 3

1: Heading 4

1: Heading 5
1: Heading 6

1: OPEN PARAGRAPH

1: Open Paragraph Lorem ipsum dolor sit amet, pri ei nostrud euismod definitiones. In elit mnesarchum, aliquip denique ancillae pri in, ex labitur argumentum nec. Eos percipitur.

1: OPEN SENTENCE

1: Open Sentence Lorem ipsum dolor sit amet, pri ei nostrud euismod definitiones. 

1: BODY COPY

1: Body Copy

Lorem ipsum dolor sit amet, pri ei nostrud euismod definitiones. In elit mnesarchum, aliquip denique ancillae pri in, ex labitur argumentum nec. Eos percipitur definitiones an, mea cetero inciderint ad, ius et eros vituperata. An vis putant atomorum imperdiet.

1: LIST

  1. Ordered List Item

  2. Ordered List Item

  3. Ordered List Item

  4. Ordered List Item

  • Unordered List Item

  • Unordered List Item

  • Unordered List Item

  • Unordered List Item

  • Inline List Item

  • Inline List Item

  • Inline List Item

  • Inline List Item

  • Unstyled List Item

  • Unstyled List Item

  • Unstyled List Item

  • Unstyled List Item

Heading 1 Heading 2 Heading 3 Heading 4 Heading 5
1a 1b 1c 1d 1e
2a 2b 2c 2d 2e