A Secondary Text Test
JDG SVELTE UI is an in-progress UI framework by
Joshua Dean Goldstein.
Standard usages and tests of components are below.
Enjoy!
VERSIONS
VersionPackageJson
Gets the version field of the package.json from a repo.
To demo, here's the version of JDG UI SVELTE and all consuming websites:
IMAGES
We've got lots of image components!
IMAGE
No fill container, show blur, show caption/attribution
Inside BodyCopy
IMAGE
This is a .gif, and won't get the height or width optimized if it's Cloudinary (for some reason,
that causes an error).
IMAGE TILE
No fill container, show blur, show caption/attribution
Inside BodyCopy
IMAGE TILE
No fill container, no blur in unfilled space
Inside BodyCopy
IMAGE TILE
No fill container, no blur in unfilled space, no caption/attr
Clicking goes to "./about"
IMAGE TILE
Clicking goes to Google but in a new tab. It also shows a label.
IMAGE TILE
The label on this ImageTile is centered.
IMAGE TILE
With label and custom label background color. Also has a custom "pre-label."
IMAGE TILE
No blur allowed in imageMeta
IMAGE FULL WIDTH
IMAGE CAROUSEL
in a full-width container
Note that the 2nd image will not have a blur
Our custom algorithm approximates the building locations based on actual addresses, then adjusts their locations on the platform to minimize overlap and maximize visibility.
The Cityscape model is occasionally updated as Denver's skyline changes. Check the version number on the bottom of the product and match it with the legend below.
IMAGE COMPARE
in a full-width container
GRID LAYOUTS
2 ITEMS
3+ ITEMS
compactModeOnMobile true:
3+ ITEMS
compactModeOnMobile false:
HYBRID GRID/CAROUSEL
3+ ITEMS
(will become ImageCarousel on smallest breakpoint)
TITLES + SUBHEADERS
This is a colorful subtitle
THIS IS AN H3 STRING
And this is an h4
PARAMETRIX3D
Generative 3D-printed products
LEGACY ARCHITECTURE
2012-2015
CUSTOM ID
Sets a custom ID for AnchorTag
And this is body copy!
BODY COPY
This JDGBodyCopy has a text color override. And a hyperlink for testing! The hyperlink should have the same color as the text.
This JDGBodyCopy has a text color override and simple hyperlinks. And a hyperlink for testing! The hyperlink should remain the "simple hyperlink" color.
This body copy has regular hyperlink styles. They're useful for short words, no more than a few at a time.
This body copy has simplified hyperlink styles. These are useful for longer sections of text which might be hyperlinks but could also wrap.
ACCENT BLOCKS
Accent blocks can be used with a couple of different approaches:
Composite, high-contrast
"A very important quote."
- John K. Doe
This is
ANOTHER EXAMPLE
for fun!
- Uses composite component AccentBlockWithText
- Adjusts the background color automatically for max contrast with the given text color
Manually-assembled
This accent text
demonstrates the no-quote type.
- Assembled manually using two components: AccentBlock and AccentText
- Does not adjust the background color automatically for most contrast
BUTTONS
Varying widths:
Consistent width:
Square aspect ratio:
FEATURE CARD
INCREDIBLE GAMEPLAY
Displays a colorful rectangle containing an imageTile and description text.
NICE TO MEET YOU
This section tests the floating content box. The title should balance itself thanks to text-wrap: balance;.
"Another quote."
Another Someone, 1998
"The people of the City of Englewood want this mall in their community."
Gerri Von Frellick, 1960
