The README is not handling the embedded tags properly. Here's a fixed version (with some typos also corrected):

byu-card

This is an individual card or tile component, meant to be listed on a landing page or other listing page with many cards.

To Use:

A. Drupal: Use the module Views Card D7 -
Enable the module, and create a view. The style is defined within the view.

B. Not Drupal:

1. Reference the js and css file for byu-card
2. Place your content inside <byu-card> tags. Your content should be a direct child to the <byu-card> tag. See the demo at https://github.com/byuweb/byu-card/blob/master/my-component/demo.html

Styling Options:

Default Styling:
There will be padding around all elements but <img> tags. If you put your <img> inside of another <div> or <p>, it will have padding around it and it won't extend to the edge nicely. If you aren't able to strip these wrapping <div>'s around your image, add the class 'image' to the direct child of <byu-card>.

<byu-card>
  <div class="image">
    <img src="someimage.jpg"...>
  </div>
</byu-card>

There is a light box shadow, with a darker box shadow on hover.

Text & Font: <byu-card> doesn't style the text differently. If you want titles or styled headings in your card, we suggest using <h2>'s or <h3>'s. The styling and fonts there will be set by your normal theming elsewhere in your website.

ALIGNMENT: Default is center. You can change it to left aligned by A) using the setting in Drupal Views or B) using code on your container element. This is not changed on the element, but on its parent container.

BORDER (COMING SOON): This can be changed by adding the class 'border-gray' or 'border-navy' to your <byu-card> element. You can also change the border radius by using the class 'border-small' or 'border-large'. Default border radius is 0. Small is 10px, Large is 25px.

Example Code

Feel free to look at the included DEMO file and copy this to start with:
https://github.com/byuweb/byu-card/blob/master/my-component/demo.html

We wrap <byu-card> in a container, which we style with flex. The styling here is however you'd like, although we do have a default example here.

One-Line Summary

Safari throws a parse error when attempting to get 'https://cdn.byu.edu/byu-card/latest/byu-card.js'

Websites Affected

orca.byu.edu/resourcetest.html
If this is a bug or styling issue, please list one or more URLs where
we can see the issue.

Issue Type

Is this (add an x in the boxes that apply)

• [] A difference between the components and the Official Specification?
• A bug, such as a Javascript error, or the UI not rendering properly
  on a page?
• Inconsistent appearance/behavior between browsers?
• An issue on mobile browsers?
• A request for a new feature/enhancement?

Browsers Affected

Add an x in all the boxes that apply. Please mark desktop and mobile
browsers separately.

We support the last two versions of Chrome, Firefox, Safari, and Edge,
plus Internet Explorer 11.

Desktop Browsers

• Google Chrome
• Mozilla Firefox
• Apple Safari
• Microsoft Edge
• Microsoft Internet Explorer 11
• Other (please specify)

Mobile Browsers

• Any browser on iOS
• Chrome for Android
• Firefox Mobile for Android
• Other (please specify)

Web Site Platform

What is hosting your website?

• Drupal 7
• Drupal 8
• Wordpress
• Custom Site
• Don't Know

Detailed Description

Tell us all about your problem or feature proposal.
Safari is not loading some or all of the components styling and it is throwing parse errors and syntax errors for the following:

The byu-card component is not loading at all on the page and no styling other than my own fix is working on the page.
If the issue is with styling, please include screenshots!

What it looks like in chrome and firefox

What safari does

What I am using for connecting with the cdn:
rel="stylesheet" href="https://cdn.byu.edu/byu-theme-components/latest/byu-theme-components.min.css"
rel="stylesheet" href="https://cdn.byu.edu/byu-card/latest/byu-card.js"

We've got some great resources available to help people know how to use the header, footer, and other BYU web components. In contrast, this card system doesn't have a detailed README, project wiki, link to relevant documentation, etc. As a potential user, I'm not sure I know how to use it.

While trying to implement this card component, I found that our current Content Security Policy was interfering with proper rendering. It looks like this requires unsafe-eval to be included.

Layouts

• Default: layout="normal"
• layout="feature"

Slots

• <h2 slot="title" background="Drupal Blue, gray, dark gray, .NET green, navy, Royal blue" without-logo>
• <img slot="left">
• <p slot="right">
• <p slot="center">

Make sure it is not a breaking change!