You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
NOTE
On mobile please go to 1 column of names.
The designs show the image hover on "Jamie Ford".
Slots
None.
Props
props: {
items: {
// The list of talent. Can use mock API `directors` for these. Use the `featuredImage` for hover.
type: Array,
default: () => []
}
}
Developer Tips
The trick will be getting the columns aligning correctly. Note the component should align vertically, and horizontally. The last column should align to the right edge of screen when sized similar to the design. If the list of names isn't the ideal length, the last column of names should align to the top of the previous column.
--color-yellow for the font color
--color-white for the font hover color
Use unit-gap css var for padding on sides.
Please have a max width of 1280px for the entire component.
Please set min-height to unit-100vh.
Events
None.
Required components
Use wp-image for the background image. Set it to mode="fullbleed" and use `position: absolute" with a height and width set to have it size correctly. Alternatively, use a regular image tag if you want, be sure to use src-set correct.
Each name should be a nuxt-link.
Screenshots
The text was updated successfully, but these errors were encountered:
@drewbaker it looks like ~/assets/svg/logo-funkhaus is missing which is causing an error when storybook is trying to build the GlobalHamburger.stories.js story. Currently I have the import in GlobalHamburger.stories.js commented out as a workaround. I know submitting a PR with changes outside the assigned component is against best practices. I noticed that in the example PR that the developer went through the history to find the image but that option also feels like it would be making a change outside of the assigned component. I figured I'd ask to see if you had a preferred way of handling situations like this? Unless this is part of the test. If so, just tell me to figure it out ;) Thanks
Component Description
This component is used on the home page to show a list of links with talent names. On hover of a name, it will show a featured image for that talent.
Design
Please also see attached screenshots for quick reference.
NOTE
On mobile please go to 1 column of names.
The designs show the image hover on "Jamie Ford".
Slots
None.
Props
Developer Tips
The trick will be getting the columns aligning correctly. Note the component should align vertically, and horizontally. The last column should align to the right edge of screen when sized similar to the design. If the list of names isn't the ideal length, the last column of names should align to the top of the previous column.
--color-yellow
for the font color--color-white
for the font hover colormin-height
tounit-100vh
.Events
None.
Required components
wp-image
for the background image. Set it tomode="fullbleed"
and use `position: absolute" with a height and width set to have it size correctly. Alternatively, use a regular image tag if you want, be sure to use src-set correct.nuxt-link
.Screenshots
The text was updated successfully, but these errors were encountered: