Skip to content

Frontend Components

Radicle Docs

This route is used for demonstration purposes. It is registered from routes/web.php and the template is located at resources/views/components.blade.php.

Components

Components live in the resources/views/components directory.

Typography

Header 1

This is a subtitle for header 1

Lorem ipsum dolor sit amet, nihil detraxit comprehensam ne eum, vis no adhuc corrumpit. Alienum appareat ut pri. Ius everti inermis denique an, diam alterum saperet id eosed. Et albucius facilisis cum, sanctus percipit ei vel. Vim no causae senserit, ne utroque inermis repudiandae mea, ne has meis accusamus. No graeco consti insolens adolescens ius. This is an inline text link, which hovers like this.

Header 2

This is a subtitle for header 2

Lorem ipsum dolor sit amet, nihil detraxit comprehensam ne eum, vis no adhuc corrumpit. Alienum appareat ut pri. Ius everti inermis denique an, diam alterum saperet id eosed. Et albucius facilisis cum, sanctus percipit ei vel. Vim no causae senserit, ne utroque inermis repudiandae mea, ne has meis accusamus. No graeco consti insolens adolescens ius. This is an inline text link, which hovers like this.

Header 3

Lorem ipsum dolor sit amet, nihil detraxit comprehensam ne eum, vis no adhuc corrumpit. Alienum appareat ut pri. Ius everti inermis denique an, diam alterum saperet id eosed. Et albucius facilisis cum, sanctus percipit ei vel. Vim no causae senserit, ne utroque inermis repudiandae mea, ne has meis accusamus. No graeco consti insolens adolescens ius. This is an inline text link, which hovers like this.

Header 4

Lorem ipsum dolor sit amet, nihil detraxit comprehensam ne eum, vis no adhuc corrumpit. Alienum appareat ut pri. Ius everti inermis denique an, diam alterum saperet id eosed. Et albucius facilisis cum, sanctus percipit ei vel. Vim no causae senserit, ne utroque inermis repudiandae mea, ne has meis accusamus. No graeco consti insolens adolescens ius. This is an inline text link, which hovers like this.

Header 5

Lorem ipsum dolor sit amet, nihil detraxit comprehensam ne eum, vis no adhuc corrumpit. Alienum appareat ut pri. Ius everti inermis denique an, diam alterum saperet id eosed. Et albucius facilisis cum, sanctus percipit ei vel. Vim no causae senserit, ne utroque inermis repudiandae mea, ne has meis accusamus. No graeco consti insolens adolescens ius. This is an inline text link, which hovers like this.

Header 6

Lorem ipsum dolor sit amet, nihil detraxit comprehensam ne eum, vis no adhuc corrumpit. Alienum appareat ut pri. Ius everti inermis denique an, diam alterum saperet id eosed. Et albucius facilisis cum, sanctus percipit ei vel. Vim no causae senserit, ne utroque inermis repudiandae mea, ne has meis accusamus. No graeco consti insolens adolescens ius. This is an inline text link, which hovers like this.

Lists

Unordered List

  • List item with enough content to run on two lines and clearly illustrate what spacing is from line-height and what spacing is from a margin-bottom.
  • List item
  • List item
    • Nested list item
    • Nested list item
    • Nested list item
  • List item
  • List item
  • List item

Ordered List

  1. Cheese (essential)
  2. Pepperoni
  3. Bacon
    1. Normal bacon
    2. Canadian bacon
  4. Sausage
  5. Onions
  6. Mushrooms

Definition List

Time
The indefinite continued progress of existence and events in the past, present, and future as a whole.
Space
A continuous area or expanse that is free, available, or unoccupied. The dimensions of height, depth, and width within which all things exist and move.

Lorem ipsum dolor sit amet, nihil detraxit comprehensam ne eum, vis no adhuc corrumpit. Alienum appareat ut pri. Ius everti inermis denique an, diam alterum saperet id eosed. Et albucius facilisis cum, sanctus percipit ei vel. Vim no causae senserit, ne utroque inermis repudiandae mea, ne has meis accusamus. No graeco consti insolens adolescens ius. This is an inline text link, which hovers like this.

Horizontal Rule

This shows a horizontal rule style to break up sections without using a header. Please note that it extends right more than the paragraph text. Est te semper aperiam inermis. An eruditi saperet legendos quo, aeque copiosae at mel.


