Next.js Conf 2020

Next.js Conf 2020 Next.js Conf Ticket Ticket Card Component

Next.js Conf 2020

Next.js Conf Ticket

​​https://nextjs.org/conf​​

Conf Schedule

​​https://confs.tech/javascript​​

Ticket Card Component

Web Components / npm package / Flutter package

svg icons + css 3 background: linear-gradient

<div class="conf-logo_header-icons__TAh2z">
<div class="conf-logo_icon-background__3xSbg conf-logo_icon-globe__14HQv">
<svg viewBox="0 0 24 24" height="16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" shape-rendering="geometricPrecision">
<circle cx="12" cy="12" r="10"></circle>
<path d="M2 12h20"></path>
<path d="M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"></path>
</svg>
</div>
<div class="conf-logo_icon-background__3xSbg conf-logo_icon-image__3ZVq0">
<svg viewBox="0 0 24 24" height="16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" shape-rendering="geometricPrecision">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
<circle cx="8.5" cy="8.5" r="1.5"></circle>
<path d="M21 15l-5-5L5 21"></path>
</svg>
</div>
<div class="conf-logo_icon-background__3xSbg conf-logo_icon-activity__3me5q">
<svg viewBox="0 0 24 24" height="16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" shape-rendering="geometricPrecision">
<path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>
</svg>
</div>
</div>

conf-logo_icon-globe__14HQv {
background: linear-gradient(90deg,#ec6193,#ec4b31);
}

.conf-logo_icon-image__3ZVq0 {
background: linear-gradient(90deg,#ffbc29,#eadf58);
}

.conf-logo_icon-activity__3me5q {
background: linear-gradient(90deg,#57c84f,#53a0ec);
}

.conf-logo_icon-background__3xSbg {
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
width: 24px;
height: 24px;
}
*, *:before, *:after {
box-sizing: inherit;
}

React SSR