Lorem ipsum dolor sit amet, nihil detraxit comprehensam ne eum, vis no adhuc corrumpit. Alienum appareat ut pri. Ius everti inermis denique an, diam alterum saperet id eosed. Et albucius facilisis cum, sanctus percipit ei vel. Vim no causae senserit, ne utroque inermis repudiandae mea, ne has meis accusamus. No graeco consti insolens adolescens ius. This is an inline text link, which hovers like this.

Figure

Est te semper aperiam inermis. An eruditi saperet legendos quo, aeque copiosae at mel. Solum salutatus pertinacia vix at, solet munere laboramus id vis. Cum elit novum ea, fuisset accumsan voluptaria ei vix.

...

Suspendisse potenti. Vivamus et magna sed elit bibendum laoreet. Aenean fermentum sem in quam suscipit, vel porttitor leo mollis. Etiam ultricies fermentum rutrum.

Attribution

Est te semper aperiam inermis. An eruditi saperet legendos quo, aeque copiosae at mel. Solum salutatus pertinacia vix at, solet munere laboramus id vis. Cum elit novum ea, fuisset accumsan voluptaria ei vix.

Est te semper aperiam inermis. An eruditi saperet legendos quo, aeque copiosae at mel. Solum salutatus pertinacia vix at, solet munere laboramus id vis. Cum elit novum ea, fuisset accumsan voluptaria ei vix.

Est te semper aperiam inermis. An eruditi saperet legendos quo, aeque copiosae at mel. Solum salutatus pertinacia vix at, solet munere laboramus id vis. Cum elit novum ea, fuisset accumsan voluptaria ei vix.

Slider

Est te semper aperiam inermis. An eruditi saperet legendos quo, aeque copiosae at mel. Solum salutatus pertinacia vix at, solet munere laboramus id vis. Cum elit novum ea, fuisset accumsan voluptaria ei vix.

[]
...

Suspendisse potenti. Vivamus et magna sed elit bibendum laoreet. Aenean fermentum sem in quam suscipit, vel porttitor leo mollis. Etiam ultricies fermentum rutrum.

Attribution
...

Suspendisse potenti. Vivamus et magna sed elit bibendum laoreet. Aenean fermentum sem in quam suscipit, vel porttitor leo mollis. Etiam ultricies fermentum rutrum.

Attribution
...

Suspendisse potenti. Vivamus et magna sed elit bibendum laoreet. Aenean fermentum sem in quam suscipit, vel porttitor leo mollis. Etiam ultricies fermentum rutrum.

Attribution

Est te semper aperiam inermis. An eruditi saperet legendos quo, aeque copiosae at mel. Solum salutatus pertinacia vix at, solet munere laboramus id vis. Cum elit novum ea, fuisset accumsan voluptaria ei vix.

Video

Est te semper aperiam inermis. An eruditi saperet legendos quo, aeque copiosae at mel. Solum salutatus pertinacia vix at, solet munere laboramus id vis. Cum elit novum ea, fuisset accumsan voluptaria ei vix.

Suspendisse potenti. Vivamus et magna sed elit bibendum laoreet. Aenean fermentum sem in quam suscipit, vel porttitor leo mollis. Etiam ultricies fermentum rutrum.

Attribution

Est te semper aperiam inermis. An eruditi saperet legendos quo, aeque copiosae at mel. Solum salutatus pertinacia vix at, solet munere laboramus id vis. Cum elit novum ea, fuisset accumsan voluptaria ei vix.

Blockquote

Est te semper aperiam inermis. An eruditi saperet legendos quo, aeque copiosae at mel. Solum salutatus pertinacia vix at, solet munere laboramus id vis. Cum elit novum ea, fuisset accumsan voluptaria ei vix.

Suspendisse potenti. Vivamus et magna sed elit bibendum laoreet. Aenean fermentum sem in quam suscipit, vel porttitor leo mollis. Etiam ultricies fermentum rutrum.

Attribution

Est te semper aperiam inermis. An eruditi saperet legendos quo, aeque copiosae at mel. Solum salutatus pertinacia vix at, solet munere laboramus id vis. Cum elit novum ea, fuisset accumsan voluptaria ei vix.

Aside

Lorem ipsum dolor sit amet, nihil detraxit comprehensam ne eum, vis no adhuc corrumpit. Alienum appareat ut pri. Ius everti inermis denique an, diam alterum saperet id eosed. Et albucius facilisis cum, sanctus percipit ei vel. Vim no causae senserit, ne utroque inermis repudiandae mea, ne has meis accusamus. No graeco consti insolens adolescens ius. This is an inline text link, which hovers like this.

Lorem ipsum dolor sit amet, nihil detraxit comprehensam ne eum, vis no adhuc corrumpit. Alienum appareat ut pri. Ius everti inermis denique an, diam alterum saperet id eosed. Et albucius facilisis cum, sanctus percipit ei vel. Vim no causae senserit, ne utroque inermis repudiandae mea, ne has meis accusamus. No graeco consti insolens adolescens ius. This is an inline text link, which hovers like this.

Lorem ipsum dolor sit amet, nihil detraxit comprehensam ne eum, vis no adhuc corrumpit. Alienum appareat ut pri. Ius everti inermis denique an, diam alterum saperet id eosed. Et albucius facilisis cum, sanctus percipit ei vel. Vim no causae senserit, ne utroque inermis repudiandae mea, ne has meis accusamus. No graeco consti insolens adolescens ius. This is an inline text link, which hovers like this.

Lorem ipsum dolor sit amet, nihil detraxit comprehensam ne eum, vis no adhuc corrumpit. Alienum appareat ut pri. Ius everti inermis denique an, diam alterum saperet id eosed. Et albucius facilisis cum, sanctus percipit ei vel. Vim no causae senserit, ne utroque inermis repudiandae mea, ne has meis accusamus. No graeco consti insolens adolescens ius. This is an inline text link, which hovers like this.

Lorem ipsum dolor sit amet, nihil detraxit comprehensam ne eum, vis no adhuc corrumpit. Alienum appareat ut pri. Ius everti inermis denique an, diam alterum saperet id eosed. Et albucius facilisis cum, sanctus percipit ei vel. Vim no causae senserit, ne utroque inermis repudiandae mea, ne has meis accusamus. No graeco consti insolens adolescens ius. This is an inline text link, which hovers like this.

Lorem ipsum dolor sit amet, nihil detraxit comprehensam ne eum, vis no adhuc corrumpit. Alienum appareat ut pri. Ius everti inermis denique an, diam alterum saperet id eosed. Et albucius facilisis cum, sanctus percipit ei vel. Vim no causae senserit, ne utroque inermis repudiandae mea, ne has meis accusamus. No graeco consti insolens adolescens ius. This is an inline text link, which hovers like this.

Lorem ipsum dolor sit amet, nihil detraxit comprehensam ne eum, vis no adhuc corrumpit. Alienum appareat ut pri. Ius everti inermis denique an, diam alterum saperet id eosed. Et albucius facilisis cum, sanctus percipit ei vel. Vim no causae senserit, ne utroque inermis repudiandae mea, ne has meis accusamus. No graeco consti insolens adolescens ius. This is an inline text link, which hovers like this.

Lorem ipsum dolor sit amet, nihil detraxit comprehensam ne eum, vis no adhuc corrumpit. Alienum appareat ut pri. Ius everti inermis denique an, diam alterum saperet id eosed. Et albucius facilisis cum, sanctus percipit ei vel. Vim no causae senserit, ne utroque inermis repudiandae mea, ne has meis accusamus. No graeco consti insolens adolescens ius. This is an inline text link, which hovers like this.

Accordions

Est te semper aperiam inermis. An eruditi saperet legendos quo, aeque copiosae at mel. Solum salutatus pertinacia vix at, solet munere laboramus id vis. Cum elit novum ea, fuisset accumsan voluptaria ei vix.

Est te semper aperiam inermis

Suspendisse potenti. Vivamus et magna sed elit bibendum laoreet. Aenean fermentum sem in quam suscipit, vel porttitor leo mollis. Etiam ultricies fermentum rutrum.

Est te semper aperiam inermis

Suspendisse potenti. Vivamus et magna sed elit bibendum laoreet. Aenean fermentum sem in quam suscipit, vel porttitor leo mollis. Etiam ultricies fermentum rutrum.

Est te semper aperiam inermis

Suspendisse potenti. Vivamus et magna sed elit bibendum laoreet. Aenean fermentum sem in quam suscipit, vel porttitor leo mollis. Etiam ultricies fermentum rutrum.

Est te semper aperiam inermis. An eruditi saperet legendos quo, aeque copiosae at mel. Solum salutatus pertinacia vix at, solet munere laboramus id vis. Cum elit novum ea, fuisset accumsan voluptaria ei vix.

Table

Est te semper aperiam inermis. An eruditi saperet legendos quo, aeque copiosae at mel. Solum salutatus pertinacia vix at, solet munere laboramus id vis. Cum elit novum ea, fuisset accumsan voluptaria ei vix.

Tables can have captions now.
Person Number Third Column
Someone Lastname 900 Nullam quis risus eget urna mollis ornare vel eu leo.
Person Name 1200 Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.
Another Person 1500 Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam id dolor id nibh ultricies vehicula ut id elit.
Last One 2800 Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.

Est te semper aperiam inermis. An eruditi saperet legendos quo, aeque copiosae at mel. Solum salutatus pertinacia vix at, solet munere laboramus id vis. Cum elit novum ea, fuisset accumsan voluptaria ei vix.

Social Share

Card - Default

This card is used at the bottom of the Department archives.

Card - Square

This card is used in the Story Grid component on the homepage, as well as on the Department archives.

Card - Cover

This card is used for the cover story on the homepage.

The Real Top Gun

Est te semper aperiam inermis. An eruditi saperet legendos quo, aeque copiosae at mel. Solum salutatus pertinacia vix at.

Card - Feature

This card is used to display the feature stories on the homepage, as well as on the Department archives.

Card - Department

This card is the same as .card--feature, except it includes the department meta. It's used in the Story List component on the homepage.

Card - Horizontal

This card style is used on the search page.

Card - Issue

This card is used on the Issue archive.

Card - Editorial

This card is used on the Issue archive. 2 story posts, auto width layout from the head of school.

Part of what makes us all human are the various ways in which we bring faith into our lives, ways in which we trust in things we can’t fully explain or fathom...

Part of what makes us all human are the various ways in which we bring faith into our lives, ways in which we trust in things we can’t fully explain or fathom...

Card - Collection

This card is used on the Issue archive. 3 Collection posts with a red background.

Card - Spotlight

This card is used on the Issue archive. 1 Collection post excerpt with a red background.

Op - ed

“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo velit mollis, cursus arcu in, tristique ex. Integer tristique efficitur tortor, ac feugiat purus ullamcorper quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo velit mollis, cursus arcu in, tristique ex. Integer tristique efficitur tortor, ac feugiat purus ullamcorper quis.”

Rob Reinalda '76

This is used on Pages and archives.

Story Header

This is used on story posts. The featured image styles (.story-header__figure) are handled in grid css.

...
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin luctus laoreet lacinia.
Proin luctus
Fall 23 Features

Story Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin luctus laoreet lacinia. Etiam fringilla tellus eget sagittis accumsan.

Collection Header

This is used on collection posts.

Collection Title

Collection Story

This is a heading

...

Lead paragraph with color. Quisque placerat turpis sed maximus mollis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.

Lead paragraph. Quisque placerat turpis sed maximus mollis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.

Quisque placerat

Quisque placerat turpis sed maximus mollis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aliquam justo ipsum, elementum nec leo eu, scelerisque maximus diam. Curabitur consequat blandit nisi, vehicula condimentum odio placerat id. Donec eget ante bibendum, molestie purus in, varius libero. Nulla eget risus et felis pretium posuere. Aenean in felis feugiat, pretium neque nec, finibus nibh. Integer fringilla, diam aliquet vulputate malesuada, turpis nibh efficitur urna, et pharetra tortor urna eget augue. Suspendisse pulvinar quam elit, vel sagittis justo ultricies ut. Ut eros urna, auctor et laoreet vel, vulputate quis est. Curabitur a consequat turpis. Nulla purus ipsum, finibus in sapien in, fermentum dapibus nisi. Vestibulum blandit lectus ut lacus interdum, nec ornare nibh eleifend.

Quisque placerat

Quisque placerat turpis sed maximus mollis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aliquam justo ipsum, elementum nec leo eu, scelerisque maximus diam. Curabitur consequat blandit nisi, vehicula condimentum odio placerat id. Donec eget ante bibendum, molestie purus in, varius libero. Nulla eget risus et felis pretium posuere. Aenean in felis feugiat, pretium neque nec, finibus nibh. Integer fringilla, diam aliquet vulputate malesuada, turpis nibh efficitur urna, et pharetra tortor urna eget augue. Suspendisse pulvinar quam elit, vel sagittis justo ultricies ut. Ut eros urna, auctor et laoreet vel, vulputate quis est. Curabitur a consequat turpis. Nulla purus ipsum, finibus in sapien in, fermentum dapibus nisi. Vestibulum blandit lectus ut lacus interdum, nec ornare nibh eleifend.

Quisque placerat

Quisque placerat turpis sed maximus mollis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aliquam justo ipsum, elementum nec leo eu, scelerisque maximus diam. Curabitur consequat blandit nisi, vehicula condimentum odio placerat id. Donec eget ante bibendum, molestie purus in, varius libero. Nulla eget risus et felis pretium posuere. Aenean in felis feugiat, pretium neque nec, finibus nibh. Integer fringilla, diam aliquet vulputate malesuada, turpis nibh efficitur urna, et pharetra tortor urna eget augue. Suspendisse pulvinar quam elit, vel sagittis justo ultricies ut. Ut eros urna, auctor et laoreet vel, vulputate quis est. Curabitur a consequat turpis. Nulla purus ipsum, finibus in sapien in, fermentum dapibus nisi. Vestibulum blandit lectus ut lacus interdum, nec ornare nibh eleifend.

  • List item with enough content to run on two lines and clearly illustrate what spacing is from line-height and what spacing is from a margin-bottom.
  • List item with enough content to run on two lines and clearly illustrate what spacing is from line-height and what spacing is from a margin-bottom.
  • List item with enough content to run on two lines and clearly illustrate what spacing is from line-height and what spacing is from a margin-bottom.
  1. List item with enough content to run on two lines and clearly illustrate what spacing is from line-height and what spacing is from a margin-bottom.
  2. List item with enough content to run on two lines and clearly illustrate what spacing is from line-height and what spacing is from a margin-bottom.
  3. List item with enough content to run on two lines and clearly illustrate what spacing is from line-height and what spacing is from a margin-bottom.
...

Etiam ultricies fermentum rutrum.

Attribution

Quisque placerat turpis sed maximus mollis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.

- Vestibulum ante ipsum primis in faucibus orci luctus et.
Dickinson House - 0

Tab content - 0. Quisque placerat turpis sed maximus mollis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.

Crystal Dunn - 0
Dickinson House - 1

Tab content - 1. Quisque placerat turpis sed maximus mollis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.

Crystal Dunn - 1
Dickinson House - 2

Tab content - 2. Quisque placerat turpis sed maximus mollis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.

Crystal Dunn - 2
Dickinson House - 3

Tab content - 3. Quisque placerat turpis sed maximus mollis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.

Crystal Dunn - 3
Dickinson House - 4

Tab content - 4. Quisque placerat turpis sed maximus mollis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.

Crystal Dunn - 4
Dickinson House - 5

Tab content - 5. Quisque placerat turpis sed maximus mollis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.

Crystal Dunn - 5
Dickinson House - 6

Tab content - 6. Quisque placerat turpis sed maximus mollis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.

Crystal Dunn - 6
Dickinson House - 7

Tab content - 7. Quisque placerat turpis sed maximus mollis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.

Crystal Dunn - 7
Dickinson House - 8

Tab content - 8. Quisque placerat turpis sed maximus mollis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.

Crystal Dunn - 8
Dickinson House - 9

Tab content - 9. Quisque placerat turpis sed maximus mollis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.

Crystal Dunn - 9
Dickinson House - 10

Tab content - 10. Quisque placerat turpis sed maximus mollis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.

Crystal Dunn - 10
Dickinson House - 11

Tab content - 11. Quisque placerat turpis sed maximus mollis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.

Crystal Dunn - 11
Dickinson House - 12

Tab content - 12. Quisque placerat turpis sed maximus mollis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.

Crystal Dunn - 12
Dickinson House - 13

Tab content - 13. Quisque placerat turpis sed maximus mollis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.

Crystal Dunn - 13
Dickinson House - 14

Tab content - 14. Quisque placerat turpis sed maximus mollis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.

Crystal Dunn - 14

Forms

We'll never share your email with anyone else.






Buttons

The core/button block is rendered with the x-button Blade component.

<x-button href="#">Button</x-button>
Button
<x-button type="outline" href="#">Button</x-button>
Button

Modals

The radicle/modal block is rendered with the x-modal Blade component.

<x-modal title="Modal Title">
    <x-slot name="button">Open modal</x-slot>
    Example modal
</x-modal>

Example modal